Dismiss a LoadingController


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 => {

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 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.