feat(component): refresh animation

Akryum · Akryum · commit 0c7861140825 · 2022-05-08T13:59:52.000+02:00
diff --git a/packages/app-frontend/src/features/components/ComponentsInspector.vue b/packages/app-frontend/src/features/components/ComponentsInspector.vue
@@ -59,9 +59,22 @@ export default defineComponent({
 
     // Refresh
 
+    const animateRefresh = ref(false)
+    let animateRefreshTimer
+
     function refresh () {
       requestComponentTree(null)
       loadComponent(selectedComponentId.value)
+
+      // Animation
+      animateRefresh.value = false
+      clearTimeout(animateRefreshTimer)
+      requestAnimationFrame(() => {
+        animateRefresh.value = true
+        animateRefreshTimer = setTimeout(() => {
+          animateRefresh.value = false
+        }, 1000)
+      })
     }
 
     // Scroller
@@ -77,6 +90,7 @@ export default defineComponent({
       startPickingComponent,
       stopPickingComponent,
       refresh,
+      animateRefresh,
       treeScroller,
     }
   },
@@ -189,6 +203,9 @@ export default defineComponent({
           html: true
         }"
         class="icon-button flat"
+        :class="{
+          'animate-icon': animateRefresh,
+        }"
         icon-left="refresh"
         @click="refresh()"
       />
@@ -232,4 +249,16 @@ export default defineComponent({
     }
   }
 }
+
+.animate-icon {
+  >>> .vue-ui-icon {
+    animation: refresh 1s ease-out;
+  }
+}
+
+@keyframes refresh {
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
