fix: improve compare bar chart skeleton loaders with varying widths (#2106)

Author: thegreatalxx

app/components/Compare/FacetBarChart.vue

@@ -327,23 +327,39 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
       </VueUiHorizontalBar>
 
       <template #fallback>
-        <div class="flex flex-col gap-2 justify-center items-center mb-2">
-          <SkeletonInline class="h-4 w-16" />
-          <SkeletonInline class="h-4 w-28" />
+        <div class="flex flex-col gap-2 justify-center items-center mb-4" aria-hidden="true">
+          <SkeletonInline class="h-4 w-20 rounded" />
+          <SkeletonInline class="h-3 w-36 rounded" />
         </div>
-        <div class="flex flex-col gap-1">
-          <SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
+        <div class="flex flex-col gap-2 px-2" aria-hidden="true">
+          <div
+            v-for="(pkg, i) in packages"
+            :key="pkg"
+            class="flex items-center gap-3"
+          >
+            <SkeletonInline class="h-3 shrink-0" :style="{ width: `${40 + (i * 17) % 40}%` }" />
+            <SkeletonInline class="h-7 flex-1 rounded" />
+          </div>
         </div>
       </template>
     </ClientOnly>
 
     <template v-else>
-      <div class="flex flex-col gap-2 justify-center items-center mb-2">
-        <SkeletonInline class="h-4 w-16" />
-        <SkeletonInline class="h-4 w-28" />
+      <!-- Title skeleton -->
+      <div class="flex flex-col gap-2 justify-center items-center mb-4" aria-hidden="true">
+        <SkeletonInline class="h-4 w-20 rounded" />
+        <SkeletonInline class="h-3 w-36 rounded" />
       </div>
-      <div class="flex flex-col gap-1">
-        <SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
+      <!-- Bar skeletons with varying widths for visual realism -->
+      <div class="flex flex-col gap-2 px-2" aria-hidden="true">
+        <div
+          v-for="(pkg, i) in packages"
+          :key="pkg"
+          class="flex items-center gap-3"
+        >
+          <SkeletonInline class="h-3 shrink-0" :style="{ width: `${40 + (i * 17) % 40}%` }" />
+          <SkeletonInline class="h-7 flex-1 rounded" />
+        </div>
       </div>
     </template>
   </div>