Dismiss Ionic 4 loading (spinner) when the data is ready

1
votes

How to dismiss my simple Ionic 4 loader (spinner), when the data is ready? There must be a simple way to do that, but somehow I cannot find a good example.

Spinner:

async runSpinner(loadingId: string) {
  const loading = await this.loadingController.create({
    id: loadingId,
    message: 'Loading...'
  });
  await loading.present();

  const { role, data } = await loading.onDidDismiss();
}

Data (when this is loaded, spinner should stop)

this.someService
  .getCustomizationResult(requestData)
  .subscribe(data => {
    // if (data) {
    // ...
});

I've tried to do it with setting a boolean, but it didn't work. Thanks in advance!

2
ionic-frameworkionic4

2 Answers

0
votes

Check this one 

const loading = await this.loadingController.create({
message: 'Loading...'
});

}
// start working 
Loading.present().then( async ()=> {

 /////Call your services to get data

}).then( async() => {
loading.dissmiss();

});
0
votes

You could go for this approach:

  • use a boolean value to show/hide a loading spinner
  • set the spinner as active when you enter the page with ionViewWillEnter
  • when your data loads, set the spinner to false
  • don't forget to hide the spinner when your service sends an error, otherwise the spinner won't hide to show an error msg for example.

Example

<ion-content>
  <ion-grid>
    <ion-row *ngIf="spinner">
      <ion-col size="12">
        // You can customize this the way you want
        <ion-spinner></ion-spinner>
      </ion-col>
    </ion-row>
    <ion-row *ngIf="!spinner">
      // When the data loads, show this ...
    </ion-row>
  </ion-grid>
</ion-content>

spinner: boolean;

ionViewWillEnter() {
  this.spinner = true;
}

getCustomizationResult() {
  this.someService
    .getCustomizationResult()
    .subscribe({
      next: (data) => {
        // data
        this.spinner = false;
      },
      error: (error) => {
        // error
        this.spinner = false;
      }
  });
}