Skip to content

feat: skeleton — dithered loading placeholders (chart-silhouette variant)#16

Open
DloomPlz wants to merge 1 commit into
Boring-Software-Inc:mainfrom
DloomPlz:feat/skeleton
Open

feat: skeleton — dithered loading placeholders (chart-silhouette variant)#16
DloomPlz wants to merge 1 commit into
Boring-Software-Inc:mainfrom
DloomPlz:feat/skeleton

Conversation

@DloomPlz

Copy link
Copy Markdown
Contributor

Summary

Adds <DitherSkeleton>, a loading placeholder in the kit's own texture: a slow shimmer band sweeping through the ordered dither instead of a flat pulsing rect.

  • variant="block" — size it like any skeleton (className="h-4 w-40 rounded"), text lines / cards / avatar squares.
  • variant="chart" — draws a seeded area silhouette (two seeded sine waves via the kit's fnv1a/xorshift32), so a chart slot loads "in character". Same seed → same shape, so a reloading chart never pops between two different placeholder silhouettes.
  • Standalone registry item like avatar/button/gradient — shares only pixel.ts + palette.ts, no chart engine.
  • Honors prefers-reduced-motion (static frame, no loop), always aria-hidden (placeholders are decorative), cleans up rAF + ResizeObserver, backing resolution capped.

Details

  • Pure models (skeletonHeights, shimmerLift) are exported and unit-tested; a mount test pins the aria-hidden contract (happy-dom safe — the painter no-ops on a null 2D context).
  • Registry item + barrel export + COMPONENTS.md install/usage sections; r/ JSON regenerated with npm run build:registry.
  • Suite: 30/30.

Battle-tested in a production dashboard where it replaced every animate-pulse chart placeholder.

@tripwire-dev

tripwire-dev Bot commented Jul 13, 2026

Copy link
Copy Markdown

passed — nothing tripped. good to merge.

View on Tripwire

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant