How can i show a loding spinner till async pipe has completed retrieving all items from cloud?

Hi guys, I am retrieving all the posts from firebase. I would like to show a loading spinner untill all item from the ‘posts’ are retrieved on my view. I know how to show the spinner. I just want to know how to wait for all the items in the posts to be retrieved.

posts: FirebaseListObservable<any>;
this.posts = this.afDb.list('/posts');

on my view:

<div *ngFor='let post of posts | async'>





Thanks in advance

Hey @mikethetechy,

You will need to work will promise or observable. And will close the spinner only when you receive the data you are waiting for.
Here is a sample of code just to show you the way.

getData(fbPath): Promise<any> {
    //open spinner load here
    return Promise.resolve().then(() => {
      return this.afDb.list('/posts');
    }).then(data => {
      //do whatever you want with your data
      //close the load spinner
    }).catch(err => {
      //close the load spinner
      //treat your error

Hope this will help.

Feel free to ask if you don’t understand something

1 Like

@quieterkali thanks for the reply! i will give that a try

I don’t understand why you are calling Promise.resolve() and returning Promise<any>.

Hey @rapropos, actually i am new with JS and learning right now. Would you mine to tell me what is wrong and correct me please?

First concern is the explicit promise construction antipattern. Second is that any subverts type checking, so it is better to define a business layer interface and use that.

Hey @rapropos, i have been read the content you sent to me and thank you very much.Your comment helped me to learn more about promise. And i notice that they were a better way to do what @mikethetechy wanted since the method is returning an observable.

//start spinner = this.afDb.list('/posts').map(data => {
    //do whatever you want