refactor(front): spinner when loading stats

Display loading spinner when loading cluster stats in clusters list.
rackslab · Jan 13, 2025 · d4b6b6c · d4b6b6c
1 parent ca5fbe4
commit d4b6b6c
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/frontend/src/components/clusters/ClustersListItem.vue b/frontend/src/components/clusters/ClustersListItem.vue
@@ -16,6 +16,7 @@ import { AuthenticationError } from '@/composables/HTTPErrors'
 import { ChevronRightIcon } from '@heroicons/vue/20/solid'
 import { TagIcon } from '@heroicons/vue/20/solid'
 import { ServerIcon, PlayCircleIcon } from '@heroicons/vue/24/outline'
+import LoadingSpinner from '@/components/LoadingSpinner.vue'
 
 const props = defineProps({
   cluster: {
@@ -89,7 +90,8 @@ onMounted(() => {
         Slurm {{ cluster.stats.version }}
       </span>
     </span>
-    <span v-if="cluster.stats" class="hidden text-center md:flex">
+    <LoadingSpinner v-if="loading" class="animate-pulse text-gray-400" :size="5" />
+    <span v-else-if="cluster.stats" class="hidden text-center md:flex">
       <span class="mt-1 w-20 text-xs leading-5 text-gray-500">
         <ServerIcon class="h-6 w-full" />
         <p class="w-full">