CODEWITHSUNDEEP
typescriptangularloadingionic2
Dave
Dave

Reputation: 5416

Ionic 2: Loading component doesn't always dismiss (randomly)

Q) Anyone know if the Loading component in Ionic 2 is broken or I'm being stupid?

I am trying to use the Loading component from Ionic 2 like so:

let loading = Loading.create({
  content: 'Loading: ',
  duration: 3000
});
nav.present(loading);

Even though they are set to dismiss themselves, they sometimes appear doubled up (i.e. 2 overlays over the screen, so much darker background) and they don't dismiss ever.

This seems broken to me.

I've tried keeping a global variable and dismissing each one like so:

  showLoading(nav: NavController) {
    if(!window.loadingOverlays) {
      window.loadingOverlays = [];
    }
    // only ever show one instance of the overlay.
    if(window.loadingOverlays && window.loadingOverlays.length > 0) {
      return;
    }

    let loading = Loading.create({
      content: 'Loading...'
    });
    nav.present(loading);
    window.loadingOverlays.push(loading);
  }

  hideLoading() {
    if(!window.loadingOverlays || window.loadingOverlays.length == 0) { 
      return; 
    }
    window.loadingOverlays.forEach((overlay) => {
      overlay.dismiss();
    });
    window.loadingOverlays = [];
  }

and adding to it and manually dismissing them, but that has no effect.

Upvotes: 4

Views: 2700

Answers (1)

Jean-Yves Delmotte
Jean-Yves Delmotte

Reputation: 106

I just faced an issue like yours and I solved it by puting the code after dismiss() in the .then() of the promise that the dismiss() function returns.

eg : overlay.dismiss().then(() => { /* PUT YOUR CODE HERE */ })

Upvotes: 5

Related Questions