angular / angularfire

Angular + Firebase = ❤️
https://firebaseopensource.com/projects/angular/angularfire2
MIT License
7.69k stars 2.19k forks source link

[docs] Recommendations on progressbar #391

Closed EvAlex closed 7 years ago

EvAlex commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

katowulf commented 8 years ago

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

escobar5 commented 8 years ago

@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 commented 7 years ago

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

leblancmeneses commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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