From c805173909a17ccfb6dbd09ba401bb19029e2702 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:50:17 -0400
Subject: [PATCH 1/3] fix: improve compare bar chart skeleton loaders with
 varying widths (#2106)

---
 app/components/Compare/FacetBarChart.vue | 36 +++++++++++++++++-------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index 4b0322fd32..563442db94 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/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>

From b1ddc849c027a1b72301adc171b3dbd118599036 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 14:52:40 -0400
Subject: [PATCH 2/3] test: add FacetBarChart skeleton varying widths
 regression test

---
 .../components/compare/FacetBarChart.spec.ts  | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 test/nuxt/components/compare/FacetBarChart.spec.ts

diff --git a/test/nuxt/components/compare/FacetBarChart.spec.ts b/test/nuxt/components/compare/FacetBarChart.spec.ts
new file mode 100644
index 0000000000..51f7dec52f
--- /dev/null
+++ b/test/nuxt/components/compare/FacetBarChart.spec.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
+
+// Stub the heavy chart library
+vi.mock('vue-data-ui/vue-ui-horizontal-bar', () => ({
+  VueUiHorizontalBar: { template: '<div class="chart-stub"><slot name="fallback" /></div>' },
+}))
+vi.mock('vue-data-ui/style.css', () => ({}))
+
+describe('FacetBarChart skeleton loaders', () => {
+  const baseProps = {
+    values: [null, null, null],
+    packages: ['react', 'vue', 'svelte'],
+    label: 'Weekly Downloads',
+    description: 'Downloads per week',
+    facetLoading: true,
+  }
+
+  it('renders skeleton loaders when facetLoading is true', async () => {
+    const wrapper = await mountSuspended(FacetBarChart, {
+      props: baseProps,
+    })
+
+    const html = wrapper.html()
+    // Should show skeleton elements
+    expect(html).toContain('h-7')
+  })
+
+  it('skeleton bar label widths vary across packages (not all the same)', () => {
+    // The formula used is: width = `${40 + (i * 17) % 40}%`
+    // For 3 packages: i=0 -> 40%, i=1 -> 57%, i=2 -> 74%
+    const packages = ['react', 'vue', 'svelte']
+    const widths = packages.map((_, i) => `${40 + (i * 17) % 40}%`)
+
+    // Verify they are not all the same (the bug was all bars had the same width)
+    const uniqueWidths = new Set(widths)
+    expect(uniqueWidths.size).toBeGreaterThan(1)
+  })
+
+  it('skeleton width formula produces values within 40-80% range', () => {
+    const indices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+    for (const i of indices) {
+      const width = 40 + (i * 17) % 40
+      expect(width).toBeGreaterThanOrEqual(40)
+      expect(width).toBeLessThan(80)
+    }
+  })
+
+  it('renders one row per package in the skeleton', async () => {
+    const wrapper = await mountSuspended(FacetBarChart, {
+      props: {
+        ...baseProps,
+        packages: ['pkg-a', 'pkg-b', 'pkg-c'],
+        facetLoading: true,
+      },
+    })
+
+    // The skeleton renders one flex row per package
+    const html = wrapper.html()
+    // flex items-center gap-3 = the skeleton row class
+    const rowMatches = html.match(/flex items-center gap-3/g)
+    expect(rowMatches).not.toBeNull()
+  })
+})

From 06909d3f1c52082667af693e95eeed9968d7a502 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 22 Mar 2026 18:54:49 +0000
Subject: [PATCH 3/3] [autofix.ci] apply automated fixes

---
 app/components/Compare/FacetBarChart.vue         | 16 ++++------------
 .../components/compare/FacetBarChart.spec.ts     |  4 ++--
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index 563442db94..417ea4e543 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -332,12 +332,8 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
           <SkeletonInline class="h-3 w-36 rounded" />
         </div>
         <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}%` }" />
+          <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>
@@ -352,12 +348,8 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
       </div>
       <!-- 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}%` }" />
+        <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>
diff --git a/test/nuxt/components/compare/FacetBarChart.spec.ts b/test/nuxt/components/compare/FacetBarChart.spec.ts
index 51f7dec52f..42f67ca4bb 100644
--- a/test/nuxt/components/compare/FacetBarChart.spec.ts
+++ b/test/nuxt/components/compare/FacetBarChart.spec.ts
@@ -31,7 +31,7 @@ describe('FacetBarChart skeleton loaders', () => {
     // The formula used is: width = `${40 + (i * 17) % 40}%`
     // For 3 packages: i=0 -> 40%, i=1 -> 57%, i=2 -> 74%
     const packages = ['react', 'vue', 'svelte']
-    const widths = packages.map((_, i) => `${40 + (i * 17) % 40}%`)
+    const widths = packages.map((_, i) => `${40 + ((i * 17) % 40)}%`)
 
     // Verify they are not all the same (the bug was all bars had the same width)
     const uniqueWidths = new Set(widths)
@@ -41,7 +41,7 @@ describe('FacetBarChart skeleton loaders', () => {
   it('skeleton width formula produces values within 40-80% range', () => {
     const indices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
     for (const i of indices) {
-      const width = 40 + (i * 17) % 40
+      const width = 40 + ((i * 17) % 40)
       expect(width).toBeGreaterThanOrEqual(40)
       expect(width).toBeLessThan(80)
     }