How to dismiss Loader after data is ready

Ionic Framework ionic-v3
1

In my Ionic 2 app, I have a component that consumes a service which makes an http GET to fetch some data. My component then calls this service and when data is available it sets and presents it.

It looks like following:

import { Component,ViewChild } from ‘@angular/core’;

import { NavController,LoadingController,AlertController,ViewController} from ‘ionic-angular’;
import { Facebook } from ‘ionic-native’;

//import pages
import {LoginPage} from “…/…/pages/login/login”;
import {User} from ‘…/…/models/user’
import { Storage} from ‘@ionic/storage’;
//import provider
import { ProfileData } from ‘…/…/providers/profile-data’;
import { NotesData } from ‘…/…/providers/notes-data’;

import firebase from ‘firebase’
import {AddNote} from “…/add-note/add-note”;

/*
Generated class for the NotesList page.

See Ionic Demo: UI Components & API Customization to Create Interface for more info on
Ionic pages and navigation.
*/
@Component({
selector: ‘page-notes-list’,
templateUrl: ‘notes-list.html’
})
export class NotesList {

//facebook user
userProfile: any = null;
uid: any = null;
fireUid:any=null;
name:string=null;
photo: any =null;
user:User=null;
photos:any=null;
currentUser:any=null;
photonew:any=null;
//notes list

notes:any=null;
data:any;
pages: Array<{title: string, component: any}>;

constructor(public navCtrl: NavController,public profileData:ProfileData,private viewCtrl: ViewController,public notesData:NotesData,private loadingCtrl: LoadingController,private alertCtrl: AlertController,public storage:Storage) {
this.data={};
this.data.title=“”;
this.data.desc=“”;

}

ionViewDidLoad() {
// here i want the loader to be until the data is ready.
this.getNotesList(); //this functions not returns data so i can’t do this.getNotesList().then(()=>

}

getNotesList(){
console.log(“get event”);
var that=this;
this.notesData.getNotesLIst().on(‘value’, snapshot => {
let notesList= ;
snapshot.forEach( snap => {
console.log(“id note”+snap.val().id);
notesList.push({
id: snap.val().id,
title: snap.val().title,
desc: snap.val().desc,
color:snap.val().color,
photo:snap.val().photo,
});
});
that.notes = notesList;

});

}
addNote(){
this.navCtrl.push(AddNote);
}

logOutFacebook(){
Facebook.logout().then((response)=>
{
this.navCtrl.push(LoginPage);
alert(JSON.stringify(response));
},(error)=>{
alert(error);
})
}

}

2

if i do that (the loader is forever)

ionViewDidLoad() {
//if i do that the loader is forever
let loader = this.loadingCtrl.create({
dismissOnPageChange: true,
});

loader.present();

// here i want the loader to be until the data is ready.
this.getNotesList(); //this functions not returns data so i can’t do this.getNotesList().then(()=>

}

3 
 ionViewDidLoad() {
    let loader = this.loadingCtrl.create({});

   loader.present().then(() => {
         this.getNotesList().then(() => {
             loader.dismis();
         });
   });
}
3 Likes
4

thank you!
as i said before the functions getnoteslist() not return nothing so it shows me this error
[12:37:28] Property ‘then’ does not exist on type ‘void’.

5

you should return a promise in getNodesList

getNotesList(){
    return new Promise((resolve) => {
        var that=this;
        this.notesData.getNotesLIst().on('value', snapshot => {
            let notesList= [];
            snapshot.forEach( snap => {
                console.log("id note"+snap.val().id);
                notesList.push({
                    id: snap.val().id,
                    title: snap.val().title,
                    desc: snap.val().desc,
                    color:snap.val().color,
                    photo:snap.val().photo,
                });
            });
            that.notes = notesList;
            resolve(true);
        });
    })
}

and inside ionViewDidLoad

ionViewDidLoad() {
    let loader = this.loadingCtrl.create({});
    loader.present();
    this.getNotesList().then((x) => {
        if (x) loader.dismiss();
    }); //this functions not returns data so i can't do this.getNotesList().then(()=>

}
2 Likes
6

thank you sir! it works!!!