Make loading modal.

Change: 136051910

2 files changed, 21 insertions, 17 deletions

diff --git a/tensorflow/tensorboard/components/vz-projector/async.ts b/tensorflow/tensorboard/components/vz-projector/async.ts
index 7e092ac6f6..88791e2927 100644
--- a/tensorflow/tensorboard/components/vz-projector/async.ts
+++ b/tensorflow/tensorboard/components/vz-projector/async.ts
@@ -20,10 +20,10 @@ const ASYNC_DELAY_MS = 25;
 const WARNING_DURATION_MS = 5000;
 
 /**
- * Animation duration for the user message which should align with `transition`
- * css property in `.notify-msg` in `vz-projector.html`.
+ * Animation duration for the user message which should be +20ms more than the
+ * `transition` css property in `.notify-msg` in `vz-projector.html`.
  */
-const MSG_ANIMATION_DURATION = 300;
+const MSG_ANIMATION_DURATION_MSEC = 300 + 20;
 
 
 /**
@@ -60,6 +60,7 @@ export function runAsyncTask<T>(message: string, task: () => T,
 }
 
 let msgId = 0;
+let numActiveMessages = 0;
 
 /**
  * Updates the user message with the provided id.
@@ -70,6 +71,7 @@ let msgId = 0;
  * @return The id of the message.
  */
 export function updateMessage(msg: string, id: string = null): string {
+  let dialog = d3.select('#wrapper-notify-msg').node() as any;
   if (id == null) {
     id = (msgId++).toString();
   }
@@ -80,12 +82,19 @@ export function updateMessage(msg: string, id: string = null): string {
     msgDiv = d3.select('#notify-msgs').insert('div', ':first-child')
       .attr('class', 'notify-msg')
       .attr('id', divId);
+    numActiveMessages++;
   }
   if (msg == null) {
+    numActiveMessages--;
+    if (numActiveMessages === 0) {
+      dialog.close();
+    }
     msgDiv.style('opacity', 0);
-    setTimeout(() => msgDiv.remove(), MSG_ANIMATION_DURATION);
+    msgDiv.style('height', 0);
+    setTimeout(() => msgDiv.remove(), MSG_ANIMATION_DURATION_MSEC);
   } else {
     msgDiv.text(msg);
+    dialog.open();
   }
   return id;
 }
diff --git a/tensorflow/tensorboard/components/vz-projector/vz-projector.html b/tensorflow/tensorboard/components/vz-projector/vz-projector.html
index da2ed18eb1..854b476fb3 100644
--- a/tensorflow/tensorboard/components/vz-projector/vz-projector.html
+++ b/tensorflow/tensorboard/components/vz-projector/vz-projector.html
@@ -119,12 +119,10 @@ limitations under the License.
 }
 
 #wrapper-notify-msg {
-  z-index: 1;
-  position: fixed;
-  top: 10px;
-  width: 100%;
+  align-items: center;
   display: flex;
   justify-content: center;
+  width: 300px;
 }
 
 #notify-msgs {
@@ -132,15 +130,12 @@ limitations under the License.
 }
 
 .notify-msg {
-  margin: 5px 0;
-  font-weight: 500;
-  color: black;
-  background-color: #FFF9C4;
-  padding: 5px;
-  border: 1px solid #FBC02D;
   backface-visibility: hidden;
+  font-weight: 500;
+  margin: 0;
   opacity: 1;
-  transition: opacity 0.3s ease-out;
+  padding: 0;
+  transition: opacity 0.3s ease-out, height 0.3s ease-out;
 }
 
 #warning-msg {
@@ -347,9 +342,9 @@ limitations under the License.
   overflow-y: auto;
 }
 </style>
-<div id="wrapper-notify-msg">
+<paper-dialog id="wrapper-notify-msg" modal>
   <div id="notify-msgs"></div>
-</div>
+</paper-dialog>
 <div id="warning-msg"></div>
 <div id="container">
   <div id="left-pane" class="ink-panel">