Loading: Using a Progress Spinner

Now that we are using MatTable to display the Vehicle results in the Vehicles component, let’s make one more tweak before moving on to paging and sorting. Let’s turn our attention to the “Loading…” message.

The current Loading… message

Right now when the Vehicles component is loading, you just see text on the screen that says “Loading like this.

Which is rendered in a simple <p> element like this:

<p *ngIf="!vehicles"><em>Loading...</em></p>

This is fine and does the job. But let’s make it look a little more professional. We can replace the “Loading…” text with a spinner from the Angular Material component library called Progress Spinner. Let’s do that now.

Import the Progress Spinner Module

Open the angular-material.module.ts file and modify it with the contents below.

FredsCars/src/app/angular-material.module.ts

import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

const angularMatModules = [
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatTableModule,
  MatProgressSpinnerModule

]

@NgModule({
  imports: [
    angularMatModules
  ],
  exports: [
    angularMatModules
  ]
})
export class AngularMaterialModule { }

In the code above we import the MatProgressSpinner module into our AngularMaterialModule so we can use the Progress Spinner in the Vehicles Component HTML.

Use Progress Spinner in Vehicles HTML

Open the vehicles.component.html file and modify the contents with the following in bold blue font.

FredsCars/src/app/vehiclesvehicles.component.html

<p *ngIf="!vehicles">
  <mat-spinner style="margin: 0 auto;"></mat-spinner>
</p>

<table mat-table [dataSource]="vehicles"
       *ngIf="vehicles">

<!-- existing code -->

In the code above we simply replaced the old <em>Loading...</em> html with an AM Progress Spinner Component and centered it with an inline style.

Test the Progress Spinner

If you are developing the Angular application and you have your application and database running on the same machine, the Vehicles component may load so fast you never see the loading message or spinner. If that’s the case you can’t really tell if the Spinner is working properly.

Let’s temporarily comment out the http.get() call in the ngInit() function so the vehicles property will still be null. Then we can see the Progress Spinner in action.

Commenting out http.get() call in ngInit() in the FredsCarssrc/app/vehicles/vehicles.component.ts file.

/* existing code */

ngOnInit() {
    //this.http.get<Vehicle[]>(environment.baseUrl + 'api/vehicles').subscribe(result => {
    //  this.vehicles = result;
    //}, error => console.error(error));
  }

/* existing code */

And now the results in your browser should look similar to the following.

Of course I can’t really capture the spinning motion in a screenshot but you get the idea.

Now uncomment the http.get() call we just commented out in FredsCarssrc/app/vehicles/vehicles.component.ts so the application can once again show the vehicle results in the Vehicles component.

What’s Next

In this module we stopped for a little house cleaning and replaced the plain “Loading…” message with an Angular Material Progress Spinner. In the next module we will return to the MatTable in the Vehicles Component and implement Paging and Sorting.