Ionic loadingController Dismiss Issue | spinner Bug

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.

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.

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