From a1b2175801dd7582d7e4bbd268e3ee7cc72cac40 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 7 Jun 2016 10:02:52 -0700
Subject: [PATCH] [Timeline] Reduce flicker

Reposition scroll bar in Timeline with RAF instead of timeout;
this ensures that scroll bar is positioned after the current
digest (updating the width) but before the results are rendered
(avoiding flicker.) Fixes #997
---
 platform/features/timeline/bundle.js                |  2 +-
 .../src/controllers/TimelineZoomController.js       |  7 ++++---
 .../test/controllers/TimelineZoomControllerSpec.js  | 13 ++++++++-----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/platform/features/timeline/bundle.js b/platform/features/timeline/bundle.js
index 782918e545..d8f8729808 100644
--- a/platform/features/timeline/bundle.js
+++ b/platform/features/timeline/bundle.js
@@ -472,7 +472,7 @@ define([
                     "implementation": TimelineZoomController,
                     "depends": [
                         "$scope",
-                        "$timeout",
+                        "$window",
                         "TIMELINE_ZOOM_CONFIGURATION"
                     ]
                 },
diff --git a/platform/features/timeline/src/controllers/TimelineZoomController.js b/platform/features/timeline/src/controllers/TimelineZoomController.js
index d326cf7bbb..620e871d11 100644
--- a/platform/features/timeline/src/controllers/TimelineZoomController.js
+++ b/platform/features/timeline/src/controllers/TimelineZoomController.js
@@ -28,7 +28,7 @@ define(
          * Controls the pan-zoom state of a timeline view.
          * @constructor
          */
-        function TimelineZoomController($scope, $timeout, ZOOM_CONFIGURATION) {
+        function TimelineZoomController($scope, $window, ZOOM_CONFIGURATION) {
             // Prefer to start with the middle index
             var zoomLevels = ZOOM_CONFIGURATION.levels || [1000],
                 zoomIndex = Math.floor(zoomLevels.length / 2),
@@ -54,9 +54,10 @@ define(
             }
 
             function setScroll(x) {
-                $timeout(function () {
+                $window.requestAnimationFrame(function () {
                     $scope.scroll.x = x;
-                }, 0);
+                    $scope.$apply();
+                });
             }
 
             function initializeZoomFromTimespan(timespan) {
diff --git a/platform/features/timeline/test/controllers/TimelineZoomControllerSpec.js b/platform/features/timeline/test/controllers/TimelineZoomControllerSpec.js
index 40ed8c6c61..18ed911671 100644
--- a/platform/features/timeline/test/controllers/TimelineZoomControllerSpec.js
+++ b/platform/features/timeline/test/controllers/TimelineZoomControllerSpec.js
@@ -28,7 +28,7 @@ define(
         describe("The timeline zoom state controller", function () {
             var testConfiguration,
                 mockScope,
-                mockTimeout,
+                mockWindow,
                 controller;
 
             beforeEach(function () {
@@ -36,13 +36,16 @@ define(
                     levels: [1000, 2000, 3500],
                     width: 12321
                 };
-                mockScope = jasmine.createSpyObj("$scope", ['$watch']);
+                mockScope =
+                    jasmine.createSpyObj("$scope", ['$watch', '$apply']);
                 mockScope.commit = jasmine.createSpy('commit');
                 mockScope.scroll = { x: 0, width: 1000 };
-                mockTimeout = jasmine.createSpy('$timeout');
+                mockWindow = {
+                    requestAnimationFrame: jasmine.createSpy('raf')
+                };
                 controller = new TimelineZoomController(
                     mockScope,
-                    mockTimeout,
+                    mockWindow,
                     testConfiguration
                 );
             });
@@ -109,7 +112,7 @@ define(
                         call.args[1](mockScope[call.args[0]]);
                     });
 
-                    mockTimeout.calls.forEach(function (call) {
+                    mockWindow.requestAnimationFrame.calls.forEach(function (call) {
                         call.args[0]();
                     });
                 });