浏览代码

HUE-9485 [frontend] Add spinner to the StatusIndicator component

Johan Ahlen 5 年之前
父节点
当前提交
6740273273

+ 9 - 1
desktop/core/src/desktop/js/components/StatusIndicator.vue

@@ -17,7 +17,10 @@
 -->
 
 <template>
-  <hue-icon v-if="icon" :type="icon" />
+  <span>
+    <i v-if="spin" class="fa fa-spinner fa-spin" />
+    <hue-icon v-else-if="icon" :type="icon" />
+  </span>
 </template>
 
 <script lang="ts">
@@ -45,6 +48,11 @@
     get icon(): string | null {
       return ICON_MAPPING[this.value.toLowerCase()];
     }
+
+    get spin(): boolean {
+      const lowerValue = this.value.toLowerCase();
+      return lowerValue === 'started' || lowerValue === 'running';
+    }
   }
 </script>
 

+ 5 - 3
desktop/core/src/desktop/js/components/__snapshots__/StatusIndicator.test.ts.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StatusIndicator.vue should render 1`] = `
-<hue-icon-stub
-  type="hi-status-success"
-/>
+<span>
+  <hue-icon-stub
+    type="hi-status-success"
+  />
+</span>
 `;