Ionic 2, using LoadingController

Sometimes our app it has that some realize tasks what need much time or we don't know the amount of time needed for receive data of the server, or for upload/download an image, file, etc... Normally these task works in background for not keep busy the main thread as this would block the app. The app is running normally but the user can have the sensation that somethings don't works correctly, the screen now is blank, it is waiting for data but the user does not know. For solve it and say to the user that the app is working and waiting data or waiting for the current task finished we can use the LoadingController for show a dialog box with a message to let the user know who the app is working normally.

Here you can read more about these controller. We can customize according our needs, we might dismiss it after a period of time but in my case I don't know when will finish the task.

For that I divide the process in three parts. First declare a variable of type Loading, second I create a function where creates the dialog  and assign them to the Loading variable and show the dialog. And finally when the promise finishes your task, I dismiss the dialog.

First import the components

import { NavController, NavParams, LoadingController, Loading } from 'ionic-angular';

We declare the variable that contains the dialog

loading: Loading;

The function to create and present the dialog

presentLoading () { this.loading = this.loadingCtrl.create({ content: "Waiting data ..." }); this.loading.present(); }

And use it

constructor(public navCtrl: NavController, public navParams: NavParams, public httpService: HttpService, public loadingCtrl: LoadingController) { this.source = navParams.get("src"); this.options = navParams.get("ops"); this.presentLoading(); this.httpService.getData(this.source, this.ops) .then((result:any) => { this.data = result; this.loading.dismiss(); }); }

Obviously is necessary to consider the possible exceptions, the catch clauses where  dismiss the loading dialog and show a message with the problem.

And that's all