Add skeleton component

[ShannonHeylmun]

Summary by CodeRabbit

• New Features

  • Added a new skeleton loading placeholder component with configurable shapes, sizes, colors, and animation modes.
  • Introduced a gallery demo showcasing multiple skeleton layouts and styles.
  • The gallery now includes the Skeleton entry in its component list and centered preview pane.

• Bug Fixes

  • Fixed the gallery preview so the Skeleton component now displays correctly when selected.

[coderabbitai]

Warning

Review limit reached

@ShannonHeylmun, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 15 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5d58fc0a-6ac8-41ba-ad41-73d84f338362

📥 Commits

Reviewing files that changed from the base of the PR and between d23841a and c31218a.

📒 Files selected for processing (7)

• examples/gallery.rs
• src/components/mod.rs
• src/components/skeleton/demo.rs
• src/components/skeleton/mod.rs
• src/components/skeleton/view.rs
• src/components/skeleton/widget.rs
• src/lib.rs

📝 Walkthrough

Walkthrough

This PR adds a new Skeleton loading placeholder component to void_ui, including a builder API (Skeleton, SkeletonShape, SkeletonAnimation), an Xilem View implementation (SkeletonView), a leaf widget (SkeletonWidget) with pulse/wave/none animations, module wiring into the component registry, and a gallery demo panel.

Changes

Skeleton component

Layer / File(s)	Summary
Skeleton builder and View implementation src/components/skeleton/view.rs	Defines SkeletonShape, SkeletonAnimation, the Skeleton builder with configuration methods and render(), and the SkeletonView implementing ViewMarker/View (build/rebuild/teardown/message).
SkeletonWidget rendering and animation src/components/skeleton/widget.rs	Implements the widget's data model, setters, layout, animation-frame advancement, and painting logic for Pulse/Wave/None modes, hiding the node from accessibility.
Module wiring and re-exports src/components/skeleton/mod.rs	Adds module docs, conditional demo submodule under the gallery feature, and re-exports core skeleton API types.
ComponentKind registration src/components/mod.rs, src/lib.rs	Registers the skeleton module and re-exports, adds a Skeleton ComponentKind variant, and updates label() and all(); reformats an existing re-export list.
Skeleton demo panel and gallery wiring src/components/skeleton/demo.rs, examples/gallery.rs	Adds demo sections (text lines, shapes, animation comparison, secondary tone, loading card, form, table rows) assembled by a public panel() function, and wires it into the gallery's main pane match.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

• VoidstarSolutions/void_ui#2: Both PRs extend ComponentKind and the gallery match arm to add a new component variant.
• VoidstarSolutions/void_ui#53: Both PRs touch examples/gallery.rs and ComponentKind, with the sidebar generated from ComponentKind::all() directly affected by the new variant.
• VoidstarSolutions/void_ui#114: Both PRs extend ComponentKind and add a new branch in examples/gallery.rs to render a demo panel for the new component variant.

Suggested reviewers: zheylmun

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding a new skeleton component.
Docstring Coverage	✅ Passed	Docstring coverage is 84.62% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 133-skeleton-component

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Masaga]

Review — skeleton component

Really clean, idiomatic work — textbook two-layer split, #[must_use] builder, theme passed at .render(), rebuild diffs each field to a targeted set_* mutation, and the anim loop mirrors SpinnerWidget idiom-for-idiom. A couple of the things I suspected were bugs turned out to be correct convention-matching: measure()'s _ => Length::px(0.0) fill fallback is identical to separator, and the u32::try_from(interval)… nanosecond handling is copied verbatim from spinner. Nice.

One thing I'd treat as a change request, and a few follow-ups.

1. Tests — the one blocker by our bar

There are no #[cfg(test)] tests in the PR, and there's genuinely testable pure logic here:

• Skeleton::render defaulting — height → size_body * 1.2, color → surface_hi/surface_2 by secondary, explicit color overriding secondary, circle() setting w == h == diameter, radius default.
• animated(bool) → Pulse / None mapping.
• Ideally a masonry TestHarness smoke test that mount doesn't panic and the hidden-from-AT node holds.

We've been unit-testing this kind of behavior everywhere else (row_click Enter fallback, data_grid alignment, collection id resolution), so this is really just holding skeleton to the same line.

Happy to write these for you — say the word and I'll either push to this branch or hand you a ready-to-drop test module, whichever you prefer.

2. animated(true) silently clobbers .wave() (minor API sharp edge)

.wave().animated(true) resolves to Pulse, discarding the wave. It's documented, but it's an order-dependent footgun. Could make animated(true) a no-op when already animating (only false → None is unambiguous).

3. Reduced motion — follow-up issue, not a blocker here

Pulse/wave animate unconditionally; the only opt-out is per-instance .animated(false). prefers-reduced-motion / WCAG 2.3.3 wants this suppressible. This is a codebase-wide gap — spinner has the same behavior — so not fair to pin on this PR; worth filing an issue for a theme-level motion token both components honor.

4. A11y: no loading cue vs. spinner (doc-worthy)

node.set_hidden() makes each skeleton invisible to assistive tech — defensible (beats empty generic containers), but spinner exposes Role::ProgressIndicator, so a screen full of skeletons announces nothing is loading while a spinner would. The host has to supply aria-busy / a live region. Worth stating that expectation in the module docs.

5. Repaint scales with count (note, not a blocker)

Each skeleton runs its own 60fps request_anim_frame + full repaint. Unlike spinners, skeletons show up in bulk (a 50-row loading table = 50 always-repainting widgets). Matches spinner precedent so fine to ship, but a future shared-clock/coalesced-repaint pass may be worth it.

Nits: the doc example is duplicated verbatim in mod.rs and view.rs; all skeletons pulse in phase-lock (t: 0.0) which can read a touch mechanical vs. a slight per-instance stagger — pure taste.

Net: great component, only #1 stands between it and our usual bar. Everything else is a follow-up issue, a doc line, or optional polish.

_{🤖 Review generated by Claude Code, posted on Chris's behalf.}