From c280e4896b907c9ccacc0fc67548523f52fd3274 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 10 Feb 2026 23:30:12 +0000
Subject: [PATCH] feat: add skeleton debugging tool

---
 app/pages/package/[[org]]/[name].vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 3ade232d3..7b4fde7e6 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -545,11 +545,25 @@ onKeyStroke(
     router.push({ name: 'compare', query: { packages: pkg.value.name } })
   },
 )
+
+const showSkeleton = shallowRef(false)
 </script>
 
 <template>
+  <DevOnly>
+    <ButtonBase
+      class="fixed bottom-4 inset-is-4 z-50 shadow-lg rounded-full! px-3! py-2!"
+      classicon="i-simple-icons:skeleton"
+      variant="primary"
+      title="Toggle skeleton loader (development only)"
+      :aria-pressed="showSkeleton"
+      @click="showSkeleton = !showSkeleton"
+    >
+      <span class="text-xs">Skeleton</span>
+    </ButtonBase>
+  </DevOnly>
   <main class="container flex-1 w-full py-8">
-    <PackageSkeleton v-if="status === 'pending'" />
+    <PackageSkeleton v-if="showSkeleton || status === 'pending'" />
 
     <article v-else-if="status === 'success' && pkg" :class="$style.packagePage">
       <!-- Package header -->