Skeleton

Shapes that stand in for content while it loads, in its layout, so the page doesn't jump when it arrives. Specification: docs/components/skeleton.md

Basics

A .canon-skeleton is a line of text by default, as long as its container (set its width to vary it). data-shape="block" stands for a control or a tag, "circle" for an avatar or a round button, "square" for a checkbox. Skeletons are still, and show only after 0.3s, so a quick load never flashes them. Always aria-hidden="true": the region that loads says so with aria-busy="true".

Size

data-size on the skeleton or a container: blocks, circles and squares take the control's and icon's sizes.

Sweep

data-motion="sweep" on the skeleton or a container adds a lighter sweep passing across, for loads that can take a while. It stops with reduced motion.

In components

A Data Table draws its own skeleton rows while it is aria-busy.