Pārlūkot izejas kodu

HUE-3547 [editor] Better user feedback when submitting a query

Enrico Berti 9 gadi atpakaļ
vecāks
revīzija
880f195916

+ 60 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -577,6 +577,66 @@ h1.empty {
   background-color: #338bb8;
 }
 
+.progress-starting .bar {
+  background-color: #CCC;
+}
+
+@-webkit-keyframes pulsate {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@-moz-keyframes pulsate {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@-o-keyframes pulsate {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes pulsate {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.progress-starting {
+  -webkit-animation: pulsate 2s infinite;
+  -moz-animation: pulsate 2s infinite;
+  -o-animation: pulsate 2s infinite;
+  animation: pulsate 2s infinite;
+  opacity: 0;
+}
+
 .progress-success .bar, .progress .bar-success {
   background-color: #b5cf6b;
 }

+ 2 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1033,10 +1033,11 @@ ${ hueIcons.symbols() }
   <div class="snippet-execution-status" data-bind="clickForAceFocus: ace">
     <div class="snippet-progress-container">
       <div class="progress active" data-bind="css: {
+        'progress-starting': progress() == 0 && status() == 'running',
         'progress-warning': progress() > 0 && progress() < 100,
         'progress-success': progress() == 100,
         'progress-danger': progress() == 0 && errors().length > 0}" style="background-color: #FFF; width: 100%">
-        <div class="bar" data-bind="style: {'width': (errors().length > 0 ? 100 : progress()) + '%'}"></div>
+        <div class="bar" data-bind="style: {'width': (errors().length > 0 ? 100 : Math.max(1,progress())) + '%'}"></div>
       </div>
     </div>
     <div class="snippet-error-container alert alert-error alert-error-gradient" data-bind="visible: errors().length > 0">