Ionic 2 - Loading Controller doesn't work

Question

I am trying to use the recently added LoadingController this way :

let loading=this.load.create({
  content: "Connexion au serveur Migal en cours..."
});

loading.present();

this.http.get(this.urlCheckerForm.value.migalUrl+'/action/MobileApp/URLChecker')
  .map(res => res.json())
  .subscribe(
    data => this.newConnection(data,loading),
    error => this.catchURLError(loading));

loading.dismiss();

Basically, I just want to display my loading pop-in before my page is loaded, and dismiss it after.

I followed the example on Ionic 2 Documentation, but it doesn't seem to work at all...

EDIT : The loading component doesn't even show up.

Solution 1

The issue with your code is that you're making the http request and then calling the dismiss() but the dismiss() method does not wait for the http request to finish. Please take a look at this plunker.

The code is pretty much self-explanatory:

import { NavController, LoadingController } from 'ionic-angular/index';
import { Http, Response } from '@angular/http';
import { Component } from "@angular/core";
import 'rxjs/Rx';

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  private users : Array<any>

  constructor(private http: Http, private loadingCtrl: LoadingController) {

    // Create the popup
    let loadingPopup = this.loadingCtrl.create({
      content: 'Loading data...'
    });

    // Show the popup
    loadingPopup.present();

    // Get the data
    this.http.get('https://jsonplaceholder.typicode.com/users')
      .map((res: Response) => res.json())
      .subscribe(
        data => {

          // I've added this timeout just to show the loading popup more time
          setTimeout(() => {
            this.users= data;
            loadingPopup.dismiss();
          }, 1000);

          // Should be just this:
          // this.users= data;
          // loadingPopup.dismiss();
        },
        err => console.error(err)
    );

  }
}

Solution 2

I put "loading.dismiss();" in subscribe {} and it works well :)

                    this.http.get(url)
                        .subscribe(data =>{
                            this.items=JSON.parse(data['_body']).results;
                            loading.dismiss();
                        },

Solution 3

You can use the ionic ionViewLoaded() to pop up the Loading Controller and then Dismiss it when the View is loaded and the Content Fetched from your Subscribtion.

ionViewLoaded() {
  let lr = this.loading.create({
    content: 'Your Display Message...',
  });

  lr.present().then(() => {
    this.Yourservice.Yourfunction()
      .subscribe(res => {
        this.yourresult = res;
      });
    lr.dismiss();
  });
}

You can also structure your code like this to make sure the Subscription is Complete before you Dismiss the Loader.

ionViewLoaded() {
      let lr = this.loading.create({
        content: 'Your Display Message...',
      });

      lr.present().then(() => {
        this.Yourservice.Yourfunction()
          .subscribe(
          data => this.yourresult = data,
          error => console.log(error),
          ()=> lr.dismiss()
          );

      });
    }

Comments

[Thomas Dussaut]

Well, thanks to you, the loading component appear but keeps running forever :D

[Thomas Dussaut]

loading.present(); /* some stuff */ loading.onDidDismiss(()=>{loading.dismiss();});

[Thomas Dussaut]

I tried this but as I said, the spin keeps turning forever

[Vanojx1]

no wait, you ve to make the http call inside the onDidDismiss event

[Thomas Dussaut]

It worked like a charm ! :) Thanks for your explanation. I forgot about the asymetric things.

[Amare]

after loadingPopup.dismiss(); you can't use it anymore. let us say we have a button and you want to show the loadingpopup whenever the user clicks on it, then you need to recreate the loadingpopup.