feat(lite/component): add new Vue component UiCardSpinner (#6806)

`UiSpinner` is often used to add a spinner inside an `UiCard`, applying similar
styles. This `UiCardSpinner` component creates a homogeneous spinner to use in
theses cases.

@xen-orchestra/lite/src/components/UsageBar.vue

@@ -4,11 +4,11 @@
       <div
         v-for="item in computedData.sortedArray"
         :key="item.id"
-        class="progress-item"
         :class="{
           warning: item.value > MIN_WARNING_VALUE,
           error: item.value > MIN_DANGEROUS_VALUE,
         }"
+        class="progress-item"
       >
         <UiProgressBar :value="item.value" color="custom" />
         <UiProgressLegend
@@ -18,15 +18,15 @@
       </div>
       <slot :total-percent="computedData.totalPercentUsage" name="footer" />
     </template>
-    <UiSpinner v-else class="spinner" />
+    <UiCardSpinner v-else />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
 import UiProgressBar from "@/components/ui/progress/UiProgressBar.vue";
 import UiProgressLegend from "@/components/ui/progress/UiProgressLegend.vue";
-import UiSpinner from "@/components/ui/UiSpinner.vue";
+import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
+import { computed } from "vue";
 
 interface Data {
   id: string;
@@ -67,14 +67,6 @@ const computedData = computed(() => {
 </script>
 
 <style lang="postcss" scoped>
-.spinner {
-  color: var(--color-extra-blue-base);
-  display: flex;
-  margin: auto;
-  width: 40px;
-  height: 40px;
-}
-
 .progress-item:nth-child(1) {
   --progress-bar-color: var(--color-extra-blue-d60);
 }
@@ -91,9 +83,11 @@ const computedData = computed(() => {
   --progress-bar-height: 1.2rem;
   --progress-bar-color: var(--color-extra-blue-l20);
   --progress-bar-background-color: var(--color-blue-scale-400);
+
   &.warning {
     --progress-bar-color: var(--color-orange-world-base);
   }
+
   &.error {
     --progress-bar-color: var(--color-red-vates-base);
   }

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue

@@ -23,27 +23,27 @@
         </template>
       </UiCardFooter>
     </div>
-    <UiSpinner v-else class="spinner" />
+    <UiCardSpinner v-else />
   </UiCard>
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
 import NoDataError from "@/components/NoDataError.vue";
-import UiCard from "@/components/ui/UiCard.vue";
-import UiCardFooter from "@/components/ui/UiCardFooter.vue";
-import UiCardTitle from "@/components/ui/UiCardTitle.vue";
+import UiStatusIcon from "@/components/ui/icon/UiStatusIcon.vue";
 import UiProgressBar from "@/components/ui/progress/UiProgressBar.vue";
 import UiProgressLegend from "@/components/ui/progress/UiProgressLegend.vue";
 import UiProgressScale from "@/components/ui/progress/UiProgressScale.vue";
-import UiSpinner from "@/components/ui/UiSpinner.vue";
-import UiStatusIcon from "@/components/ui/icon/UiStatusIcon.vue";
+import UiCard from "@/components/ui/UiCard.vue";
+import UiCardFooter from "@/components/ui/UiCardFooter.vue";
+import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 import { percent } from "@/libs/utils";
 import { useHostMetricsStore } from "@/stores/host-metrics.store";
 import { useHostStore } from "@/stores/host.store";
 import { useVmMetricsStore } from "@/stores/vm-metrics.store";
 import { useVmStore } from "@/stores/vm.store";
 import { logicAnd } from "@vueuse/math";
+import { computed } from "vue";
 
 const ACTIVE_STATES = new Set(["Running", "Paused"]);
 
@@ -115,12 +115,4 @@ const hasError = computed(
     color: var(--footer-value-color);
   }
 }
-
-.spinner {
-  color: var(--color-extra-blue-base);
-  display: flex;
-  margin: 2.6rem auto auto auto;
-  width: 40px;
-  height: 40px;
-}
 </style>

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStatus.vue

@@ -2,7 +2,7 @@
   <UiCard :color="hasError ? 'error' : undefined">
     <UiCardTitle>{{ $t("status") }}</UiCardTitle>
     <NoDataError v-if="hasError" />
-    <UiSpinner v-else-if="!isReady" class="spinner" />
+    <UiCardSpinner v-else-if="!isReady" />
     <template v-else>
       <PoolDashboardStatusItem
         :active="activeHostsCount"
@@ -23,9 +23,9 @@
 import NoDataError from "@/components/NoDataError.vue";
 import PoolDashboardStatusItem from "@/components/pool/dashboard/PoolDashboardStatusItem.vue";
 import UiCard from "@/components/ui/UiCard.vue";
+import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
 import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 import UiSeparator from "@/components/ui/UiSeparator.vue";
-import UiSpinner from "@/components/ui/UiSpinner.vue";
 import { useHostMetricsStore } from "@/stores/host-metrics.store";
 import { useVmStore } from "@/stores/vm.store";
 import { computed } from "vue";
@@ -57,13 +57,3 @@ const totalVmsCount = computed(() => vms.value.length);
 
 const activeVmsCount = computed(() => runningVms.value.length);
 </script>
-
-<style lang="postcss" scoped>
-.spinner {
-  color: var(--color-extra-blue-base);
-  display: flex;
-  margin: auto;
-  width: 40px;
-  height: 40px;
-}
-</style>

@xen-orchestra/lite/src/components/ui/UiCardSpinner.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="ui-card-spinner">
+    <UiSpinner class="spinner" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiSpinner from "@/components/ui/UiSpinner.vue";
+</script>
+
+<style lang="postcss" scoped>
+.ui-card-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 0;
+}
+
+.spinner {
+  color: var(--color-extra-blue-base);
+  font-size: 4rem;
+}
+</style>

@xen-orchestra/lite/src/views/pool/PoolTasksView.vue

@@ -6,15 +6,15 @@
     </UiTitle>
 
     <TasksTable :finished-tasks="finishedTasks" :pending-tasks="pendingTasks" />
-    <UiSpinner v-if="!isReady" class="loader" />
+    <UiCardSpinner v-if="!isReady" />
   </UiCard>
 </template>
 
 <script lang="ts" setup>
 import TasksTable from "@/components/tasks/TasksTable.vue";
 import UiCard from "@/components/ui/UiCard.vue";
+import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
 import UiCounter from "@/components/ui/UiCounter.vue";
-import UiSpinner from "@/components/ui/UiSpinner.vue";
 import UiTitle from "@/components/ui/UiTitle.vue";
 import useArrayRemovedItemsHistory from "@/composables/array-removed-items-history.composable";
 import useCollectionFilter from "@/composables/collection-filter.composable";
@@ -71,11 +71,4 @@ useTitle(
     font-size: 1.4rem;
   }
 }
-
-.loader {
-  color: var(--color-extra-blue-base);
-  display: block;
-  font-size: 4rem;
-  margin: 2rem auto 0;
-}
 </style>