Ionic 4 LoadingController

Question

I am trying to add a LoadingController to my Ionic 5 app.

With the below code, the loading spinner is appearing:

async presentLoading() {
    const loading = await this.loadingCtrl.create({
      message: 'Please wait...',
    });
    await loading.present();
  }

getPosts() {

    this.posts = [];
    this.presentLoading();

    query.get()
      .then((docs) => {
        docs.forEach((doc) => {
          this.posts.push(doc);
        })
      }).catch((err) => {
        console.log(err)
      })

}

But I don't know how to dismiss the LoadingController once the posts array has been populated.

Can someone please show me how this is done?

Answer 1

You have to dismiss the controller. For that you will have to keep a reference to it, something like this,

async presentLoading() {
    this.loading = await this.loadingCtrl.create({
        message: 'Please wait...',
    });
    await this.loading.present();
}
getPosts() {
    this.posts = [];
    this.presentLoading();
    query.get()
    .then((docs) => {
        docs.forEach((doc) => {
            this.posts.push(doc);
            this.loading.dismiss();
        })
    }).catch((err) => {
        console.log(err)
    })
}

If you need to get notice when the dismiss occurs, you can listen to onDidDismiss event.

Links:

• Ionic Docs - LoadingController