LoadingController example showing “Loading…” message

For longer running operations (e.g., data requests) it might be nice to show the user that you are loading their data or performing a long running action. For this we will use the LoadingController to show a simple message while we are retrieving a list of nearby shows from our service.

import { LoadingController } from '@ionic/angular';

constructor(private loadingCtrl: LoadingController, 
            private showsService: ShowsService) {  }

updateShows() {
    this.loadingCtrl.create({ message: 'Loading shows...' }).
      then((res) => {
        res.present();
        this.showsService.getShows()
          .subscribe((data: any) => {
            this.shows = data;
            res.dismiss();
        });
      });
  }

In your constructor, be sure to inject the LoadingController.

Note: The method updateShows() is actually called during a different point in my code, but where/when is not important to this example.

If the service call is really fast then the “Loading” message may not appear at all. When it does show up, here is what it looks like.

This is a really basic example. There are a few options for setting the loading indicator and more information for that can be found in the Ionic documentation: https://ionicframework.com/docs/api/loading