feat: route loading indicator

Author: zaucy

src/app/app.component.html

@@ -59,6 +59,7 @@
 </nav>
 
 <div class="router-outline-container">
+	<div *ngIf="routeLoading$ | async" class="route-loading"></div>
 	<router-outlet></router-outlet>
 </div>
 

src/app/app.component.scss

@@ -68,6 +68,7 @@ nav.top-nav {
 }
 
 .router-outline-container {
+	position: relative;
 	z-index: 1;
 	flex: 1;
 	display: flex;
@@ -88,3 +89,14 @@ footer {
 	display: flex;
 	flex-direction: column;
 }
+
+.route-loading {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	opacity: 0.85;
+	background-color: var(--color-bg);
+	z-index: 9999;
+}

src/app/app.component.ts

@@ -8,7 +8,15 @@ import {
 	ViewChild,
 	ViewChildren,
 } from '@angular/core';
-import {NavigationEnd, Router} from '@angular/router';
+import {
+	NavigationStart,
+	NavigationEnd,
+	NavigationError,
+	NavigationCancel,
+	Router,
+} from '@angular/router';
+import {Observable} from 'rxjs';
+import {map, filter} from 'rxjs/operators';
 import {SearchMeta} from '../search/search-meta.service';
 
 import {ServiceWorkerService} from './service-worker.service';
@@ -31,6 +39,8 @@ export class AppComponent {
 	@ViewChildren(AppNavItem)
 	navItems!: QueryList<AppNavItem>;
 
+	routeLoading$: Observable<boolean>;
+
 	constructor(
 		private swService: ServiceWorkerService,
 		searchMeta: SearchMeta,
@@ -39,6 +49,7 @@ export class AppComponent {
 		this.swService.launchUpdateCheckingRoutine();
 
 		router.events.subscribe(routerEvent => {
+			console.log(routerEvent);
 			if (routerEvent instanceof NavigationEnd) {
 				if (this.mobileMenuToggle) {
 					this.mobileMenuToggle.nativeElement.checked = false;
@@ -49,6 +60,17 @@ export class AppComponent {
 				}
 			}
 		});
+
+		this.routeLoading$ = router.events.pipe(
+			filter(
+				ev =>
+					ev instanceof NavigationStart ||
+					ev instanceof NavigationEnd ||
+					ev instanceof NavigationCancel ||
+					ev instanceof NavigationError,
+			),
+			map(ev => ev instanceof NavigationStart),
+		);
 	}
 
 	@HostListener('window:keydown', ['$event'])