Closed EvAlex closed 7 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);
}
}
I think we can build a "recipes" section that could handle this.
Great idea for recipes. But ideally, you should make initial load fast instead of depending on loading screens : ). A peeve of mine.
@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?
Is it possible to extend AngularFireDatabase, like it's made for http class in this article? I could not make it work.
Most recipe though mean it should be baked into the framework. Example: RequireSignInGuard, WaitForSignInGuard
This one should modify:
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[]) {
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
The AFS dynamic querying example now has a loading template per 0f6f2bf, I'll keep in mind for future examples
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.