Skeletons

<koala-skeleton shape="Title" />
<koala-skeleton shape="Text" class="w-96" />
<koala-skeleton shape="Card" />

Combine shapes to rough-match the layout that's about to arrive. Use class="w-…" to vary the widths so the skeleton doesn't look uniform.

Pattern page — most pages don't render <koala-skeleton> by hand. They opt into an auto-generated archetype skeleton during Alpine-AJAX navigation by declaring a skeleton archetype on the nav link (List, form, etc.); skeletons.js swaps it in while the target loads.

<koala-nav-item href="/transactions" skeleton="List" label="Transactions" />

Aggregated skeletons that mirror whole page layouts, composed from the shapes above. Render one of these during first paint instead of hand-assembling <koala-skeleton> blocks per page — they track the real title / toolbar / table and title / tabs / content / summary-rail shapes, so the live content lands without a reflow. They live in the design system as shared partials.

<partial name="_SkeletonListTemplate" />

Mirrors a listing page — page title + count, a search + filter + sort toolbar, then a table card of rows.

<partial name="_SkeletonDetailTemplate" />

Mirrors a view page — title + status badge, a tab strip, then a wide content card beside a summary info rail.

<partial name="_SkeletonDashboardTemplate" />

Mirrors a dashboard — page title, a row of stat cards, then a wide chart panel beside a compact activity list.

<partial name="_SkeletonSettingsTemplate" />

Mirrors a settings page — a vertical section-nav rail beside a card of grouped label / control rows and a save action.

Two ways to get a page skeleton. For Alpine-AJAX navigation the preferred path is the archetype mechanism above — declare skeleton="List" or skeleton="Detail" on the nav link and skeletons.js swaps the matching shape into <main> while it loads (the JS list /detail archetypes mirror these same templates). When you instead need a server-rendered first-paint placeholder — e.g. inside an Alpine-AJAX target before its content arrives — render the partial directly with <partial name="_SkeletonListTemplate" />.