How to dismiss Loading when data's been retrieved

I am trying to dismiss loading the moment page data is loaded from the service

   constructor(public navCtrl: NavController, public jobsData: JobsData, public toastCtrl:   ToastController,
      public loadingCtrl: LoadingController) {

       this.jobsData.load().then(res => {
        this.jobs = res;

       }).catch(() => {
         this.loadingfailure()
       });

    this.presentLoadingCustom()

    }


  presentLoadingCustom() {
       let loading = this.loadingCtrl.create({
          spinner: 'bubbles',
          content: 'Please Wait...'
          });

         loading.present();

         setTimeout(() => {
          loading.dismiss();
         }, 4000);      
       }

this.jobsData.load() takes a bit of time to load , so I created Loading item… how do I dismiss it once the data is loaded ???

You can make your presentLoadingCustom returns the loading object and dismiss it when the data is loaded. Something like:

constructor() {
    this.jobsData.load().then(res => {
    	this.jobs = res;
    	loading.dismiss();
    })

    let loading = this.presentLoadingCustom();
}

presentLoadingCustom() {
  let loading = this.loadingCtrl.create({
	spinner: 'bubbles',
	content: 'Please Wait...'
  });

  loading.present();
  return loading;
}
2 Likes