Add refresh icon spinning

Author: antonkomarev

resources/js/components/TopMenu.vue

@@ -34,7 +34,7 @@
                 </div>
                 <div>
                     <button class="p-2 rounded bg-indigo-500 text-indigo-100 hover:bg-indigo-700 hover:text-white" v-on:click="refetchData()" title="Refetch data">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current w-4 h-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current w-4 h-4" v-bind:class="{'spin' : isRefreshing}">
                             <path d="M10 3v2a5 5 0 0 0-3.54 8.54l-1.41 1.41A7 7 0 0 1 10 3zm4.95 2.05A7 7 0 0 1 10 17v-2a5 5 0 0 0 3.54-8.54l1.41-1.41zM10 20l-4-4 4-4v8zm0-12V0l4 4-4 4z"></path>
                         </svg>
                     </button>
@@ -46,11 +46,22 @@
 
 <script>
     export default {
+        data() {
+            return {
+                isRefreshing: false,
+            }
+        },
+
         methods: {
             async refetchData() {
+                this.isRefreshing = true;
                 await this.$store.dispatch('collectRequirements');
                 await this.$store.dispatch('collectRepositories');
                 await this.$store.dispatch('collectJobs');
+                // Timeout needed to not interrupt animation too quick
+                setTimeout(() => {
+                    this.isRefreshing = false;
+                }, 1000);
             },
 
             getJobsBadgeClass() {

resources/sass/base.scss

@@ -2,3 +2,30 @@ body,
 .font-mono {
   font-family: 'IBM Plex Mono', monospace;
 }
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn)
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn)
+  }
+}
+
+.spin {
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+}