Built-in Skeleton loading placeholder (<StxSkeleton>)

[glennmichael123]

Summary

Animated loading placeholders that match content layout — for perceived performance during data fetching.

Usage

<!-- Basic shapes -->
<StxSkeleton width="200px" height="1rem" />
<StxSkeleton variant="circle" size="48px" />
<StxSkeleton variant="rect" width="100%" height="200px" radius="lg" />

<!-- Preset patterns -->
<StxSkeleton preset="card" />
<StxSkeleton preset="list-item" count="5" />
<StxSkeleton preset="avatar-text" />
<StxSkeleton preset="table" rows="5" cols="4" />

<!-- Conditional with loading state -->
<div :if="loading()">
  <StxSkeleton preset="card" count="3" />
</div>
<div :if="!loading()">
  <!-- real content -->
</div>

Props

• variant: text | circle | rect (default: text)
• preset: card | list-item | avatar-text | table | paragraph
• width, height, size (for circle)
• count — repeat the skeleton N times
• radius — border radius (sm/md/lg/full)
• animate — pulse (default) | wave | none

Implementation

• Pure CSS animation (pulse or shimmer wave)
• No JS runtime needed — fully static builtin
• Dark mode aware (lighter base in dark mode)

[glennmichael123]

Delivered via @stacksjs/components, which ships with every stx app and is auto-registered (no import needed in .stx files). See CLAUDE.md § "Reach for stx primitives before vanilla JS" for the full inventory; the relevant components for this request are documented there.

Closing as effectively delivered. If a specific behavior or API affordance from the original request is missing from the shipped components, please open a focused ticket against @stacksjs/components describing the exact gap — that's easier to track than a broad "make it a builtin" ask.