forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add skeleton debugging tool (#1359)
authored by
Daniel Roe
and committed by
GitHub
06dc9df4
efcdbac0
+15
-1
+15
-1
app/pages/package/[[org]]/[name].vue
+15
-1
app/pages/package/[[org]]/[name].vue
···
545
545
router.push({ name: 'compare', query: { packages: pkg.value.name } })
546
546
},
547
547
)
548
+
549
+
const showSkeleton = shallowRef(false)
548
550
</script>
549
551
550
552
<template>
553
+
<DevOnly>
554
+
<ButtonBase
555
+
class="fixed bottom-4 inset-is-4 z-50 shadow-lg rounded-full! px-3! py-2!"
556
+
classicon="i-simple-icons:skeleton"
557
+
variant="primary"
558
+
title="Toggle skeleton loader (development only)"
559
+
:aria-pressed="showSkeleton"
560
+
@click="showSkeleton = !showSkeleton"
561
+
>
562
+
<span class="text-xs">Skeleton</span>
563
+
</ButtonBase>
564
+
</DevOnly>
551
565
<main class="container flex-1 w-full py-8">
552
-
<PackageSkeleton v-if="status === 'pending'" />
566
+
<PackageSkeleton v-if="showSkeleton || status === 'pending'" />
553
567
554
568
<article v-else-if="status === 'success' && pkg" :class="$style.packagePage">
555
569
<!-- Package header -->