Dismiss a LoadingController

Hello,

I have the same problem working with ionic and angular. So I can solved it in this way:

async presentLoading() {

    const loading = await this.loadingCtrl.create({

      cssClass: 'my-custom-class',

      spinner: 'bubbles',

      message: 'Loading please wait ...',

      id: 'loading'

      // duration: 20000,

    });

    return await loading.present();



  }

  async deleteLoading() {

    const loader = this.loadingCtrl.getTop();

    (await loader).parentNode.removeChild(await loader);

  }
1 Like

Here is the gist of concurrency tolerant loader service:

Hope it will help someone here:)

  async presentLoading() {
    const loading = this.loadingController.create({
      cssClass: 'my-custom-class',
      message: 'Please wait...',
    })
    await (await loading).present();
    return loading;
  }

  dismissLoading(loading) {
    loading.then(load => {
      load.dismiss();
    })
  }
}

works for me
loading is basically a promise, we need to keep track of the promise when returning

async presentLoading(message) {
this.loading = await this.loadingController.create({
message ,
});
await this.loading.present();
}

async program_function(){
// program logic
await this.presentLoading(‘show loader’)
// continue program logic
this.loading.dismiss()
}

This One Worked For Me. I was using Ionic v5.

I recommend never assigning loading components to controller properties like that, because it obscures ownership and facilitates reuse and double-dispose bugs.