fix(ui): hide awkward empty state for weekly downloads for new packages

Closes #1044

Author: wojtekmaj

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">