Skip to content

Commit 0b57289

Browse files
danielroedanielroe
committed
fix: improve accuracy of package page skeleton
1 parent 3ea47eb commit 0b57289

File tree

1 file changed

+174
-97
lines changed

1 file changed

+174
-97
lines changed

‎app/components/Package/Skeleton.vue‎

Lines changed: 174 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -19,29 +19,36 @@
1919
<span class="inline-flex items-baseline font-mono text-base sm:text-lg shrink-0">
2020
<SkeletonInline class="h-6 w-20" />
2121
</span>
22-
<!-- Metrics badges -->
23-
<div class="basis-full flex items-center gap-1.5 self-baseline">
24-
<SkeletonBlock class="w-16 h-5.5 rounded" />
25-
<SkeletonBlock class="w-13 h-5.5 rounded" />
26-
<SkeletonBlock class="w-13 h-5.5 rounded" />
27-
<SkeletonBlock class="w-13 h-5.5 rounded bg-bg-subtle" />
28-
</div>
29-
<!-- Internal navigation placeholder (hidden on mobile) -->
22+
23+
<!-- Docs + Code + Compare nav placeholder (hidden on mobile) -->
3024
<div
3125
class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
3226
>
3327
<SkeletonInline class="h-7 w-16 rounded" />
3428
<SkeletonInline class="h-7 w-14 rounded" />
3529
<SkeletonInline class="h-7 w-20 rounded" />
3630
</div>
31+
32+
<!-- Metrics badges + likes — matches basis-full flex row -->
33+
<div class="basis-full flex gap-2 sm:gap-3 flex-wrap items-stretch">
34+
<!-- Badge row (Types, ESM, CJS, CJS-ghost) -->
35+
<div class="flex items-center gap-1.5 self-baseline">
36+
<SkeletonBlock class="w-16 h-5.5 rounded" />
37+
<SkeletonBlock class="w-13 h-5.5 rounded" />
38+
<SkeletonBlock class="w-13 h-5.5 rounded" />
39+
<SkeletonBlock class="w-13 h-5.5 rounded bg-bg-subtle" />
40+
</div>
41+
<!-- Likes button placeholder -->
42+
<SkeletonBlock class="w-14 h-5.5 rounded self-baseline" />
43+
</div>
3744
</div>
3845
</header>
3946

4047
<!-- Package details — matches area-details in [...name].vue -->
4148
<section class="area-details">
4249
<div class="mb-4">
43-
<!-- Description container with min-height to prevent CLS -->
44-
<div class="max-w-2xl min-h-[4.5rem]">
50+
<!-- Description -->
51+
<div class="max-w-2xl">
4552
<div class="space-y-2">
4653
<SkeletonBlock class="h-5 w-full" />
4754
<SkeletonBlock class="h-5 w-4/5" />
@@ -50,7 +57,9 @@
5057
</div>
5158

5259
<!-- External links -->
53-
<ul class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3">
60+
<ul
61+
class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3 text-sm"
62+
>
5463
<li><SkeletonInline class="h-5 w-28" /></li>
5564
<li><SkeletonInline class="h-5 w-14" /></li>
5665
<li><SkeletonInline class="h-5 w-16" /></li>
@@ -132,8 +141,18 @@
132141
</div>
133142
</section>
134143

135-
<!-- Vulns area (empty placeholder to hold grid space) -->
136-
<div class="area-vulns" />
144+
<!-- Vulns area — matches scanning placeholder in [...name].vue -->
145+
<div class="area-vulns">
146+
<div class="rounded-lg border border-border bg-bg-subtle px-4 py-3 flex items-center gap-2">
147+
<span
148+
class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin"
149+
aria-hidden="true"
150+
/>
151+
<span class="text-sm text-fg-muted">
152+
{{ $t('package.vulnerabilities.scanning') }}
153+
</span>
154+
</div>
155+
</div>
137156

138157
<!-- README — matches area-readme in [...name].vue -->
139158
<section class="area-readme min-w-0 scroll-mt-20">
@@ -165,96 +184,154 @@
165184
<!-- Sidebar — matches area-sidebar in [...name].vue -->
166185
<div class="area-sidebar">
167186
<div
168-
class="sidebar-scroll sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(top-22 pt-2 max-h-[calc(100dvh-6rem)])"
187+
class="sticky top-30 xl:top-14 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(pt-2 max-h-[calc(100dvh-6rem)])"
169188
>
170-
<!-- Download stats -->
171-
<section>
172-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
173-
{{ $t('package.skeleton.weekly') }}
174-
</h2>
175-
<!-- Chart placeholder -->
176-
<SkeletonBlock class="h-32 w-full rounded-lg" />
177-
</section>
178-
179-
<!-- Versions -->
180-
<section>
181-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
182-
{{ $t('package.skeleton.versions') }}
183-
</h2>
184-
<div class="space-y-1">
185-
<div class="flex items-center justify-between py-1.5 text-sm">
186-
<SkeletonInline class="h-4 w-16" />
187-
<SkeletonInline class="h-4 w-24" />
189+
<div class="flex flex-col gap-4 sm:gap-6 xl:(pt-2)">
190+
<!-- Download stats — matches CollapsibleSection + sparkline skeleton -->
191+
<section>
192+
<div class="flex items-center justify-between mb-3 px-1">
193+
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
194+
<span class="w-4 h-4 flex items-center justify-center shrink-0">
195+
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
196+
</span>
197+
{{ $t('package.skeleton.weekly') }}
198+
</h2>
188199
</div>
189-
<div class="flex items-center justify-between py-1.5 text-sm">
190-
<SkeletonInline class="h-4 w-14" />
191-
<SkeletonInline class="h-4 w-24" />
200+
<div class="ms-6 max-w-xs">
201+
<!-- Title row: fontSize * 2 = 24px -->
202+
<div class="h-6 flex items-center ps-3">
203+
<SkeletonInline class="h-3 w-36" />
204+
</div>
205+
<!-- Chart area: matches SVG viewBox 500:80 -->
206+
<div class="aspect-[500/80] flex items-center">
207+
<div class="w-[42%] flex items-center ps-0.5">
208+
<SkeletonInline class="h-7 w-24" />
209+
</div>
210+
<div class="flex-1 flex items-end pe-3">
211+
<SkeletonInline class="h-px w-full" />
212+
</div>
213+
</div>
192214
</div>
193-
<div class="flex items-center justify-between py-1.5 text-sm">
194-
<SkeletonInline class="h-4 w-18" />
195-
<SkeletonInline class="h-4 w-24" />
215+
</section>
216+
217+
<!-- Compatibility — matches CollapsibleSection -->
218+
<section>
219+
<div class="flex items-center justify-between mb-3 px-1">
220+
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
221+
<span class="w-4 h-4 flex items-center justify-center shrink-0">
222+
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
223+
</span>
224+
{{ $t('package.compatibility') }}
225+
</h2>
196226
</div>
197-
<div class="flex items-center justify-between py-1.5 text-sm">
198-
<SkeletonInline class="h-4 w-14" />
199-
<SkeletonInline class="h-4 w-24" />
227+
<div class="ms-6 space-y-2">
228+
<div class="flex justify-between gap-4 py-1">
229+
<SkeletonInline class="h-4 w-16" />
230+
<SkeletonInline class="h-4 w-20" />
231+
</div>
200232
</div>
201-
<div class="flex items-center justify-between py-1.5 text-sm">
202-
<SkeletonInline class="h-4 w-16" />
203-
<SkeletonInline class="h-4 w-24" />
233+
</section>
234+
235+
<!-- Versions — matches CollapsibleSection -->
236+
<section>
237+
<div class="flex items-center justify-between mb-3 px-1">
238+
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
239+
<span class="w-4 h-4 flex items-center justify-center shrink-0">
240+
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
241+
</span>
242+
{{ $t('package.skeleton.versions') }}
243+
</h2>
204244
</div>
205-
</div>
206-
</section>
207-
208-
<!-- Dependencies -->
209-
<section>
210-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
211-
{{ $t('package.skeleton.dependencies') }}
212-
</h2>
213-
<ul class="space-y-1 list-none m-0 p-0">
214-
<li class="flex items-center justify-between py-1 text-sm">
215-
<SkeletonInline class="h-4 w-24" />
216-
<SkeletonInline class="h-4 w-12" />
217-
</li>
218-
<li class="flex items-center justify-between py-1 text-sm">
219-
<SkeletonInline class="h-4 w-32" />
220-
<SkeletonInline class="h-4 w-10" />
221-
</li>
222-
<li class="flex items-center justify-between py-1 text-sm">
223-
<SkeletonInline class="h-4 w-20" />
224-
<SkeletonInline class="h-4 w-14" />
225-
</li>
226-
<li class="flex items-center justify-between py-1 text-sm">
227-
<SkeletonInline class="h-4 w-28" />
228-
<SkeletonInline class="h-4 w-12" />
229-
</li>
230-
</ul>
231-
</section>
232-
233-
<!-- Keywords -->
234-
<section>
235-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
236-
{{ $t('package.skeleton.keywords') }}
237-
</h2>
238-
<ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
239-
<li><SkeletonInline class="h-6 w-16 rounded" /></li>
240-
<li><SkeletonInline class="h-6 w-12 rounded" /></li>
241-
<li><SkeletonInline class="h-6 w-20 rounded" /></li>
242-
<li><SkeletonInline class="h-6 w-14 rounded" /></li>
243-
<li><SkeletonInline class="h-6 w-18 rounded" /></li>
244-
<li><SkeletonInline class="h-6 w-10 rounded" /></li>
245-
</ul>
246-
</section>
247-
248-
<!-- Maintainers -->
249-
<section>
250-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
251-
{{ $t('package.skeleton.maintainers') }}
252-
</h2>
253-
<ul class="space-y-2 list-none m-0 p-0">
254-
<li><SkeletonInline class="h-5 w-28" /></li>
255-
<li><SkeletonInline class="h-5 w-24" /></li>
256-
</ul>
257-
</section>
245+
<div class="ms-6 space-y-0.5">
246+
<div class="flex items-center justify-between gap-2 py-1.5">
247+
<SkeletonInline class="h-4 w-16" />
248+
<SkeletonInline class="h-4 w-24" />
249+
</div>
250+
<div class="flex items-center justify-between gap-2 py-1.5">
251+
<SkeletonInline class="h-4 w-14" />
252+
<SkeletonInline class="h-4 w-24" />
253+
</div>
254+
<div class="flex items-center justify-between gap-2 py-1.5">
255+
<SkeletonInline class="h-4 w-18" />
256+
<SkeletonInline class="h-4 w-24" />
257+
</div>
258+
<div class="flex items-center justify-between gap-2 py-1.5">
259+
<SkeletonInline class="h-4 w-14" />
260+
<SkeletonInline class="h-4 w-24" />
261+
</div>
262+
<div class="flex items-center justify-between gap-2 py-1.5">
263+
<SkeletonInline class="h-4 w-16" />
264+
<SkeletonInline class="h-4 w-24" />
265+
</div>
266+
</div>
267+
</section>
268+
269+
<!-- Dependencies — matches CollapsibleSection -->
270+
<section>
271+
<div class="flex items-center justify-between mb-3 px-1">
272+
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
273+
<span class="w-4 h-4 flex items-center justify-center shrink-0">
274+
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
275+
</span>
276+
{{ $t('package.skeleton.dependencies') }}
277+
</h2>
278+
</div>
279+
<ul class="ms-6 space-y-1 list-none m-0 p-0">
280+
<li class="flex items-center justify-between py-1 text-sm">
281+
<SkeletonInline class="h-4 w-24" />
282+
<SkeletonInline class="h-4 w-12" />
283+
</li>
284+
<li class="flex items-center justify-between py-1 text-sm">
285+
<SkeletonInline class="h-4 w-32" />
286+
<SkeletonInline class="h-4 w-10" />
287+
</li>
288+
<li class="flex items-center justify-between py-1 text-sm">
289+
<SkeletonInline class="h-4 w-20" />
290+
<SkeletonInline class="h-4 w-14" />
291+
</li>
292+
<li class="flex items-center justify-between py-1 text-sm">
293+
<SkeletonInline class="h-4 w-28" />
294+
<SkeletonInline class="h-4 w-12" />
295+
</li>
296+
</ul>
297+
</section>
298+
299+
<!-- Keywords — matches CollapsibleSection -->
300+
<section>
301+
<div class="flex items-center justify-between mb-3 px-1">
302+
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
303+
<span class="w-4 h-4 flex items-center justify-center shrink-0">
304+
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
305+
</span>
306+
{{ $t('package.skeleton.keywords') }}
307+
</h2>
308+
</div>
309+
<ul class="ms-6 flex flex-wrap gap-1.5 list-none m-0 p-0">
310+
<li><SkeletonInline class="h-6 w-16 rounded" /></li>
311+
<li><SkeletonInline class="h-6 w-12 rounded" /></li>
312+
<li><SkeletonInline class="h-6 w-20 rounded" /></li>
313+
<li><SkeletonInline class="h-6 w-14 rounded" /></li>
314+
<li><SkeletonInline class="h-6 w-18 rounded" /></li>
315+
<li><SkeletonInline class="h-6 w-10 rounded" /></li>
316+
</ul>
317+
</section>
318+
319+
<!-- Maintainers — matches CollapsibleSection -->
320+
<section>
321+
<div class="flex items-center justify-between mb-3 px-1">
322+
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
323+
<span class="w-4 h-4 flex items-center justify-center shrink-0">
324+
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
325+
</span>
326+
{{ $t('package.skeleton.maintainers') }}
327+
</h2>
328+
</div>
329+
<ul class="ms-6 space-y-2 list-none m-0 p-0">
330+
<li><SkeletonInline class="h-5 w-28" /></li>
331+
<li><SkeletonInline class="h-5 w-24" /></li>
332+
</ul>
333+
</section>
334+
</div>
258335
</div>
259336
</div>
260337
</article>

0 commit comments

Comments
 (0)