Skip to content
Docs

Command palette

Jump to a page or view, or find a todo by name.

Changelog

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.

Markdown

Every loading state in the authenticated web app is now drawn from the component it stands in for. skullet 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 for where it sits among the other sources.

Edit on GitHubDocumentation is in English.