Ionic 5 + Angular LoadingController with Http Interceptor Loader Present and Dismiss issue

Ionic 5 LoadingController Not working with Http Interceptor

This issue happen when i’m calling multiple http requests at same time in ngOnInit() method.

I have tried 2 different approaches

Approach 1:

public async loaderPresent(): Promise<void> {

    if (!this.isShowing) {
      this.isShowing = true;
      this.loading = await this.loadingController.create({
        cssClass: "my-custom-loader-class",
        message: "Please wait ...",
        backdropDismiss: true
      });
      return await this.loading.present();
    } else {
      this.isShowing = true;
    }
  }

public async loaderDismiss(): Promise<void> {

   // console.log('Loading dismissed ');

    if (this.loading && this.isShowing) {
      this.isShowing = false;
      await this.loadingController.dismiss();
    }
  }

In this case loder still present even all requests completed.

Note: Loader Not Dismissed when multiple http requests called in ngOnInit( ) method

Approach 2

In This Approach we are using Subject rxjs Operator

import { Subject } from ‘rxjs’;

private loadingRequestsStream$: Subject;

private initValues() {
    this.loaderElement = null;
    this.lazyDismissTimer = null;
    this.loadingRequestsStream$ = new Subject();
    this.loadingRequestsStream$.pipe(
      distinctUntilChanged(),
      concatMap(loader => {
        if (loader) {
          return this.createLoader()
        } else {
          return this.dismissLoader()
        };
      })
    )
      .subscribe(); // we do not worry of unsubscribing here since this service will always be used across the app
  };

private async createLoader(): Promise<void> {
    // we check if there is a loader already instantiated:
    if (!this.loaderElement) {
      // if not we create new loader and limit its max duration to 2000ms to prevent blocking loader to hangout indefinitely
      this.loaderElement = await this.loadingController.create({
        cssClass: "my-custom-loader-class",
        message: "Please wait ...",
        //duration: 3000
      });
      // its essential we return a Promise here as this is what concatMap will leverage for serialization
      return this.loaderElement.present();
    } else {
      // if loader element exists already we just return resolved promise:
      return Promise.resolve();
    };
  };

private async dismissLoader(): Promise<void> {
    // here we check if loader element exists and that there is no timer running already
    if (this.loaderElement && !this.lazyDismissTimer) {
      // we set the timer
      this.lazyDismissTimer = setTimeout(async () => {
        // after 700ms we dismiss our loader element:
        await this.loaderElement.dismiss();
        // nullify our properties right after dismiss promise fulfilled itself:
        this.loaderElement = null;
        clearTimeout(this.lazyDismissTimer);
        this.lazyDismissTimer = null;
        // still remember to return a promise to let concatMap know it can proceed
        return Promise.resolve();
      }, 700)
    } else {
      // if loader element does not exist or if there is already a timer running - there is nothing to dismiss, we just return empty promise
      return Promise.resolve();
    };
  };

public showLoader() {
    this.loadingRequestsStream$.next(true);
  };

  public hideLoader() {
    this.loadingRequestsStream$.next(false);
  };

In this case Loader Dismissing before All Requests completed.

Note: Loader Not Dismissed when multiple http requests called in ngOnInit( ) method

2 posts - 2 participants

Read full topic