From f98a5f249a2022f0c844d7ae77d6098658ad02ef Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Thu, 5 Feb 2026 23:45:38 +0100
Subject: [PATCH 1/4] fix(ui): hide awkward empty state for weekly downloads
 for new packages

Closes #1044
---
 app/components/Package/WeeklyDownloadStats.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 720b3213b..f16cc8cee 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -13,6 +13,8 @@ const hasChartModalTransitioned = shallowRef(false)
 const isChartModalOpen = shallowRef(false)
 
 async function openChartModal() {
+  if (!hasWeeklyDownloads.value) return
+
   isChartModalOpen.value = true
   hasChartModalTransitioned.value = false
   // ensure the component renders before opening the dialog
@@ -96,10 +98,13 @@ const pulseColor = computed(() => {
 })
 
 const weeklyDownloads = shallowRef<WeeklyDownloadPoint[]>([])
+const isLoadingWeeklyDownloads = shallowRef(false)
+const hasWeeklyDownloads = computed(() => weeklyDownloads.value.length > 0)
 
 async function loadWeeklyDownloads() {
   if (!import.meta.client) return
 
+  isLoadingWeeklyDownloads.value = true
   try {
     const result = await fetchPackageDownloadEvolution(
       () => props.packageName,
@@ -109,6 +114,8 @@ async function loadWeeklyDownloads() {
     weeklyDownloads.value = (result as WeeklyDownloadPoint[]) ?? []
   } catch {
     weeklyDownloads.value = []
+  } finally {
+    isLoadingWeeklyDownloads.value = false
   }
 }
 
@@ -208,10 +215,11 @@ const config = computed(() => {
 </script>
 
 <template>
-  <div class="space-y-8">
+  <div v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads" class="space-y-8">
     <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
       <template #actions>
         <ButtonBase
+          v-if="hasWeeklyDownloads"
           type="button"
           @click="openChartModal"
           class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
@@ -260,7 +268,11 @@ const config = computed(() => {
     </CollapsibleSection>
   </div>
 
-  <PackageChartModal @close="handleModalClose" @transitioned="handleModalTransitioned">
+  <PackageChartModal
+    v-if="isChartModalOpen && hasWeeklyDownloads"
+    @close="handleModalClose"
+    @transitioned="handleModalTransitioned"
+  >
     <!-- The Chart is mounted after the dialog has transitioned -->
     <!-- This avoids flaky behavior that hides the chart's minimap half of the time -->
     <Transition name="opacity" mode="out-in">

From 500a0211c95bfb4cd8767da02a7c31d277e96947 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Thu, 5 Feb 2026 23:57:17 +0100
Subject: [PATCH 2/4] Apply CR fixes

---
 .../Package/WeeklyDownloadStats.vue           | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index f16cc8cee..11eae59cb 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -12,17 +12,6 @@ const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
 const isChartModalOpen = shallowRef(false)
 
-async function openChartModal() {
-  if (!hasWeeklyDownloads.value) return
-
-  isChartModalOpen.value = true
-  hasChartModalTransitioned.value = false
-  // ensure the component renders before opening the dialog
-  await nextTick()
-  await nextTick()
-  chartModal.open()
-}
-
 function handleModalClose() {
   isChartModalOpen.value = false
   hasChartModalTransitioned.value = false
@@ -98,9 +87,20 @@ const pulseColor = computed(() => {
 })
 
 const weeklyDownloads = shallowRef<WeeklyDownloadPoint[]>([])
-const isLoadingWeeklyDownloads = shallowRef(false)
+const isLoadingWeeklyDownloads = shallowRef(true)
 const hasWeeklyDownloads = computed(() => weeklyDownloads.value.length > 0)
 
+async function openChartModal() {
+  if (!hasWeeklyDownloads.value) return
+
+  isChartModalOpen.value = true
+  hasChartModalTransitioned.value = false
+  // ensure the component renders before opening the dialog
+  await nextTick()
+  await nextTick()
+  chartModal.open()
+}
+
 async function loadWeeklyDownloads() {
   if (!import.meta.client) return
 

From 7719ed5662a5bd97f934171342b8b046689cec4e Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Fri, 6 Feb 2026 00:14:02 +0100
Subject: [PATCH 3/4] Add unit tests

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

diff --git a/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts b/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts
new file mode 100644
index 000000000..f31770a87
--- /dev/null
+++ b/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts
@@ -0,0 +1,63 @@
+import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
+import { defineComponent, h } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+
+const { mockFetchPackageDownloadEvolution } = vi.hoisted(() => ({
+  mockFetchPackageDownloadEvolution: vi.fn(),
+}))
+
+mockNuxtImport('useCharts', () => {
+  return () => ({
+    fetchPackageDownloadEvolution: (...args: unknown[]) =>
+      mockFetchPackageDownloadEvolution(...args),
+  })
+})
+
+vi.mock('vue-data-ui/vue-ui-sparkline', () => ({
+  VueUiSparkline: defineComponent({
+    name: 'VueUiSparkline',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      return () => h('div', { class: attrs.class }, slots.default?.() ?? [])
+    },
+  }),
+}))
+
+import PackageWeeklyDownloadStats from '~/components/Package/WeeklyDownloadStats.vue'
+
+describe('PackageWeeklyDownloadStats', () => {
+  const baseProps = {
+    packageName: 'test-package',
+    createdIso: '2026-02-05T00:00:00.000Z',
+  }
+
+  it('hides the section when weekly downloads are empty', async () => {
+    mockFetchPackageDownloadEvolution.mockReset()
+    mockFetchPackageDownloadEvolution.mockResolvedValue([])
+
+    const component = await mountSuspended(PackageWeeklyDownloadStats, {
+      props: baseProps,
+    })
+
+    expect(component.text()).not.toContain('Weekly Downloads')
+  })
+
+  it('shows the section when weekly downloads exist', async () => {
+    mockFetchPackageDownloadEvolution.mockReset()
+    mockFetchPackageDownloadEvolution.mockResolvedValue([
+      {
+        weekStart: '2026-01-01',
+        weekEnd: '2026-01-07',
+        timestampStart: 1767225600000,
+        timestampEnd: 1767744000000,
+        downloads: 42,
+      },
+    ])
+
+    const component = await mountSuspended(PackageWeeklyDownloadStats, {
+      props: baseProps,
+    })
+
+    expect(component.text()).toContain('Weekly Downloads')
+  })
+})

From e4a56233b499e78a2b89fb1ec59d09a38fbffb18 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Fri, 6 Feb 2026 09:07:06 +0100
Subject: [PATCH 4/4] Show "No download data available" instead of hiding the
 entire component

---
 .../Package/WeeklyDownloadStats.vue           | 67 ++++++++++---------
 .../PackageWeeklyDownloadStats.spec.ts        |  4 +-
 2 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 11eae59cb..cca88f60c 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -215,7 +215,7 @@ const config = computed(() => {
 </script>
 
 <template>
-  <div v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads" class="space-y-8">
+  <div class="space-y-8">
     <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
       <template #actions>
         <ButtonBase
@@ -231,39 +231,44 @@ const config = computed(() => {
       </template>
 
       <div class="w-full overflow-hidden">
-        <ClientOnly>
-          <VueUiSparkline class="w-full max-w-xs" :dataset :config>
-            <template #skeleton>
-              <!-- This empty div overrides the default built-in scanning animation on load -->
-              <div />
-            </template>
-          </VueUiSparkline>
-          <template #fallback>
-            <!-- Skeleton matching sparkline layout: title row + chart with data label -->
-            <div class="min-h-[75.195px]">
-              <!-- Title row: date range (24px height) -->
-              <div class="h-6 flex items-center ps-3">
-                <SkeletonInline class="h-3 w-36" />
-              </div>
-              <!-- Chart area: data label left, sparkline right -->
-              <div class="aspect-[500/80] flex items-center">
-                <!-- Data label (covers ~42% width) -->
-                <div class="w-[42%] flex items-center ps-0.5">
-                  <SkeletonInline class="h-7 w-24" />
+        <template v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads">
+          <ClientOnly>
+            <VueUiSparkline class="w-full max-w-xs" :dataset :config>
+              <template #skeleton>
+                <!-- This empty div overrides the default built-in scanning animation on load -->
+                <div />
+              </template>
+            </VueUiSparkline>
+            <template #fallback>
+              <!-- Skeleton matching sparkline layout: title row + chart with data label -->
+              <div class="min-h-[75.195px]">
+                <!-- Title row: date range (24px height) -->
+                <div class="h-6 flex items-center ps-3">
+                  <SkeletonInline class="h-3 w-36" />
                 </div>
-                <!-- Sparkline area (~58% width) -->
-                <div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
-                  <SkeletonInline
-                    v-for="i in 16"
-                    :key="i"
-                    class="flex-1 rounded-sm"
-                    :style="{ height: `${25 + ((i * 7) % 50)}%` }"
-                  />
+                <!-- Chart area: data label left, sparkline right -->
+                <div class="aspect-[500/80] flex items-center">
+                  <!-- Data label (covers ~42% width) -->
+                  <div class="w-[42%] flex items-center ps-0.5">
+                    <SkeletonInline class="h-7 w-24" />
+                  </div>
+                  <!-- Sparkline area (~58% width) -->
+                  <div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
+                    <SkeletonInline
+                      v-for="i in 16"
+                      :key="i"
+                      class="flex-1 rounded-sm"
+                      :style="{ height: `${25 + ((i * 7) % 50)}%` }"
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-          </template>
-        </ClientOnly>
+            </template>
+          </ClientOnly>
+        </template>
+        <p v-else class="py-2 text-sm font-mono text-fg-subtle">
+          {{ $t('package.downloads.no_data') }}
+        </p>
       </div>
     </CollapsibleSection>
   </div>
diff --git a/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts b/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts
index f31770a87..2cddc49d0 100644
--- a/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts
+++ b/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts
@@ -39,7 +39,8 @@ describe('PackageWeeklyDownloadStats', () => {
       props: baseProps,
     })
 
-    expect(component.text()).not.toContain('Weekly Downloads')
+    expect(component.text()).toContain('Weekly Downloads')
+    expect(component.text()).toContain('No download data available')
   })
 
   it('shows the section when weekly downloads exist', async () => {
@@ -59,5 +60,6 @@ describe('PackageWeeklyDownloadStats', () => {
     })
 
     expect(component.text()).toContain('Weekly Downloads')
+    expect(component.text()).not.toContain('No download data available')
   })
 })