Ionic 2 show loading when fetching from firebase

Ionic Framework ionic-v3
1

I want to show loading spinner when fetching data from firebase in ionic 2 and once loading is done, the spinner should close automatically. If an error is encountered while fetching from firebase,the error should be handled. Below is my code for now

`constructor(public app:App,public navCtrl: NavController, af: AngularFireOffline, public popoverCtrl: PopoverController, private alertCtrl: AlertController, public viewCtrl: ViewController, public platform: Platform, public loadingCtrl: LoadingController) {
   
    this.news = af.database.list('/news');

}
2

Yeah, so what did you research and try until now?

3

At the moment I am using a loading controller with a timer set to 8 seconds…but it doesn’t throw any error if it can’t reach the firebase database

 constructor(public app:App,public navCtrl: NavController, af: AngularFireOffline, public popoverCtrl: PopoverController, private alertCtrl: AlertController, public viewCtrl: ViewController, public platform: Platform, public loadingCtrl: LoadingController) {

    let loader = this.loadingCtrl.create({
      content: "Loading News...",
      duration: 8000
    });
    loader.present();
    this.news = af.database.list('/news');
  }
4

af.list() returns a FirebaseListObservable. Set your loading message to dismiss once the Observable emits. Or convert the Observable into a Promise and dismiss the loading message once the Promise resolves. Don’t rely on timeouts; rely on acknowledgements.

1 Like
5

Something like this should point you in the right direction:

this.news.subscribe(snapshots => {
        // dismiss loader here
    },
    (err) => {
      console.warn(err);
     // or here, with an error log
     }
  )
1 Like