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

Ionic Framework ionic-v3
1

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'>

<h3>{{post.title}}</h3>

<p>{{post.message}}</p>

<p>{{post.username}}</p>

</div>

Thanks in advance

2

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
3

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

4

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

5

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?

6

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.

7

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.post = this.afDb.list('/posts').map(data => {
    //do whatever you want
}