Angular NgRx Course

Author: jhades

server/get-courses.route.ts

@@ -13,7 +13,7 @@ export function getAllCourses(req: Request, res: Response) {
 
       res.status(200).json({payload:Object.values(COURSES)});
 
-    }, 1500);
+    }, 1000);
 
 
 

src/app/app.component.css

@@ -15,3 +15,10 @@ main {
     outline:none;
 }
 
+
+.spinner-container {
+  width: 100%;
+  margin-top: 100px;
+}
+
+

src/app/app.component.html

@@ -28,6 +28,12 @@
         </button>
     </mat-toolbar>
 
+  <div class="spinner-container" *ngIf="loading">
+
+    <mat-spinner></mat-spinner>
+
+  </div>
+
     <router-outlet></router-outlet>
 
 </mat-sidenav-container>

src/app/app.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {select, Store} from "@ngrx/store";
 import {Observable} from "rxjs";
 import {map} from 'rxjs/operators';
-import {Router} from '@angular/router';
+import {NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router} from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -11,14 +11,32 @@ import {Router} from '@angular/router';
 })
 export class AppComponent implements OnInit {
 
+    loading = true;
 
     constructor(private router: Router) {
 
     }
 
     ngOnInit() {
 
-
+      this.router.events.subscribe(event  => {
+        switch (true) {
+          case event instanceof NavigationStart: {
+            this.loading = true;
+            break;
+          }
+
+          case event instanceof NavigationEnd:
+          case event instanceof NavigationCancel:
+          case event instanceof NavigationError: {
+            this.loading = false;
+            break;
+          }
+          default: {
+            break;
+          }
+        }
+      });
 
     }
 

src/app/app.module.ts

@@ -20,6 +20,7 @@ import {RouterState, StoreRouterConnectingModule} from '@ngrx/router-store';
 
 import {EffectsModule} from '@ngrx/effects';
 import {EntityDataModule} from '@ngrx/data';
+import {MatProgressSpinnerModule} from '@angular/material';
 
 
 const routes: Routes = [
@@ -47,6 +48,7 @@ const routes: Routes = [
     MatMenuModule,
     MatIconModule,
     MatSidenavModule,
+    MatProgressSpinnerModule,
     MatListModule,
     MatToolbarModule,
     AuthModule.forRoot()