From e1ef684385918b614154f3088d33e37d47ad015b Mon Sep 17 00:00:00 2001
From: Thierry <thierry@byscripts.info>
Date: Fri, 26 Jul 2024 10:56:13 +0200
Subject: [PATCH] feat(web-6): add loading hero to hosts status card

---
 .../web/src/components/site/dashboard/HostsStatus.vue    | 9 ++++++---
 .../web/src/components/site/dashboard/VmsStatus.vue      | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/@xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue b/@xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue
index fbc1550bb39..c4f39396d53 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue
@@ -1,8 +1,10 @@
 <template v-if="isReady">
   <UiCard>
     <CardTitle>{{ $t('hosts-status') }}</CardTitle>
-    <DonutChartWithLegend :icon="faServer" :segments />
-    <CardNumbers :value="hosts.length" class="total" label="Total" size="small" />
+    <LoadingHero :disabled="isReady" type="card">
+      <DonutChartWithLegend :icon="faServer" :segments />
+      <CardNumbers :label="t('total')" :value="hosts.length" class="total" size="small" />
+    </LoadingHero>
   </UiCard>
 </template>
 
@@ -13,13 +15,14 @@ import type { DonutChartWithLegendProps } from '@core/components/donut-chart-wit
 import CardTitle from '@core/components/card/CardTitle.vue'
 import CardNumbers from '@core/components/CardNumbers.vue'
 import DonutChartWithLegend from '@core/components/donut-chart-with-legend/DonutChartWithLegend.vue'
+import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
 import UiCard from '@core/components/UiCard.vue'
 import { faServer } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
-const { records: hosts } = useHostStore().subscribe()
+const { records: hosts, isReady } = useHostStore().subscribe()
 
 const hostsCount = computed(() => {
   return hosts.value.reduce(
diff --git a/@xen-orchestra/web/src/components/site/dashboard/VmsStatus.vue b/@xen-orchestra/web/src/components/site/dashboard/VmsStatus.vue
index b592f391da3..8f3a90a9484 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/VmsStatus.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/VmsStatus.vue
@@ -1,9 +1,9 @@
 <template>
   <UiCard>
     <CardTitle>{{ $t('vms-status') }}</CardTitle>
-    <LoadingHero type="card" :disabled="isReady">
+    <LoadingHero :disabled="isReady" type="card">
       <DonutChartWithLegend :icon="faDesktop" :segments />
-      <CardNumbers :value="vms.length" class="total" :label="t('total')" size="small" />
+      <CardNumbers :label="t('total')" :value="vms.length" class="total" size="small" />
     </LoadingHero>
   </UiCard>
 </template>