Loading Spinners for Asynchronous Firebase Data


In this episode, I will show you how to display and hide a loading spinner when retrieving asynchronous Firebase data from an Angular application. Loading indicators are an important UI feature because they show the end user when more data is incoming.

Step 1 – Create the Spinner component

We’re going to create a SpinnerComponent that can be reused throughout the application. To make it look cool, I am using Spinkit CSS library, which we can just be copied directly into the component’s CSS and HTML files. You do not need to change anything in the component’s TypeScript.

Step 2 – Retrieve Aschronous Data

We need to load some data from Firebase to make use of the spinner.

In this example, I am loading a `FirebaseListObservable` via the AngularFire2 package. The actual data is just and array of items from a to-do list. This code was originally created for the RealTime Database video, so check that out if you want to learn more about asynchronous data streams.

Step 3 – Show and Hide the Spinner

We want to show the spinner in the items-list component while data is being retried.

First, we define a variable called `showSpinner` in the component and set it to true by default. During `ngOnInit`, the data is requested from the service as a `FirebaseListObservable`. We can determine if the data has been loaded by subscribing to it. The function inside the subscribe call will be executed after the observable emits data, so we can simply set `showSpinner` variable to false when this happens.

In the template, we can use the `*ngIf` directive with the `showSpinner` variable to control the visibility spinner.

Going back to the app, we can see that spinner is visible for a split second before the data is loaded. The longer it takes for your data the load, the more useful this spinner will be your end users.

That’s it for loading spinners, see you next time.

Nguồn: https://quydinh.com

Xem thêm bài viết khác: https://quydinh.com/cong-nghe


  1. thank's for the video.
    but the way you did it, once it is set it will never go back. how would you get it to display again if the observable changes. I did something similar, with an if statement but it's not getting set.

  2. Error: Template parse errors:
    'loading-spinner' is not a known element:
    1. If 'loading-spinner' is an Angular component, then verify that it is part of this module.
    2. If 'loading-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<loading-spinner *ngIf = "showSpinner"></loading-spinner>

    how do i resolve this?

  3. Another excellent and easy to follow video. Doing it this way occurred to me but I was concerned about the whole memory leak thing and unsubscribing. Do you suggest unsubscribing? Or does AF2 handle this ok? Can't seem to find much about the do's and don't of subscribing to these.


Please enter your comment!
Please enter your name here