diff --git a/app/components/PackageDownloadAnalytics.vue b/app/components/PackageDownloadAnalytics.vue
index afb474a062..ab1b72bbd3 100644
--- a/app/components/PackageDownloadAnalytics.vue
+++ b/app/components/PackageDownloadAnalytics.vue
@@ -49,8 +49,6 @@ watch(
 
 const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
-// oklh or css variables are not supported by vue-data-ui (for now)
-
 const accentColorValueById = computed<Record<string, string>>(() => {
   const map: Record<string, string> = {}
   for (const item of accentColors) {
diff --git a/app/components/PackageWeeklyDownloadStats.vue b/app/components/PackageWeeklyDownloadStats.vue
index fd1a1e7c61..f9cee72fa1 100644
--- a/app/components/PackageWeeklyDownloadStats.vue
+++ b/app/components/PackageWeeklyDownloadStats.vue
@@ -116,10 +116,32 @@ const dataset = computed(() =>
 
 const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '')
 
-// oklh or css variables are not supported by vue-data-ui (for now)
 const config = computed(() => {
   return {
     theme: 'dark',
+    /**
+     * The built-in skeleton loader kicks in when the component is mounted but the data is not yet ready.
+     * The configuration of the skeleton is customized for a seemless transition with the final state
+     */
+    skeletonConfig: {
+      style: {
+        backgroundColor: 'transparent',
+        dataLabel: {
+          show: true,
+          color: 'transparent',
+        },
+        area: {
+          color: colors.value.borderHover,
+          useGradient: false,
+          opacity: 10,
+        },
+        line: {
+          color: colors.value.borderHover,
+        },
+      },
+    },
+    // Same idea: initialize the line at zero, so it nicely transitions to the final dataset
+    skeletonDataset: Array.from({ length: 52 }, () => 0),
     style: {
       backgroundColor: 'transparent',
       animation: { show: false },
@@ -196,16 +218,21 @@ const config = computed(() => {
 
       <div class="w-full overflow-hidden">
         <ClientOnly>
-          <VueUiSparkline class="w-full max-w-xs" :dataset :config />
+          <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="max-w-xs">
-              <!-- Title row: date range -->
-              <div class="h-5 flex items-center ps-3">
+            <div class="min-h-[75.195px]">
+              <!-- Title row: date range (24px height) -->
+              <div class="h-6 flex items-center ps-3">
                 <span class="skeleton h-3 w-36" />
               </div>
-              <!-- Chart area: data label left, sparkline right (h-[51px] matches rendered SVG) -->
-              <div class="h-[55px] flex items-center">
+              <!-- 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">
                   <span class="skeleton h-7 w-24" />
diff --git a/package.json b/package.json
index c97ecf9569..684bacd144 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
     "validate-npm-package-name": "^7.0.2",
     "virtua": "^0.48.3",
     "vue": "3.5.27",
-    "vue-data-ui": "^3.13.6"
+    "vue-data-ui": "^3.13.7"
   },
   "devDependencies": {
     "@iconify-json/carbon": "1.2.18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d26cc8294..8b9ecc0d60 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,8 +111,8 @@ importers:
         specifier: 3.5.27
         version: 3.5.27(typescript@5.9.3)
       vue-data-ui:
-        specifier: ^3.13.6
-        version: 3.13.6(vue@3.5.27(typescript@5.9.3))
+        specifier: ^3.13.7
+        version: 3.13.7(vue@3.5.27(typescript@5.9.3))
     devDependencies:
       '@iconify-json/carbon':
         specifier: 1.2.18
@@ -9010,8 +9010,8 @@ packages:
   vue-component-type-helpers@3.2.4:
     resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
-  vue-data-ui@3.13.6:
-    resolution: {integrity: sha512-cfyL9kP4bOpbby2wvgCJvsKyRv/5aQHw2+UZIZ5/Vm4lt7yZe41ZU9kMMryd911hC6vuYLUB88bcIGFg1toWAA==}
+  vue-data-ui@3.13.7:
+    resolution: {integrity: sha512-tFz+sN5CaDUl1/VotE35lV3hvJPurkhE6j/e3DldOMDbDCunOYvwqGuMglmGxQ8n/w1N/iqnEWVTmhIJHYdd8Q==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -19757,7 +19757,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.4: {}
 
-  vue-data-ui@3.13.6(vue@3.5.27(typescript@5.9.3)):
+  vue-data-ui@3.13.7(vue@3.5.27(typescript@5.9.3)):
     dependencies:
       vue: 3.5.27(typescript@5.9.3)