[Frontend] Add optional delay parameter to dialog service

Issue #1168

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()"

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.

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
         });
     };
 

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;

platform/commonUI/general/res/sass/overlay/_overlay.scss

@@ -22,15 +22,14 @@
 
 .overlay {
     font-size: 90%;
-    z-index: 5;
+    &.delayEntry100ms {
         @include keyframes(fadeInFromNone) {
             0% { display: none; opacity: 0; }
-        1% { display: block; opacity: 0; }
-        95% { display: block; opacity: 0; }
             100% { display: block; opacity: 1; }
         }
-    @include animation(fadeInFromNone 100ms ease-in);
-
+        @include animation-delay($delayEntryMs);
+        @include animation(fadeInFromNone $durEntryMs ease-in);
+    }
     .blocker {
         background: $colorOvrBlocker;
         z-index: 100;