Angular NgRx Course

Author: jhades

server/get-courses.route.ts

@@ -9,7 +9,11 @@ export function getAllCourses(req: Request, res: Response) {
 
     console.log("Retrieving courses data ...");
 
-    res.status(200).json({payload:Object.values(COURSES)});
+    setTimeout(() => {
+
+      res.status(200).json({payload:Object.values(COURSES)});
+
+    }, 1000);
 
 }
 

src/app/app.component.css

@@ -15,3 +15,8 @@ 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

@@ -3,7 +3,7 @@ import {select, Store} from "@ngrx/store";
 import {Observable} from "rxjs";
 import {map} from 'rxjs/operators';
 import {isLoggedIn, isLoggedOut} from './auth/auth.selectors';
-import {Router} from '@angular/router';
+import {NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router} from '@angular/router';
 import {logout} from './auth/auth.actions';
 import {AppState} from './reducers/reducers';
 
@@ -18,13 +18,33 @@ export class AppComponent implements OnInit {
 
     isLoggedOut$: Observable<boolean>;
 
+    loading = true;
 
     constructor(private store: Store<AppState>, 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;
+          }
+        }
+      });
+
       this.isLoggedIn$ = this.store
         .pipe(
           select(isLoggedIn)

src/app/app.module.ts

@@ -22,6 +22,7 @@ import {EffectsModule} from '@ngrx/effects';
 import {AuthGuard} from './auth/auth.guard';
 import {EntityDataModule} from '@ngrx/data';
 import {reducers} from './reducers/reducers';
+import {MatProgressSpinnerModule} from '@angular/material';
 
 
 const routes: Routes = [
@@ -50,6 +51,7 @@ const routes: Routes = [
     MatMenuModule,
     MatIconModule,
     MatSidenavModule,
+    MatProgressSpinnerModule,
     MatListModule,
     MatToolbarModule,
     AuthModule.forRoot(),