[v2] Loading component's backdrop is solid black and can't be dismissed

[biesbjerg]

My code calling the component:

import {Page, NavController, Loading} from 'ionic-angular';
import {ProductService} from '../../providers/product.service';

@Page({
    templateUrl: 'build/pages/product-list/product-list.html',
    providers: [ProductService]
})
export class ProductListPage {

    public products: any[] = [];

    public constructor(
        protected _navController: NavController,
        protected _productService: ProductService
    ) {
        let loading = Loading.create();
        this._navController.present(loading);

        this._productService.findAll().then((products) => {
            this.products = products;
            loading.dismiss();
        });
    }

}

Result:

I tried making a plunker, but I'm not able to make the launcher show at all, no errors, don't know what's going on.

Oh, I'm using beta 4 of course, and also made sure the plunker I attempted to use was using beta 4.

[jgw96]

Hello! Thanks for opening an issue with us! Unfortunately i am having an issue reproducing your issue with my test of the loader component, but i do have something you could try. Could you take the code that you have in your constructor and instead wrap it in onPageDidEnter(). Heres an example of how that would work

import {Page, NavController, Loading} from 'ionic-angular';
import {ProductService} from '../../providers/product.service';

@Page({
    templateUrl: 'build/pages/product-list/product-list.html',
    providers: [ProductService]
})
export class ProductListPage {

    public products: any[] = [];

        onPageDidEnter() {
                let loading = Loading.create();
        this._navController.present(loading);

        this._productService.findAll().then((products) => {
            this.products = products;
            loading.dismiss();
        });
        }

    public constructor(
        protected _navController: NavController,
        protected _productService: ProductService
    ) {

    }

}

[biesbjerg]

It seems it doesn't work if the Loading instance is created (either in constructor or onPageDidEnter) on the app's start page, if that makes sense.

I did as you suggested, and put the code in onPageDidEnter callback. When I navigated to a page (using tabs) that had the above code, it worked correctly, but if I have the same code on that page the tab initially loads, I get the black backdrop issue.

Hope the above makes sense!

[biesbjerg]

Wrapping the code in a setTimeout call makes it work, suggesting it's some kind of timing issue?

    public onPageDidEnter() {
        setTimeout(() => {
            let loading = Loading.create();
            this._navController.present(loading);

            this._productService.findAll().then((products) => {
                this.products = products;
                loading.dismiss();
            });
        }, 100);
    }

[biesbjerg]

To better mimic the structure of my app, create a project using the Tabs template and add Loading.create() to Page1. That should reproduce my issue.

[jgw96]

Hey @biesbjerg ! So, im still having trouble reproducing your issue, here is a Plunker i made based off of your comments above thats working for me: http://plnkr.co/edit/lFIdtSUpAf35SVWXaMtm?p=preview. Do you mind trying that and see if it works for you?

[biesbjerg]

Hey @jgw96, I've succeeded reproducing the issue in the Plunker. Please take a look: http://plnkr.co/edit/rrtN4WUj5VQrqZEIPGmt?p=preview

Edit: Updated plunker link. I didn't know I had to fork and save to a new Plunker to be able to share my changes.

[jgw96]

@biesbjerg Thanks for sharing the plunker, was able to repro the issue this time.

[adamdbradley]

@biesbjerg thanks for the detailed bug report and creating the plunkr, it helped us narrow down the issue. Should be fixed in the next release, thanks!