feat(aio): add progress bar

closes #16110

aio/src/app/app.component.html

@@ -1,3 +1,7 @@
+<div *ngIf="isFetching" class="progress-bar-container">
+  <md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
+</div>
+
 <md-toolbar color="primary" class="app-toolbar">
   <button class="hamburger" md-button
     (click)="sidenav.toggle()" title="Docs menu">

aio/src/app/app.component.ts

@@ -54,8 +54,10 @@ export class AppComponent implements OnInit {
   @HostBinding('class')
   hostClasses = '';
 
+  isFetching = false;
   isStarting = true;
   isSideBySide = false;
+  private isFetchingTimeout: any;
   private isSideNavDoc = false;
   private previousNavView: string;
 
@@ -116,14 +118,18 @@ export class AppComponent implements OnInit {
     });
 
     this.locationService.currentPath.subscribe(path => {
-        if (this.currentPath && path === this.currentPath) {
-          // scroll only if on same page (most likely a change to the hash)
-          this.autoScroll();
-        } else {
-          // don't scroll; leave that to `onDocRendered`
-          this.currentPath = path;
-        }
-      });
+      if (this.currentPath && path === this.currentPath) {
+        // scroll only if on same page (most likely a change to the hash)
+        this.autoScroll();
+      } else {
+        // don't scroll; leave that to `onDocRendered`
+        this.currentPath = path;
+
+        // Start progress bar if doc not rendered within brief time
+        clearTimeout(this.isFetchingTimeout);
+        this.isFetchingTimeout = setTimeout(() => this.isFetching = true, 200);
+      }
+    });
 
     this.navigationService.currentNode.subscribe(currentNode => {
       this.currentNode = currentNode;
@@ -168,10 +174,16 @@ export class AppComponent implements OnInit {
   }
 
   onDocRendered() {
+    // Stop fetching timeout (which, when render is fast, means progress bar never shown)
+    clearTimeout(this.isFetchingTimeout);
+
     // Scroll 500ms after the doc-viewer has finished rendering the new doc
     // The delay is to allow time for async layout to complete
-    setTimeout(() => this.autoScroll(), 500);
-    this.isStarting = false;
+    setTimeout(() => {
+      this.autoScroll();
+      this.isStarting = false;
+      this.isFetching = false;
+    }, 500);
   }
 
   onDocVersionChange(versionIndex: number) {

aio/src/app/app.module.ts

@@ -5,8 +5,17 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
 
-import { MdToolbarModule, MdButtonModule, MdIconModule, MdInputModule, MdSidenavModule, MdTabsModule, Platform,
-         MdIconRegistry } from '@angular/material';
+import {
+  MdButtonModule,
+  MdIconModule,
+  MdIconRegistry,
+  MdInputModule,
+  MdProgressBarModule,
+  MdSidenavModule,
+  MdTabsModule,
+  MdToolbarModule,
+  Platform
+} from '@angular/material';
 
 // Temporary fix for MdSidenavModule issue:
 // crashes with "missing first" operator when SideNav.mode is "over"
@@ -67,9 +76,10 @@ export const svgIconProviders = [
     MdButtonModule,
     MdIconModule,
     MdInputModule,
-    MdToolbarModule,
+    MdProgressBarModule,
     MdSidenavModule,
     MdTabsModule,
+    MdToolbarModule,
     SwUpdatesModule
   ],
   declarations: [

aio/src/styles/1-layouts/_content-layout.scss

@@ -1,3 +1,12 @@
+.progress-bar-container {
+  height: 2px;
+  overflow: hidden;
+  position: fixed;
+  top: 64px;
+  width: 100vw;
+  z-index: 5;
+}
+
 .sidenav-content {
   padding: 1rem 3rem 3rem;
   margin: auto;
@@ -12,9 +21,15 @@
   aio-menu {
     display: none;
   }
+
+  .progress-bar-container {
+    top: 56px;
+  }
+
   .sidenav-content {
     min-height: 450px;
   }
+
 }
 
 .sidenav-container {
@@ -32,4 +47,4 @@
   height: 1px;
   margin: 24px 0px;
   background: $lightgray;
-}
+}