Search Lessons, Code Snippets, and Videos
search by algolia
X
#native_cta# #native_desc# Sponsored by #native_company#

Show Loading Spinners for Firebase Data

Episode 9 written by Jeff Delaney
full courses for pro members

Health Check: This lesson was last reviewed on and tested with these packages:

  • Angular v6.01
  • AngularFire2 v5

Find an issue? Let's fix it

In this lesson, I will show you how to display and hide a loading spinner while retrieving asynchronous Firebase data. This is an important UI element for Angular apps because it gives the end user some indication that data is incoming - otherwise they will just see data pop into existence without warning.

The Spinner Component

using spinkit with angular

ng g component ui/loading-spinner

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

loading-spinner.component.html

<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>

Items Component and Service

We need to load some asynchronous data to demonstrate the spinner.

item.service.ts

The Firestarter demo app has an item service returns a FirebaseListObservable via the AngularFire2 package, which is a stream from the database. Check out realtime database lesson more details about working the Firebase data asynchronously.

import { Injectable } from '@angular/core';
import { AngularFire, AngularFireDatabase } from 'angularfire2';
import { Item } from './item';

@Injectable()
export class ItemService {

constructor(
private af: AngularFire,
private db: AngularFireDatabase
) { }

getItemsList() {
return this.db.list('/items').valueChanges();
}
}

items-list.component.ts

First, we define a variable called showSpinner in the component and set it to true by default. During ngOnInit, we request the FirebaseListObservable and 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 to false.

import { Component, OnInit } from '@angular/core';
import { ItemService } from '../shared/item.service';

@Component({
selector: 'items-list',
templateUrl: './items-list.component.html',
styleUrls: ['./items-list.component.scss']
})
export class ItemsListComponent implements OnInit {

items: any;

showSpinner: boolean = true;

constructor(private itemSvc: ItemService) { }

ngOnInit() {
this.items = this.itemSvc.getItemsList({limitToLast: 5})
this.items.subscribe(() => this.showSpinner = false)
}

}

items-list.component.html

In the component template, it’s as simple as using the *ngIf directive with the showSpinner variable to conditionally show the spinner component.

<loading-spinner *ngIf="showSpinner"></loading-spinner>