Add route loading spinner

frontend/src/app/app.component.html

@@ -7,6 +7,10 @@
   <a class="icon" id="menuButton" (click)="menuButtonClicked = !menuButtonClicked">☰</a>
 </div>
 
+<div class="d-flex justify-content-center mt-4 pt-4 mb-3" *ngIf="loadingRoute">
+  <div class="spinner spinner-border"></div>
+</div>
+
 <router-outlet></router-outlet>
 
 <div id="footer" class="footer text-center p-3">

frontend/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { AuthService } from './_services/auth.service';
 import { versions } from 'src/environments/versions';
+import { Router, RouteConfigLoadStart, RouteConfigLoadEnd } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -11,8 +12,19 @@ export class AppComponent {
   public menuButtonClicked = false;
   public revision_datetime_string;
   public versions = versions;
+  public loadingRoute = false;
 
-  constructor(public auth: AuthService) {
+  constructor(public auth: AuthService, private router: Router) {
     this.revision_datetime_string = new Date(versions.revision_timestamp).toLocaleString(undefined,  { day: '2-digit', month: '2-digit', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' });
   }
+
+  ngOnInit () {
+    this.router.events.subscribe((event) => {
+      if (event instanceof RouteConfigLoadStart) {
+        this.loadingRoute = true;
+      } else if (event instanceof RouteConfigLoadEnd) {
+        this.loadingRoute = false;
+      }
+    });
+  }
 }