Show "No download data available" instead of hiding the entire component

Author: wojtekmaj

app/components/Package/WeeklyDownloadStats.vue

@@ -205,7 +205,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>
         <button
@@ -221,39 +221,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>

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')
   })
 })