CODEWITHSUNDEEP
angulartypescriptionic2rxjsionic3
Erico Souza
Erico Souza

Reputation: 276

Show loading for multiple requests in Ionic 3 and Angular 4

How can I display a loading on the screen for the entire time of my two requests?

I tried to put the call pro loading, in both requests. But when the fastest request is finalized, it hides the loading, even if the other request is in progress.

ionViewDidLoad() {
  this.getSummary(parametros);
  this.getHeatmap(parametros);
}

getSummary() {
  this.loadingService.showLoader(this.constants.MSG_LOADING);

  this.remedyProvider.getSummaryByDate().subscribe(
    (response) => {
     /// do something
    }, (error) => {
      this.showSummary = false;
      console.log(`Backend returned error was: ${error}`);
      this.loadingService.hideLoader();
    }, () => {
      console.log('get heatmap complete');
      this.loadingService.hideLoader();
    }););
}

getHeatmap() {
  this.loadingService.showLoader(this.constants.MSG_LOADING);

  this.remedyProvider.getHeatmap().subscribe(
    (response) => {
        //do something      
    }, (error) => {
      console.log(`Backend returned error was: ${error}`);

    }, () => {
      console.log('get heatmap complete');
      this.loadingService.hideLoader();
    });
}

Code of LoadingProvider (loadginService):

export class LoadingProvider {

  loader: any = null;
  constructor(private _loadingController: LoadingController) {
  }

  private showLoadingHandler(message) {
      if (this.loader == null) {
          this.loader = this._loadingController.create({
              content: message
          });
          this.loader.present();
      } else {
          this.loader.data.content = message;
      }
  }

  private hideLoadingHandler() {
      if (this.loader != null) {
          this.loader.dismiss();
          this.loader = null;
      }
  }

  public showLoader(message) {
      this.showLoadingHandler(message);
  }

  public hideLoader() {
      this.hideLoadingHandler();
  }
}

Upvotes: 2

Views: 1228

Answers (1)

sebaferreras
sebaferreras

Reputation: 44669

You can use the forkJoin operator of Observable, in order to make both requests at the same time, and hide the loader when both methods are done:

// Imports...
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin'

// ...

  ionViewDidLoad() {

    // Show the loader
    this.loadingService.showLoader(this.constants.MSG_LOADING);

    Observable.forkJoin([
        this.remedyProvider.getSummaryByDate(),
        this.remedyProvider.getHeatmap()
    ]).subscribe(
        response => {
            let summaryResponse = response[0];
            let heatmapResponse = response[1];

            // Do something with the responses...
            // ...
        }, 
        error => {
            // TODO: handle the error!
            console.log(`Backend returned error was: ${error}`);
        },
        () => {
            console.log('Both request are done');

            // Hide the loader
            this.loadingService.hideLoader();
        });
  }

Upvotes: 4

Related Questions