Live demo — this example is server-driven; run the showcase locally for the interactive version.

Skeleton loading

A server-driven loading state. While an HTMX request is in flight, a skeleton placeholder is shown via hx-indicator — its shape mirrors the real content so there is no spinner and no layout shift when the response swaps in. The skeleton lives entirely in server-rendered markup; HTMX only toggles a class.

Examples

On-demand profile

Click to fetch a profile card. The server is artificially slow (~700 ms) so the skeleton is visible before the real content replaces it.

No profile loaded yet.

Documentation

Usage

hx-indicator does the toggling. The placeholder is hidden by default (pha-c-skeleton-loading) and becomes visible while HTMX marks the request in flight; the swap target sits next to it and receives the real markup. Build the placeholder from skeleton components sized to match the incoming content.

Skeletons over spinners. Because the placeholder occupies the same box as the final content, nothing jumps when the response lands — reserve spinner for actions with no predictable shape.

See the server side in HtmxRoutes.java on GitHub