LoadingController dismiss is not working

I want to create a independent method for loading show and hide so that i can use them across the file or can create service.

I am seeing strange behaviour with loader dismiss() method of LoadingController - '@ionic/angular'.

Working in true condition but on exception it not working, is there any other way to implement same.

Method calling loader function is -

please find the online comment for working and not working mentioned in the `signUser()` function -  
async signUser() {
    this.loadingFunction('Loading...')
    try {
      this.fireAuth.auth.signInWithEmailAndPassword(this.user.username, this.user.password).then(response => {
      this.loaderDismiss();` ** Working fine here*`
     }).catch(error => {
        this.loaderDismiss(); `** Not working here **`

        if (error.code === "auth/wrong-password")
          this.alertFunction(error.message);
        else if (error.code === "auth/user-not-found")
          this.alertFunction(error.message);
        else this.alertFunction(error.message);
      })
      this.loaderDismiss(); `** Not working here **`
    } catch (error) {
      this.loaderDismiss();  `** Not working here **`

      console.log('something went wrong and its not your fault>>>', error);
      if (error.code === "auth/argument-error")
        this.alertFunction(error.message);
  }
}

all methods are in same TS file -

async loadingFunction(loadmsg) {
    this.loader = await this.loadCtrl.create({
      message: loadmsg
    })
    await this.loader.present();
 }

async loaderDismiss(){
   this.loader = await this.loadCtrl.dismiss();
}

@champion007 I’m facing this problem as well. Were you able to find a solution to this?

It’s better to call dismiss() on the loaderObject you’ve created via the loadCtrl(), not on the controller directly.

Thanks @MattE I will try that.

@MattE Calling dismiss() on the loader object did not solve my problem either. The problem was due to the timing issues in the callback of loadCtrl.create().

I ended up introducing a boolean and later stumbled upon a similar accepted answer.

Hope this helps… @champion007

I also faced same problem while calling multiple api’s. This method fixed my issue

  async closeLoader() {
    // Instead of directly closing the loader like below line
    // return await this.loadingController.dismiss();
	
    this.checkAndCloseLoader();
	
	// sometimes there's delay in finding the loader. so check if the loader is closed after one second. if not closed proceed to close again
    setTimeout(() => this.checkAndCloseLoader(), 1000);
    
  }

  checkAndCloseLoader() {
   // Use getTop function to find the loader and dismiss only if loader is present.
   const loader = await this.loadingController.getTop();
   // if loader present then dismiss
    if(loader !== undefined) { 
      await this.loadingController.dismiss();
    }
  }
3 Likes