# Dismiss a LoadingController

**URL:** <https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148>\
**Category:** Ionic Framework\
**Created:** [September 8, 2018, 2:02pm UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148 "2018-09-08T14:02:15Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![shitsod](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/shitsod/32/104800_2.png) [@shitsod](https://forum.ionicframework.com/u/shitsod)\
**Post date:** [September 8, 2018, 2:02pm UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/1 "2018-09-08T14:02:15Z")

</div>

Hi,  
I switched to Ionic v4 recently and I have some troubles with LoadingController.

I do not succeed to cancel it (when I got an error).

I got my function in my component :

```auto
async loadingLogin() {
    const loading = await this.loadingController.create({
      message: 'Connexion ...',
      showBackdrop: true,
      id: 'login'
    });
    return await loading.present();
  }

```

When the user log in, I launch the loadingController. If the login succeeds, I can cancel it.  
But if it fails, I can’t cancel the spinner :

```auto
  @Input() set pending(isPending: boolean) {
    if (isPending) {
      this.loadingLogin();
    } else {
      this.loadingController.dismiss('login');
    }
  }

  @Input() set error(error: HttpErrorResponse) {
    if (error) {
      this.loadingController.dismiss(null, null, 'login');
      this.loadingController.dismiss('login');
    }
  }

```

Here is my package.json and I got the angular type of Ionic project :

```auto
  "dependencies": {
    "@angular/common": "~6.1.1",
    "@angular/core": "~6.1.1",
    ...
    "@ionic-native/core": "5.0.0-beta.15",
    "@ionic-native/network": "5.0.0-beta.15",
    "@ionic-native/splash-screen": "5.0.0-beta.15",
    "@ionic-native/status-bar": "5.0.0-beta.15",
    "@ionic/angular": "4.0.0-beta.7",
    ...
  },

```

---

<div class="post-metadata">

**Author:** ![RCODeGO](https://avatars.discourse-cdn.com/v4/letter/r/54ee81/32.png) [@RCODeGO](https://forum.ionicframework.com/u/RCODeGO)\
**Post date:** [September 8, 2018, 6:51pm UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/2 "2018-09-08T18:51:20Z")

</div>

Hi, the problem is that you are dismissing the controller and you need to dismiss the loading instance. For that I recommend you save the loading instance in a global variable and then dismiss it:

```auto
let loading: Loading = null;

loadingLogin() {
     this.loading = this.loadingController.create({
      message: 'Connexion ...',
      showBackdrop: true,
    });
    this.loading.present();
  }

@Input() set pending(isPending: boolean) {
    if (isPending) {
      this.loadingLogin();
    } else {
      this.loading.dismiss();
    }
  }

  @Input() set error(error: HttpErrorResponse) {
    if (error) {
        this.loading.dismiss();
    }
  }

```

---

<div class="post-metadata">

**Author:** ![shitsod](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/shitsod/32/104800_2.png) [@shitsod](https://forum.ionicframework.com/u/shitsod)\
**Post date:** [September 9, 2018, 7:44am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/3 "2018-09-09T07:44:09Z")

</div>

Hi,  
Thank you for your answer but unfortunately it’s not working.

```auto
loadingLogin2() {
    this.loading2 = this.loadingController.create({
      message: 'Connexion ...',
      showBackdrop: true,
    });
    this.loading2.present();
  }

```

I got the error message and fall in a loop :

> ERROR TypeError: this.loading.present is not a function

I think it’s more related to the fact that I created an angular type project :

```auto
ionic start myApp super --type=angular

```

Because some methods or values described in the documentations do not exist or are not the same in my library.

```auto
import { LoadingController } from '@ionic/angular';

```

```auto
// example from the documentation : https://beta.ionicframework.com/docs/api/loading/
async presentLoading() {
    const loading = await this.loadingController.create({
      content: 'Hellooo', // For me 'content' does not exist, it's 'message' instead
      duration: 2000
    });
    return await loading.present();
  }

```

the optional value **dismissOnPageChange** described in the doc does not exist.

I may not have the right documentation.

---

<div class="post-metadata">

**Author:** ![RCODeGO](https://avatars.discourse-cdn.com/v4/letter/r/54ee81/32.png) [@RCODeGO](https://forum.ionicframework.com/u/RCODeGO)\
**Post date:** [September 9, 2018, 5:14pm UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/4 "2018-09-09T17:14:01Z")

</div>

Sorry, I supposed that you were in ionic 3. Try this:

```auto
async presentLoading() {
    this.loading = await this.loadingController.create({
      content: 'Hellooo',
      duration: 2000
    });
    return await this.loading.present();
}

```

---

<div class="post-metadata">

**Author:** ![gigocabrera](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gigocabrera/32/123546_2.png) [@gigocabrera](https://forum.ionicframework.com/u/gigocabrera)\
**Post date:** [February 10, 2019, 6:14pm UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/5 "2019-02-10T18:14:56Z")

</div>

@shitsod were you able to dismiss the loading controller? I just switched to ionic 4 and have the exact same issue in my login page. Any help would be greatly appreciated!!!

---

<div class="post-metadata">

**Author:** ![gaurav\_ch](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gaurav_ch/32/92509_2.png) [@gaurav\_ch](https://forum.ionicframework.com/u/gaurav_ch)\
**Post date:** [February 14, 2019, 11:54am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/6 "2019-02-14T11:54:48Z")

</div>

using a class variable worked for me

```auto
async presentLoading() {
    this.loading = await this.loadingController.create({
      content: 'Hellooo',
      duration: 2000
    });
    return await this.loading.present();
}

```

call this.presentLoading() when you want to show the loader. When you want to dismiss the loader, do:

```auto
this.loading.dismiss();

```

it is very irritating that the docs for v4 are incomplete.

---

<div class="post-metadata">

**Author:** ![sean-eight](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sean-eight](https://forum.ionicframework.com/u/sean-eight)\
**Post date:** [March 5, 2019, 4:10pm UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/7 "2019-03-05T16:10:52Z")

</div>

I don’t think you should be using the instance returned by `create()`. Every time I’ve run into a problem with loading messages not dismissing like I expect, it’s been an async problem. Make sure you aren’t initiating your AJAX request until after the modal is displayed. The only way to to that is put your http call after the await or in then of `present()`.

It happens quite often that the http request will error out faster than the modal code has run and you are trying to dismiss a modal that doesn’t exist yet. Eventually the loader will display, but you’ve already tried to dismiss it, so it’s there to stay.

---

<div class="post-metadata">

**Author:** ![Spsahu](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@Spsahu](https://forum.ionicframework.com/u/Spsahu)\
**Post date:** [May 15, 2019, 5:33am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/8 "2019-05-15T05:33:21Z")

</div>

Do anyone got the solution ?

please share working solution.

Thanks

---

<div class="post-metadata">

**Author:** ![Spsahu](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@Spsahu](https://forum.ionicframework.com/u/Spsahu)\
**Post date:** [May 15, 2019, 7:01am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/9 "2019-05-15T07:01:43Z")

</div>

## Alernative solution

presentLoading() {  
this.loadingController.create({  
message: ‘Loading…’  
}).then((res) =\> {  
res.present();  
// call your methods  
this.getInfoFromRest().then((d) =\> {  
res.dismiss();  
}).catch((er) =\> {  
res.dismiss();  
})  
});  
}

---

<div class="post-metadata">

**Author:** ![bobyui](https://avatars.discourse-cdn.com/v4/letter/b/0ea827/32.png) [@bobyui](https://forum.ionicframework.com/u/bobyui)\
**Post date:** [June 27, 2019, 3:57am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/10 "2019-06-27T03:57:03Z")

</div>

tried everthing, the loader.dismiss after error are not even dismissed, and triggers an error of undefined…

---

<div class="post-metadata">

**Author:** ![morphist](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/morphist/32/127474_2.png) [@morphist](https://forum.ionicframework.com/u/morphist)\
**Post date:** [June 27, 2019, 4:42am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/11 "2019-06-27T04:42:20Z")

</div>

so can you share your code if its not working. I can dismiss it without issues. Sometimes you need to be careful to call .dismiss() only after the indicator fully loaded. But it works fine.

---

<div class="post-metadata">

**Author:** ![morphist](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/morphist/32/127474_2.png) [@morphist](https://forum.ionicframework.com/u/morphist)\
**Post date:** [June 27, 2019, 4:43am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/12 "2019-06-27T04:43:12Z")

</div>

For the issue when after error its not dismissing - good practice is to call .dismiss from within your error handler.

---

<div class="post-metadata">

**Author:** ![bobyui](https://avatars.discourse-cdn.com/v4/letter/b/0ea827/32.png) [@bobyui](https://forum.ionicframework.com/u/bobyui)\
**Post date:** [June 27, 2019, 11:20am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/13 "2019-06-27T11:20:57Z")

</div>

I place it right in the error handler and its shooting undefined which does not makes sense at all

---

<div class="post-metadata">

**Author:** ![NigelPeck](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nigelpeck/32/127007_2.png) [@NigelPeck](https://forum.ionicframework.com/u/NigelPeck)\
**Post date:** [July 12, 2019, 3:58pm UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/14 "2019-07-12T15:58:01Z")

</div>

Agreed, this is likely the problem, there’s nothing wrong with using dismiss on loadingController.

---

<div class="post-metadata">

**Author:** ![amolgkulkarni](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@amolgkulkarni](https://forum.ionicframework.com/u/amolgkulkarni)\
**Post date:** [August 3, 2019, 6:08am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/15 "2019-08-03T06:08:59Z")

</div>

Was facing same issue. Used callbacks to solve.  
Please refer following code.

presentLoadingAndCall(message: string, cb, data) {  
const loading = this.loadingCtlr.create({  
message: message,  
spinner: “bubbles”,  
translucent: true  
}).then(loading =\> {  
loading.present();  
**this[cb](data, loading);**  
});  
}

---

<div class="post-metadata">

**Author:** ![FaisalST32](https://avatars.discourse-cdn.com/v4/letter/f/919ad9/32.png) [@FaisalST32](https://forum.ionicframework.com/u/FaisalST32)\
**Post date:** [November 28, 2019, 7:32am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/16 "2019-11-28T07:32:11Z")

</div>

After trying everything, here’s what I finally came up with. Seems to be working well so far.

Trying to make use of setInterval with a 500ms interval. I also tried to keep the function non-async so that it may be easily used in the consuming end.

```auto
import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({ providedIn: 'root' })
export class UiService {
    constructor(private loading: LoadingController) { }

    private loader: HTMLIonLoadingElement;
    private loaderLoading = false;

    public showLoading(message: string) {
        this.loaderLoading = true;
        this.loading.create({
            message,
            showBackdrop: true
        }).then(load => {
            this.loader = load;
            load.present().then(() => { this.loaderLoading = false; });
        });
    }

    public dismissLoading() {
        const interval = setInterval(() => {
            if (this.loader || !this.loaderLoading) {
                this.loader.dismiss().then(() => { this.loader = null; clearInterval(interval)});
            } else if (!this.loader && !this.loaderLoading) {
                clearInterval(interval);
            }
        }, 500);
    }
}

```

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [November 28, 2019, 11:25pm UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/17 "2019-11-28T23:25:28Z")

</div>

> [@FaisalST32](#):
>
> Trying to make use of setInterval with a 500ms interval

I’m confused. Doesn’t this just make the user wait for half a second for no reason?

> [@FaisalST32](#):
>
> I also tried to keep the function non-async so that it may be easily used in the consuming end.

Also not seeing the point of this.

---

<div class="post-metadata">

**Author:** ![jsbaes](https://avatars.discourse-cdn.com/v4/letter/j/ba9def/32.png) [@jsbaes](https://forum.ionicframework.com/u/jsbaes)\
**Post date:** [February 14, 2020, 8:12am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/18 "2020-02-14T08:12:02Z")

</div>

Fantastic solution !!! With your code finally I’ve could implement correctly this functionality. Probably there are other solutions but this one works for me after many failed attempts. Thank you very much !!!

---

<div class="post-metadata">

**Author:** ![thirdtiu](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/thirdtiu/32/131059_2.png) [@thirdtiu](https://forum.ionicframework.com/u/thirdtiu)\
**Post date:** [March 9, 2020, 12:16am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/19 "2020-03-09T00:16:40Z")

</div>

i just used `this.loadingController.dismiss();` and it works fine.

---

<div class="post-metadata">

**Author:** ![bobyui](https://avatars.discourse-cdn.com/v4/letter/b/0ea827/32.png) [@bobyui](https://forum.ionicframework.com/u/bobyui)\
**Post date:** [April 7, 2020, 5:58am UTC](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148/20 "2020-04-07T05:58:26Z")

</div>

I solved by adding a timeout for the default controller itself, but its very strange where sometimes it complains overlay does not exist even though the controller is being called and being dismissed

[Next page](https://forum.ionicframework.com/t/dismiss-a-loadingcontroller/141148.md?page=2)