Changed indication to “Saving…”

getredash · Apr 14, 2019 · bbb0d6b · bbb0d6b
1 parent 53b7151
commit bbb0d6b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html
@@ -15,10 +15,9 @@ <h3>
     </div>
     <div class="col-xs-4 col-sm-5 col-lg-5 text-right dashboard__control p-r-0">
       <span ng-if="!$ctrl.dashboard.is_archived && !public" class="hidden-print">
-          <div ng-if="$ctrl.layoutEditing">
-            <span class="save-status" data-dirty="{{ $ctrl.isLayoutDirty && !$ctrl.saveInProgress }}">
-              Saved
-            </span>
+          <div ng-if="$ctrl.layoutEditing" ng-switch="$ctrl.isLayoutDirty || $ctrl.saveInProgress">
+            <span class="save-status" data-saving ng-switch-when="true">Saving</span>
+            <span class="save-status" ng-switch-default>Saved</span>
 
             <button type="button" class="btn btn-primary btn-sm"
               ng-disabled="$ctrl.isGridDisabled"

diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js
@@ -75,7 +75,7 @@ function DashboardCtrl(
       });
   };
 
-  const saveDashboardLayoutDebounced = _.debounce(saveDashboardLayout, 1000);
+  const saveDashboardLayoutDebounced = _.debounce(saveDashboardLayout, 2000);
 
   this.layoutEditing = false;
   this.isFullscreen = false;

diff --git a/client/app/pages/dashboards/dashboard.less b/client/app/pages/dashboards/dashboard.less
@@ -117,18 +117,33 @@
     vertical-align: middle;
     margin-right: 7px;
     font-size: 12px;
-    position: relative;
+    text-align: left;
+    display: inline-block;
 
-    &[data-dirty="true"] {
+    &[data-saving] {
       opacity: 0.6;
+      width: 45px;
 
-      &::after {
-        content: "*";
+      &:after {
+        content: '';
+        animation: saving 2s linear infinite;
       }
     }
   }
 }
 
+@keyframes saving {
+  0%, 100% {
+    content: '.';
+  }
+  33% {
+    content: '..';
+  }
+  66% {
+    content: '...';
+  }
+}
+
 
 // Mobile fixes
 @media (max-width: 767px) {