Observables and Loading Control

Ionic Framework ionic-v3
1

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();
  });
2

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
});
3

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

4

getHearings is returning a FirebaseListObservable

5

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

6

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[]>'.

7

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