Angularfire: [docs] Recommendations on progressbar

[EvAlex]

It would be nice if you provided some recommendations and/or example on how to implement progressbar on retrieving list of data. Initial load takes some time, so it's a must-have thing.

[agu-z]

Hi @EvAlex, It's actually pretty easy to do:

@Component({
  selector: 'my-component',
  template: `
    <my-spinner *ngIf="loading"></my-spinner>
    ...
  `
})
class MyComponent {
  loading = true;

  constructor(private af: AngularFire) {
    this.myList = this.af.database.list(`/users`);

    // Subscribe to the first event and when it happens set `loading` to false
    this.myList.first().subscribe(() => this.loading = false);
  }
}

[davideast]

I think we can build a "recipes" section that could handle this.

[katowulf]

Great idea for recipes. But ideally, you should make initial load fast instead of depending on loading screens : ). A peeve of mine.

[escobar5]

@katowulf I was thinking the same, but I cannot find how to render it faster, I'm just getting the items of a list (there are just 9 items) and it is slow, so in the UI there is a jump. Do you have any idea on how to make it faster?

[mrmokwa]

Is it possible to extend AngularFireDatabase, like it's made for http class in this article? I could not make it work.

[leblancmeneses]

Most recipe though mean it should be baked into the framework.
Example: RequireSignInGuard, WaitForSignInGuard

This one should modify:

https://github.com/angular/angularfire2/blob/f277779b44d41f3e6ae3b03a4ce40d22af431021/src/database/list/create-reference.ts

AngularFireList should expose an isBusy observable that is set by:

    update: createDataOperationMethod<T>(query.ref, 'update'),
    set: createDataOperationMethod<T>(query.ref, 'set'),
    push: (data: T) => query.ref.push(data),
    remove: createRemoveMethod(query.ref),
    valueChanges<T>(events?: ChildEvent[]) { 

[Toxicable]

I don't think baking it into every single request is the best idea.
Since a lot of requests are very fast and very often, think of a chat application for example, having a progress bar flash up for 200ms or less would just be distracting and having that overhead on every single request is unnecessary

[jamesdaniels]

The AFS dynamic querying example now has a loading template per 0f6f2bf, I'll keep in mind for future examples