Ionic loadingController Dismiss Issue | spinner Bug

Ionic Framework
1

In Ionic 5 , i am getting issue if we change tab while loading something or any api calling at the time i kept loadingController spinner after api call complete spinner will dismiss.

But in my case if API getting time to finish at the moment if i change tab in browser and after some time came back to application then spinner not dismissing i tried multiple ways but its not working.

public async dismissLoader() {
this.checkAndCloseLoader();
setTimeout(() => this.checkAndCloseLoader(), 1000);
}
public async checkAndCloseLoader() {
const loader = await this.loadingController.getTop();
if (loader !== undefined) {
await this.loadingController.dismiss();
}
}
public async dissmissSpinnerLoader() {
if (this.spinner) await this.spinner.dismiss();
}

setInterval not a correct for my requirement that spinner should dissmiss after api response come.

2

First, please use proper code blocks so we can easily read your code :slight_smile:

Second, please update your question with all relevant code. For example, where is this.spinner declared? Where are you calling these methods? Show how you are calling them around your API calls.

3

see Examples: this is my code

getRoute(){
  // in get route function i have api logic and some conditions are there am calling spinner  or Loader here

    this.commonService.showSpinnerLoader(NewTripError.GeneReviseRouteMessage);
}

after that i am dismissing Loader , after api response , i am handling both case if response success or faild this is sample code

   this.scheduleService
      .getRoute(
        this.legModificationLength,
        this.leg,
        this.pageType,
        this.editStatus.type
      )
      .then((routeRes: any) => {
        this.commonService.dissmissSpinnerLoader()
})

// this is show spinner function

import {LoadingController,} from '@ionic/angular';

  constructor(
    public loadingController: LoadingController,
  )

  public async showSpinnerLoader(message?: string) {
    this.spinner = await this.loadingController.create({
      spinner: 'lines',
      cssClass: message ? 'backgroud-box' : 'custom-loading',
      message: message ? message : '',
      backdropDismiss: false,
    });
    await this.spinner.present();
  }

// this is my dissmiss function

  public async dissmissSpinnerLoader() {
    await this.spinner.dismiss();
  }

In normal flow its working properly , only problem is that , while api calling at the time if we change other browser tab or if we go to other application and then came back to the app then its getting stuck

4

Hey, check out my code, this solved my problem (was the same problem as yours).

note: be sure you call the methods with await

  async presentLoading(message?: string) {
    const loader = await this.loadingController.create({ message });
    await loader.present();
    return loader;
  }

  async myCustomFunction(){
    const loader = await this.presentLoading('Some message');
    //Heres my custom code
    await this.myMethod();
    await loader.dismiss();
  }

  async myMethod(){
    // do something else async
  }

I did it this way because if you call “this.presentLoading()” in other methods they will not conflict since I use a variable within the method to return the value and then dismiss the loader.
Normally I prefer to assign values ​​to the instance but I don’t think that’s the case, if I call this method multiple times I’m sure my code won’t work as expected.
Hope it can help you!

6

exactly i am doing same

public async dissmissSpinnerLoader() {
await this.spinner.dismiss();
}

this dissmissSpinnerLoader is in services and i am calling from there.