Ionic 7: ion-loading don't dismiss

Ionic Framework Ionic Angular
1

Hello everyone,
i want to dismiss ion-loading with the dismiss function according to the official documentation, but ion-loading component don’t dismiss after showing despite the function invocation. If i add duration parameter in the options, ion-loading component dismiss after the timeframe.
Your help will be great.

const loadingEelementOptions = {
      cssClass: 'ion-loading',
      spinner: 'circular',
    };
const loadingElement = await this.loadingCtrl.create(loadingEelementOptions);
loadingElement.present();
// Some stuff
await loadingElement.dismiss();
2

try to remove the await on .dismiss

anyway, this is how i use it:

async showLoader() {

this.loading = await this.loadingCtrl.create({
  spinner: 'bubbles',
  duration: 3000,
  message: this.alertLetturaDatiLabel,
  translucent: true,
});
return this.loading.present();

}

async stopLoader() {
await this.loading.dismiss()
.then(() => {
this.loading = null;
})
.catch(e => console.log(e));
}

i use them inside a provider, so I use alway the same methods

3

Done. Issue remain the same. The problem is i want to wait till a particular action finished before dismiss ion-loading component.

4

well you can achieve it in 2 ways:

  • wait for the response of a REST service
  • using a flag which establishes if a certain behaviour is currently “in action”

in the previous example you can use a flag “isLoading”

async mostraLoader() {
this.isLoading = true;
this.loading = await this.loadingCtrl.create({
spinner: ‘bubbles’,
duration: 3000,
message: this.alertLetturaDatiLabel,
translucent: true,
});
return this.loading.present();
}

async stoppaLoader() {
this.isLoading = false;
await this.loading.dismiss()
.then(() => {
this.loading = null;
})
.catch(e => console.log(e));
}

5

Thanks for the additional code.

1 Like