From 2740b6f9572a8a209c7239fd6f5e290a1332e336 Mon Sep 17 00:00:00 2001
From: David Hudson <david@few.io>
Date: Tue, 13 Sep 2016 16:36:25 +0900
Subject: [PATCH] [Frontend] Add optional delay parameter to dialog service

Issue #1168
---
 .../commonUI/dialog/res/templates/overlay.html    |  2 +-
 platform/commonUI/dialog/src/DialogService.js     |  3 +++
 .../edit/src/actions/SaveInProgressDialog.js      |  3 ++-
 .../commonUI/general/res/sass/_constants.scss     |  3 +++
 .../general/res/sass/overlay/_overlay.scss        | 15 +++++++--------
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/platform/commonUI/dialog/res/templates/overlay.html b/platform/commonUI/dialog/res/templates/overlay.html
index 825d8fe4f4..dcc847029d 100644
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ b/platform/commonUI/dialog/res/templates/overlay.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs overlay">
+<div class="abs overlay" ng-class="{'delayEntry100ms' : !!ngModel.delay}">
     <div class="abs blocker"></div>
     <div class="abs holder">
         <a ng-click="ngModel.cancel()"
diff --git a/platform/commonUI/dialog/src/DialogService.js b/platform/commonUI/dialog/src/DialogService.js
index ca0a4b09b7..d087940dcb 100644
--- a/platform/commonUI/dialog/src/DialogService.js
+++ b/platform/commonUI/dialog/src/DialogService.js
@@ -200,6 +200,9 @@ define(
          * shown above a progress bar to indicate what's happening.
          * @property {number} progress a percentage value (1-100)
          * indicating the completion of the blocking task
+         * @property {boolean} delay adds a brief delay before loading
+         * the dialog. Useful for removing the dialog flicker when the
+         * conditions for displaying the dialog change rapidly.
          * @property {string} progressText the message to show below a
          * progress bar to indicate progress. For example, this might be
          * used to indicate time remaining, or items still to process.
diff --git a/platform/commonUI/edit/src/actions/SaveInProgressDialog.js b/platform/commonUI/edit/src/actions/SaveInProgressDialog.js
index 56c2c1ad86..78cd371934 100644
--- a/platform/commonUI/edit/src/actions/SaveInProgressDialog.js
+++ b/platform/commonUI/edit/src/actions/SaveInProgressDialog.js
@@ -9,7 +9,8 @@ define([], function () {
             title: "Saving...",
             hint: "Do not navigate away from this page or close this browser tab while this message is displayed.",
             unknownProgress: true,
-            severity: "info"
+            severity: "info",
+            delay: true
         });
     };
 
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 8fb1a39cb1..4cb240850b 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -62,6 +62,9 @@ $ueDesktopMinW: 600px;
 $ovrTopBarH: 45px;
 $ovrFooterH: 24px;
 $overlayMargin: 25px;
+/*************** Progress Overlay */
+$durEntryMs: 100ms;
+$delayEntryMs: 100ms;
 /*************** Items */
 $ueBrowseGridItemLg: 200px;
 $ueBrowseGridItemTopBarH: 20px;
diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss
index 34bd1fd46f..2c60aa99af 100644
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -22,15 +22,14 @@
 
 .overlay {
     font-size: 90%;
-    z-index: 5;
-    @include keyframes(fadeInFromNone) {
-        0% { display: none; opacity: 0; }
-        1% { display: block; opacity: 0; }
-        95% { display: block; opacity: 0; }
-        100% { display: block; opacity: 1; }
+    &.delayEntry100ms {
+        @include keyframes(fadeInFromNone) {
+            0% { display: none; opacity: 0; }
+            100% { display: block; opacity: 1; }
+        }
+        @include animation-delay($delayEntryMs);
+        @include animation(fadeInFromNone $durEntryMs ease-in);
     }
-    @include animation(fadeInFromNone 100ms ease-in);
-
     .blocker {
         background: $colorOvrBlocker;
         z-index: 100;