Skip to content

feat: add skeleton debugging tool #1359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielroe merged 1 commit into from
Feb 10, 2026
+15 −1
Merged

feat: add skeleton debugging tool #1359

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion app/pages/package/[[org]]/[name].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Comment on lines +553 to +564
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, check for UnoCSS configuration files
fd -e "config.*" -e "uno.config.*" | head -20

Repository: npmx-dev/npmx.dev

Length of output: 43

🏁 Script executed:

# Check for icon definitions or presets in the project
rg -n "preset.*icon|icon.*preset" --type ts --type js -A 5 -B 5 | head -100

Repository: npmx-dev/npmx.dev

Length of output: 43

🏁 Script executed:

# Search for simple-icons usage in the codebase
rg "i-simple-icons" --type vue --type ts --type js -n | head -20

Repository: npmx-dev/npmx.dev

Length of output: 88

🏁 Script executed:

# Check the ButtonBase component to understand its icon property
fd -e "ButtonBase.vue" -o -e "ButtonBase.ts" -o -e "ButtonBase.tsx"

Repository: npmx-dev/npmx.dev

Length of output: 177

🏁 Script executed:

# List files to understand structure
git ls-files | grep -E "(uno|config)" | head -20

Repository: npmx-dev/npmx.dev

Length of output: 488

🏁 Script executed:

# Find ButtonBase component more broadly
find . -name "*Button*" -type f 2>/dev/null | head -20

Repository: npmx-dev/npmx.dev

Length of output: 97

🏁 Script executed:

# Search for simple-icons usage without file type filter
rg "i-simple-icons" -n -C 3 | head -40

Repository: npmx-dev/npmx.dev

Length of output: 3317

🏁 Script executed:

# Check package.json for UnoCSS and dependencies
cat package.json | grep -A 5 -B 5 "unocss\|simple-icons"

Repository: npmx-dev/npmx.dev

Length of output: 1869

🏁 Script executed:

# Read the uno.config.ts to understand icon configuration
cat uno.config.ts

Repository: npmx-dev/npmx.dev

Length of output: 8079

🏁 Script executed:

# Search for skeleton icon references in the codebase
rg "skeleton" -i --type-add "vue:*.vue" -t vue -t ts -t js | head -30

Repository: npmx-dev/npmx.dev

Length of output: 2831

🏁 Script executed:

# Check if there are any custom icon definitions
rg "define.*icon|icon.*define" -i -t ts -t js -C 3 | head -50

Repository: npmx-dev/npmx.dev

Length of output: 2383

🌐 Web query:

simple-icons skeleton icon library collection

💡 Result:

  • Simple Icons is an open-source collection of SVG brand logos (popular companies/products) distributed via GitHub and npm—so you generally won’t find a “skeleton” (anatomy) icon in the Simple Icons collection. [1]
  • If you meant a skeleton/anatomy icon, you’ll want a different icon set/collection, e.g.:
    • IconSvg.co has a downloadable “Skeleton” SVG in a medical-themed collection. [2]
    • BioRender provides skeleton icons inside its life-science icon library (usable within their app). [3]
    • simpleicon.com is a large “simple icons” style gallery (not the Simple Icons brand project) with many general-purpose categories. [4]

Sources: [1] [2] [3] [4]

🏁 Script executed:

# Find and read the ButtonBase component
find . -path ./node_modules -prune -o -name "*ButtonBase*" -type f -print

Repository: npmx-dev/npmx.dev

Length of output: 43

🏁 Script executed:

# Check what icons are available in Carbon collection (commonly used in project)
rg "i-carbon:" app/pages/package/\[\[org\]\]/\[name\].vue -B 2 -A 2 | head -20

Repository: npmx-dev/npmx.dev

Length of output: 605

🏁 Script executed:

# View the ButtonBase component definition
find . -path ./node_modules -prune -o -path ./dist -prune -o -name "ButtonBase.vue" -type f -print | xargs cat 2>/dev/null

Repository: npmx-dev/npmx.dev

Length of output: 43

🏁 Script executed:

# Check what Carbon icons are available for skeletal/bone-related concepts
rg "i-carbon:" --type-add "vue:*.vue" -t vue -t ts -t js | grep -i "bone\|skeleton\|load\|debug" | head -20

Repository: npmx-dev/npmx.dev

Length of output: 1368

🏁 Script executed:

# Check if there are any other references to simple-icons in the component file itself
cat app/pages/package/\[\[org\]\]/\[name\].vue | grep -n "simple-icons\|classicon" | head -30

Repository: npmx-dev/npmx.dev

Length of output: 1384

Replace i-simple-icons:skeleton with a valid icon from the Carbon collection.

The i-simple-icons:skeleton icon does not exist—simple-icons contains only brand logos (GitHub, npm, etc.), not UI icons. The icon will fail to render, leaving the button without an icon.

Consider using a Carbon icon suitable for a skeleton loader toggle:

Suggested fix 
  <ButtonBase
    class="fixed bottom-4 inset-is-4 z-50 shadow-lg rounded-full! px-3! py-2!"
-   classicon="i-simple-icons:skeleton"
+   classicon="i-carbon:hourglass"
    variant="primary"
    title="Toggle skeleton loader (development only)"
    :aria-pressed="showSkeleton"
    `@click`="showSkeleton = !showSkeleton"
  >
    <span class="text-xs">Skeleton</span>
  </ButtonBase>

Alternatives: i-carbon:timer, or use i-carbon:circle-dash with motion-safe:animate-spin for a loading animation effect.

<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 -->
Expand Down
Loading