fix(compare): enlarge chart skeleton title block

Author: Kemalau

app/components/Compare/FacetBarChart.vue

@@ -283,23 +283,27 @@ 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>
-        <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-3" data-test="facet-bar-chart-skeleton">
+          <div class="flex flex-col items-center gap-2 mb-3">
+            <SkeletonInline class="h-5 w-36 max-w-full" />
+            <SkeletonInline class="h-4 w-52 max-w-full" />
+          </div>
+          <div class="flex flex-col gap-2">
+            <SkeletonInline class="h-8 w-full" v-for="pkg in packages" :key="pkg" />
+          </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" />
-      </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-3" data-test="facet-bar-chart-skeleton">
+        <div class="flex flex-col items-center gap-2 mb-3">
+          <SkeletonInline class="h-5 w-36 max-w-full" />
+          <SkeletonInline class="h-4 w-52 max-w-full" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <SkeletonInline class="h-8 w-full" v-for="pkg in packages" :key="pkg" />
+        </div>
       </div>
     </template>
   </div>

test/nuxt/components/compare/FacetBarChart.spec.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
+
+describe('FacetBarChart', () => {
+  it('renders a taller loading skeleton with title and subtitle placeholders', async () => {
+    const component = await mountSuspended(FacetBarChart, {
+      props: {
+        values: [null, null],
+        packages: ['react', 'vue'],
+        label: 'Bundle size',
+        description: 'Compare install footprint',
+        facetLoading: true,
+      },
+    })
+
+    const skeleton = component.find('[data-test="facet-bar-chart-skeleton"]')
+    expect(skeleton.exists()).toBe(true)
+
+    const lines = skeleton.findAllComponents({ name: 'SkeletonInline' })
+    expect(lines).toHaveLength(4)
+    expect(lines[0]?.attributes('class')).toContain('h-5')
+    expect(lines[1]?.attributes('class')).toContain('h-4')
+    expect(lines[2]?.attributes('class')).toContain('h-8')
+    expect(lines[3]?.attributes('class')).toContain('h-8')
+  })
+})