Merge pull request #132 from hack-a-chain-software/feat/mini-dashboard-skeleton

feat: mini skeleton on blocks page

Author: 0xneves

components/StatsGrid.vue

@@ -15,7 +15,7 @@ defineProps({
       class="bg-[#111111] border border-[#222222] rounded-xl p-4 shadow-[0_0_20px_rgba(255,255,255,0.0625)]"
     >
       <p class="text-[12px] text-[#bbbbbb] mb-1 uppercase tracking-wider">{{ card.label }}</p>
-      <p class="text-[19px] text-[#f5f5f5]">{{ card.value }}</p>
+      <p class="text-[18px] text-[#f5f5f5]">{{ card.value }}</p>
     </div>
   </div>
 </template> 

components/skeleton/StatsGrid.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
+    <div
+      v-for="n in 4"
+      :key="`skeleton-stats-card-${n}`"
+      class="bg-[#111111] border border-[#222222] rounded-xl p-4 shadow-[0_0_20px_rgba(255,255,255,0.0625)]"
+    >
+      <div class="animate-pulse">
+        <div class="h-4 bg-gray-600 rounded w-1/3 mb-2"></div>
+        <div class="h-6 bg-gray-700 rounded w-1/2"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+

pages/blocks/index.vue

@@ -2,6 +2,7 @@
 import { ref, watch, computed } from 'vue';
 import IconDownload from '~/components/icon/Download.vue';
 import StatsGrid from '~/components/StatsGrid.vue';
+import SkeletonStatsGrid from '~/components/skeleton/StatsGrid.vue';
 import { useBlocksMetrics } from '~/composables/useBlocksMetrics';
 import DataTable from '~/components/DataTable.vue';
 import FilterSelect from '~/components/FilterSelect.vue';
@@ -237,7 +238,8 @@ function downloadData() {
       </h1>
     </div>
 
-    <StatsGrid v-if="!metricsLoading && !metricsError && metricsCards.length" :cards="metricsCards" />
+    <SkeletonStatsGrid v-if="loading" />
+    <StatsGrid v-else-if="!metricsError && metricsCards.length" :cards="metricsCards" />
 
     <SkeletonTable v-if="loading" />
     <DataTable