Angular/Ionic loading icon when page is loading

Question

I am building an app in Angular/Ionic and would like to use the ion-loading component to show a loading icon while the page is still loading.

However, I can't find a lot of information about this in the documentation, but how do you actually check if all content has been loaded? It seems you have to assign a duration to the ion-loading component. Could someone point me in the right direction?

As a kind of workaround (code below) I forced the app to load everything sequentially but this is not ideal, because I'd still like the app to perform some actions in parallel to increase the loading speed.

  loading: any;
  async presentLoading() {
    this.loading = await this.loadingController.create({
      message: 'Loading...'
    });
    await this.loading.present();
  }

  async initializeApp() {
    this.presentLoading();
    await this.getData();
    await this.getCurrentDate();
    await this.loading.dismiss();
  }

  ngOnInit() {
    this.initializeApp();
  }

Hi @NajamUsSaqib, not sure if I understand your question correctly. What I am doing is loading some data, applying some transformations and then showing it on the front-end. — vdvaxel, Apr 17 '20 at 12:56
how are you loading your data? are you using any HTTP api? if yes share your code. — Najam Us Saqib, Apr 17 '20 at 14:29

score 1 · Accepted Answer · answered Apr 17 '20 at 14:48

If the main issue you're trying to solve is that you don't want to call getData() & getCurrentDate() sequentially then you may want to do something like this instead.

async initializeApp() {
    this.presentLoading();
    await Promise.all([
        this.getData();
        this.getCurrentDate();
    ])
    await this.loading.dismiss();
  }

This answer does a good job of explaining how Promise.all() works.

Also, you don't really need to await this.loading.present() & this.loading.dismiss() in this scenario.

Angular/Ionic loading icon when page is loading

1 Answers1