forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add sparkline fallback to reduce layout shift
+28
-1
+28
-1
app/components/PackageDownloadStats.vue
+28
-1
app/components/PackageDownloadStats.vue
···
70
70
</div>
71
71
<div class="w-full">
72
72
<ClientOnly>
73
-
<VueUiSparkline :dataset :config />
73
+
<div>
74
+
<VueUiSparkline :dataset :config />
75
+
</div>
76
+
<template #fallback>
77
+
<!-- Skeleton matching sparkline layout: title row + chart with data label -->
78
+
<div class="min-h-[100px]">
79
+
<!-- Title row: date range (24px height) -->
80
+
<div class="h-6 flex items-center pl-3">
81
+
<span class="skeleton h-3 w-36" />
82
+
</div>
83
+
<!-- Chart area: data label left, sparkline right -->
84
+
<div class="aspect-[500/80] flex items-center">
85
+
<!-- Data label (covers ~42% width) -->
86
+
<div class="w-[42%] flex items-center pl-0.5">
87
+
<span class="skeleton h-7 w-24" />
88
+
</div>
89
+
<!-- Sparkline area (~58% width) -->
90
+
<div class="flex-1 flex items-end gap-0.5 h-4/5 pr-3">
91
+
<span
92
+
v-for="i in 16"
93
+
:key="i"
94
+
class="skeleton flex-1 rounded-sm"
95
+
:style="{ height: `${25 + ((i * 7) % 50)}%` }"
96
+
/>
97
+
</div>
98
+
</div>
99
+
</div>
100
+
</template>
74
101
</ClientOnly>
75
102
</div>
76
103
</section>