# Loading skeletons drawn from the real components

The web app's hand-built loading boxes are replaced by skullet: each loading state is measured from a sample of the component it stands in for, so nothing moves when the data arrives.

Every loading state in the authenticated web app is now drawn from the component it stands in for. [skullet](https://skullet.lochie.me) lays a sample of the real content out unseen, measures it and draws a bar for every line of text, a block for every control, in exactly the space the content will take; when the data lands the content crossfades into place and nothing moves. The sessions and passkeys cards in settings, the App Update form, the todo board and calendar, the dashboard KPI cards and activity feed, the files gallery, the sidebar account button and the billing page all use it. The shadcn `Skeleton` box stays only where `packages/ui` needs it internally.

The wrapper lives in `apps/web/src/platform/skeleton/`: `MeasuredSkeleton` adds the translated accessibility label, and one provider in the signed-in layout sets the reveal and the theme. The colours are tokens (`--skullet-base`, `--skullet-highlight` in `globals.css`), so dark mode follows the app's `.dark` class rather than the OS scheme, and the shimmer holds still under `prefers-reduced-motion`. Each feature keeps its sample in a `<feature>.samples.ts` file with filler text and clearly fake values; it is never read, only laid out. The library is a 19.6 KiB gzip chunk that only signed-in pages load, plus a few hundred bytes on each route that uses it; the landing and the other public pages do not download it. See [Design patterns](/docs/development/design) for where it sits among the other sources.