Loading Spinners for Asynchronous Firebase Data

https://angularfirebase.com/le....ssons/show-loading-s

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.