Slow connections: Loading indicator for lazy loaded pages

src/frontend/app/features/dashboard/dashboard-base/dashboard-base.component.html

@@ -1,4 +1,5 @@
 <mat-sidenav-container class="dashboard">
+  <app-routing-indicator class="routing-indicator"></app-routing-indicator>
   <mat-sidenav #sidenav class="dashboard__side-nav" mode="side">
     <app-side-nav [tabs]="sideNavTabs">
     </app-side-nav>

src/frontend/app/features/dashboard/dashboard-base/dashboard-base.component.scss

@@ -18,3 +18,10 @@ $app-header-height: 56px;
     margin-top: $app-header-height * 2;
   }
 }
+
+.routing-indicator {
+  left: 0;
+  position: absolute;
+  right: 0;
+  z-index: 999;
+}

src/frontend/app/features/dashboard/dashboard-base/dashboard-base.component.ts

@@ -1,5 +1,5 @@
 
-import {of as observableOf,  Observable ,  Subscription } from 'rxjs';
+import { of as observableOf, Observable, Subscription } from 'rxjs';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { AfterContentInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatDrawer } from '@angular/material';

src/frontend/app/shared/components/routing-indicator/routing-indicator.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="value$ | async as value">
+  <mat-progress-bar *ngIf="value < HIDE_VALUE" class="routing-indicator" mode="determinate" [value]="value"></mat-progress-bar>
+</div>

src/frontend/app/shared/components/routing-indicator/routing-indicator.component.scss

@@ -0,0 +1,3 @@
+.routing-indicator {
+  height: 3px;
+}

src/frontend/app/shared/components/routing-indicator/routing-indicator.component.spec.ts

@@ -0,0 +1,35 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoutingIndicatorComponent } from './routing-indicator.component';
+import { CoreModule } from '../../../core/core.module';
+import { MatProgressBarModule } from '@angular/material';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('RoutingIndicatorComponent', () => {
+  let component: RoutingIndicatorComponent;
+  let fixture: ComponentFixture<RoutingIndicatorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        RoutingIndicatorComponent
+      ],
+      imports: [
+        RouterTestingModule,
+        CoreModule,
+        MatProgressBarModule
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoutingIndicatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/app/shared/components/routing-indicator/routing-indicator.component.ts

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { NavigationCancel, NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { interval, Observable, of as observableOf } from 'rxjs';
+import { filter, map, startWith, switchMap, delay, tap } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-routing-indicator',
+  templateUrl: './routing-indicator.component.html',
+  styleUrls: ['./routing-indicator.component.scss']
+})
+export class RoutingIndicatorComponent {
+  public value$: Observable<number>;
+
+  public HIDE_VALUE = 101;
+
+  constructor(private router: Router) {
+    let started = false;
+    this.value$ = this.router.events.pipe(
+      filter(event => {
+        return (event instanceof NavigationStart && !started) ||
+          event instanceof NavigationCancel ||
+          event instanceof NavigationEnd;
+      }),
+      switchMap(event => {
+        if (event instanceof NavigationStart) {
+          started = true;
+          return this.getValueEmitter();
+        }
+        started = false;
+        return observableOf(this.HIDE_VALUE).pipe(
+          delay(100),
+          startWith(100)
+        );
+      })
+    );
+  }
+
+  private getValueEmitter() {
+    const getValue = this.getValue();
+    return interval(80).pipe(
+      delay(500),
+      map(() => getValue()),
+    );
+  }
+  // Fakes a natual loading indicator
+  private getValue(minStep: number = 0.1, maxStep: number = 2) {
+    let value = 0.1;
+    const slowDownValue = 60;
+    const top = 95;
+    return () => {
+      if (value >= top) {
+        return top;
+      }
+      if (value >= slowDownValue) {
+        return value += this.getRandomNumber(0.1, 0.6);
+      }
+      const increase = this.getRandomNumber(minStep, maxStep);
+      value = Math.min(value + increase, top);
+      return value;
+    };
+  }
+
+  private getRandomNumber(min: number, max: number) {
+    return (Math.random() * max) + min;
+  }
+
+}

src/frontend/app/shared/shared.module.ts

@@ -132,6 +132,7 @@ import { ValuesPipe } from './pipes/values.pipe';
 import { UserPermissionDirective } from './user-permission.directive';
 import { CfEndpointsMissingComponent } from './components/cf-endpoints-missing/cf-endpoints-missing.component';
 import { CapitalizeFirstPipe } from './pipes/capitalizeFirstLetter.pipe';
+import { RoutingIndicatorComponent } from './components/routing-indicator/routing-indicator.component';
 
 @NgModule({
   imports: [
@@ -234,6 +235,7 @@ import { CapitalizeFirstPipe } from './pipes/capitalizeFirstLetter.pipe';
     BindAppsStepComponent,
     CfEndpointsMissingComponent,
     CapitalizeFirstPipe,
+    RoutingIndicatorComponent,
   ],
   exports: [
     FormsModule,
@@ -321,7 +323,8 @@ import { CapitalizeFirstPipe } from './pipes/capitalizeFirstLetter.pipe';
     CreateApplicationStep1Component,
     BindAppsStepComponent,
     CapitalizeFirstPipe,
-    CfEndpointsMissingComponent
+    CfEndpointsMissingComponent,
+    RoutingIndicatorComponent
   ],
   entryComponents: [
     AppEventDetailDialogComponentComponent,