From 0e13a5956cd44ab6d46334c2c5c7bf4e6db4a9d5 Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Thu, 18 May 2017 14:37:45 +0100
Subject: [PATCH] fix(aio): add small delay before autoscrolling

This delay allows any async layout to complete
before we autoscroll to a heading anchor.

Closes #16242
---
 aio/src/app/app.component.spec.ts | 15 ++++++++++-----
 aio/src/app/app.component.ts      |  5 +++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index 0a8fd9856e..1753e66d84 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -1,5 +1,5 @@
 import { NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
-import { async, inject, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, inject, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { Title } from '@angular/platform-browser';
 import { APP_BASE_HREF } from '@angular/common';
 import { Http } from '@angular/http';
@@ -317,6 +317,7 @@ describe('AppComponent', () => {
   });
 
   describe('auto-scrolling', () => {
+    const scrollDelay = 500;
     let scrollService: ScrollService;
     let scrollSpy: jasmine.Spy;
 
@@ -350,16 +351,20 @@ describe('AppComponent', () => {
       expect(scrollSpy.calls.count()).toBe(2);
     });
 
-    it('should scroll when call onDocRendered directly', () => {
+    it('should scroll after a delay when call onDocRendered directly', fakeAsync(() => {
       component.onDocRendered();
+      expect(scrollSpy).not.toHaveBeenCalled();
+      tick(scrollDelay);
       expect(scrollSpy).toHaveBeenCalled();
-    });
+    }));
 
-    it('should scroll (via onDocRendered) when finish navigating to a new doc', () => {
+    it('should scroll (via onDocRendered) when finish navigating to a new doc', fakeAsync(() => {
       locationService.go('guide/pipes');
       fixture.detectChanges(); // triggers the event that calls onDocRendered
+      expect(scrollSpy).not.toHaveBeenCalled();
+      tick(scrollDelay);
       expect(scrollSpy).toHaveBeenCalled();
-    });
+    }));
   });
 
   describe('initial rendering', () => {
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index 78b0db9c53..7224c1ca66 100644
--- a/aio/src/app/app.component.ts
+++ b/aio/src/app/app.component.ts
@@ -159,8 +159,9 @@ export class AppComponent implements OnInit {
   }
 
   onDocRendered() {
-    // Scroll after the doc-viewer has finished rendering the new doc
-    this.autoScroll();
+    // 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;
   }