Show Loading Spinners for Firebase Data

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

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>