Dismiss a LoadingController

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 :

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 :

  @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 :

  "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",
    ...
  },

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:

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();
    }
  }
1 Like

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

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 :

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.

import { LoadingController } from '@ionic/angular';
// 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.

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

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

@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!!!

using a class variable worked for me

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:

this.loading.dismiss();

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

1 Like

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.

1 Like

Do anyone got the solution ?

please share working solution.

Thanks

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();
})
});
}

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

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.

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

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

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