Progress Bar Returns, this time blue

dmp-frontend/src/app/ui/navbar/navbar.component.html

@@ -53,7 +53,8 @@
 
 				<!-- Login -->
 				<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
-					<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
+					<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()"
+						[src]="this.getPrincipalAvatar()" (click)="openProfile()">
 				</li>
 				<ng-template #loginoption>
 					<button mat-button [routerLink]=" ['/login'] ">
@@ -65,3 +66,6 @@
 		</div>
 	</div>
 </nav>
+<div *ngIf="progressIndication" class="progress-bar">
+	<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
+</div>

dmp-frontend/src/app/ui/navbar/navbar.component.scss

@@ -5,3 +5,11 @@ $mat-card-header-size: 40px !default;
   border-radius: 50%;
   flex-shrink: 0;
 }
+
+.progress-bar {
+	top: 70px;
+	left: 0;
+	position: fixed;
+	width: 100%;
+	z-index: 1;
+}

dmp-frontend/src/app/ui/navbar/navbar.component.ts

@@ -7,20 +7,31 @@ import { AuthService } from '../../core/services/auth/auth.service';
 import { MatDialog } from '@angular/material';
 import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
 import { AppRole } from '../../core/common/enum/app-role';
+import { ProgressIndicationService } from '../../core/services/progress-indication/progress-indication-service';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
 	selector: 'app-navbar',
 	templateUrl: './navbar.component.html',
 	styleUrls: ['./navbar.component.css', './navbar.component.scss']
 })
-export class NavbarComponent implements OnInit {
+export class NavbarComponent extends BaseComponent implements OnInit {
+	progressIndication = false;
 	private listTitles: any[];
 	location: Location;
 	mobile_menu_visible: any = 0;
 	private toggleButton: any;
 	private sidebarVisible: boolean;
 
-    constructor(location: Location,  private element: ElementRef, private router: Router, private authentication: AuthService, private dialog: MatDialog) {
+	constructor(location: Location,
+		private element: ElementRef,
+		private router: Router,
+		private authentication: AuthService,
+		private dialog: MatDialog,
+		private progressIndicationService: ProgressIndicationService
+	) {
+		super();
 		this.location = location;
 		this.sidebarVisible = false;
 	}
@@ -40,6 +51,10 @@ export class NavbarComponent implements OnInit {
 				this.mobile_menu_visible = 0;
 			}
 		});
+
+		this.progressIndicationService.getProgressIndicationObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
+			setTimeout(() => { this.progressIndication = x; });
+		});
 	}
 
 	public isAuthenticated(): boolean {