fix(ui): auto-refresh button is now animated for better feedback

closes #1802
kestra-io · Jul 31, 2023 · 9ce70f7 · 9ce70f7
1 parent 56dec7e
commit 9ce70f7
Showing 1 changed file with 28 additions and 11 deletions.
diff --git a/ui/src/components/layout/RefreshButton.vue b/ui/src/components/layout/RefreshButton.vue
@@ -1,8 +1,8 @@
 <template>
     <el-button-group>
-        <el-button @click="toggleAutoRefresh" :pressed="autoRefresh">
+        <el-button :active="autoRefresh" @click="toggleAutoRefresh">
             <kicon :tooltip="$t('toggle periodic refresh each 10 seconds')" placement="bottom">
-                <clock />
+                <component :is="autoRefresh ? 'auto-renew' : 'auto-renew-off'" class="auto-refresh-icon" />
             </kicon>
         </el-button>
         <el-button @click="triggerRefresh">
@@ -14,10 +14,11 @@
 </template>
 <script>
     import Refresh from "vue-material-design-icons/Refresh.vue";
-    import Clock from "vue-material-design-icons/Clock.vue";
+    import AutoRenew from "vue-material-design-icons/Autorenew.vue";
+    import AutoRenewOff from "vue-material-design-icons/AutorenewOff.vue";
     import Kicon from "../Kicon.vue"
     export default {
-        components: {Refresh, Clock, Kicon},
+        components: {Refresh, AutoRenew, AutoRenewOff, Kicon},
         emits: ["refresh"],
         data() {
             return {
@@ -32,12 +33,6 @@
             toggleAutoRefresh() {
                 this.autoRefresh = !this.autoRefresh;
                 localStorage.setItem("autoRefresh", this.autoRefresh ? "1" : "0");
-                if (this.autoRefresh) {
-                    this.refreshHandler = setInterval(this.triggerRefresh, 10000);
-                    this.triggerRefresh()
-                } else {
-                    this.stopRefresh();
-                }
             },
             triggerRefresh() {
                 this.$emit("refresh");
@@ -51,7 +46,29 @@
         },
         beforeUnmount() {
             this.stopRefresh();
+        },
+        watch: {
+            autoRefresh(newValue) {
+                if (newValue) {
+                    this.refreshHandler = setInterval(this.triggerRefresh, 10000);
+                    this.triggerRefresh()
+                } else {
+                    this.stopRefresh();
+                }
+            }
         }
     };
 </script>
-
+<style scoped lang="scss">
+    button[active=true] .auto-refresh-icon {
+        animation: rotate 10s linear infinite;
+    }
+    @keyframes rotate {
+        0% {
+            rotate: 0deg;
+        }
+        100% {
+            rotate: 360deg;
+        }
+    }
+</style>