From 11b2f62ed25bfb2a96dce07cac779176e1b0e1e2 Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Mon, 24 Apr 2017 17:15:11 -0700
Subject: [PATCH] feat(aio): don't animate sidenav on launch.

---
 aio/src/app/app.component.html         |  2 +-
 aio/src/app/app.component.ts           |  5 +++--
 aio/src/styles/1-layouts/_sidenav.scss | 13 ++++++++++++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 8622e550ca..3563fe8046 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -10,7 +10,7 @@
 </md-toolbar>
 
 <a id="top-of-page"></a>
-<md-sidenav-container class="sidenav-container" role="main">
+<md-sidenav-container class="sidenav-container" [class.starting]="isStarting" role="main">
 
   <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode">
     <aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu>
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index 3d4237c9c3..71669c39aa 100644
--- a/aio/src/app/app.component.ts
+++ b/aio/src/app/app.component.ts
@@ -25,6 +25,7 @@ export class AppComponent implements OnInit {
   pageId: string;
   currentDocument: DocumentContents;
   footerNodes: NavigationNode[];
+  isStarting = true;
   isSideBySide = false;
   private isSideNavDoc = false;
   private previousNavView: string;
@@ -105,9 +106,9 @@ export class AppComponent implements OnInit {
   }
 
   onDocRendered() {
-    // This handler is needed because the subscription to the `currentUrl` in `ngOnInit`
-    // gets triggered too early before the doc-viewer has finished rendering the doc
+    // Scroll after the doc-viewer has finished rendering the new doc
     this.autoScroll();
+    this.isStarting = false;
   }
 
   @HostListener('window:resize', ['$event.target.innerWidth'])
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index ded516eb2b..a968d28ec9 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -1,3 +1,14 @@
+
+// Disable sidenav animations while starting the app
+// See https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav-transitions.scss
+.starting.mat-sidenav-transition {
+  .mat-sidenav,
+  .mat-sidenav-content,
+  .mat-sidenav-backdrop.mat-sidenav-shown {
+    transition: none;
+  }
+}
+
 aio-nav-menu.top-menu .vertical-menu-item  {
   background-color: $lightgray;
   text-transform: uppercase;
@@ -163,4 +174,4 @@ aio-nav-menu.top-menu {
     border-bottom: 2px solid rgba($mediumgray, 0.5);
   }
 
-}
\ No newline at end of file
+}