Observables and Loading Control

What is the best way to to hide the loading controller when loading data using observables since you do not know when all your data is loaded? I am using the code below but due to the nature of observables the loading controller disappears too soon and a blank screen appears for several seconds.

I am currently using:

  let loader = this.loading.create({
    content: 'loading...'
  });

  loader.present().then(() => {
     this.items = dataservice.getHearings();    
     loader.dismiss();
  });

Depends on how dataservice.getHearings is structured, but I’m going to assume that it returns an Observable.

let loader = this.loading.create({});
loader.present();
dataservice.getHearings().finally(() => {
  loader.dismiss();
}).subscribe((hearings) => {
  this.items = hearings;
}, (err) => {
  //deal with error
});

what do i have to import to get the “finally” function ? Thank you !

getHearings is returning a FirebaseListObservable

You shouldn’t have to import anything, I don’t think. FirebaseListObservable seems to extend Observable, and declares finally. Do you get errors?

Yes, I tried importing,

 import { Observable } from 'rxjs/observable';
 import 'rxjs/operators/map';

but i am still getting this error:

Property 'finally' does not exist on type 'FirebaseListObservable<any[]>'.

The new Angular RC “unimported” most Observable operators, so you need to import them manually now. Import operators/finally the way you did for map, and that will probably solve your problem.

import 'rxjs/add/operator/finally';

2 Likes