Skeleton

Remarks

The one shape every loading placeholder in the app is composed from. It draws a rounded rectangle in the theme's muted fill and pulses; it has no size of its own, so callers give it one through className and build a shell by arranging several of them in the real layout's containers.

It is deliberately silent. No role, no accessible name, no text. A lesson shell holds a dozen of these and must announce "loading" once, not twelve times — that single announcement belongs to the shell's own live region, not to the shapes. Never add an aria-label here.

A placeholder is only useful if it traces the shape of what replaces it. Size these against the real component's own classes — same aspect ratio, same max-width, same breakpoints — so the arriving content fills positions that are already correct instead of re-laying the page out.