feat: add skeleton debugging tool #1359
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
📝 WalkthroughWalkthroughThe pull request introduces a development-only skeleton loader toggle feature to the package page component. A new local state variable Possibly related PRs
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| <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> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, check for UnoCSS configuration files
fd -e "config.*" -e "uno.config.*" | head -20Repository: 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 -100Repository: 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 -20Repository: 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 -20Repository: npmx-dev/npmx.dev
Length of output: 488
🏁 Script executed:
# Find ButtonBase component more broadly
find . -name "*Button*" -type f 2>/dev/null | head -20Repository: 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 -40Repository: 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.tsRepository: 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 -30Repository: 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 -50Repository: 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 -printRepository: 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 -20Repository: 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/nullRepository: 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 -20Repository: 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 -30Repository: 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.
|
This is so cool 😮 |
2 participants
quick QOL for developing and detecting CLS - this lets you swap on/off the loading state for the package page to see at a glance how things differ
Screen.Recording.2026-02-10.at.23.31.33.mov