Loading Skeleton

Loading placeholder that keeps the same footprint as the final content.

LoadingSkeleton expects the Luke UI theme class at the app or root level. See Getting Started.

Use it when loading content should keep the same footprint as the loaded state. Text renders as an inline skeleton. Elements keep their layout while the skeleton surface is painted over them.

All mounted skeletons use the same pulse timing, even when they mount at different times.

Best practices

Loading state

isLoading defaults to true. Pass isLoading={false} when content is ready.

<LoadingSkeleton isLoading={false}>
	<Button>Submit</Button>
</LoadingSkeleton>

Multi-line text

Wrap text directly when the copy spans more than one line. Each line gets its own skeleton shape.

Element type

LoadingSkeleton renders a span by default. Use as when the surrounding markup needs another element.

LoadingSkeletonProvider

Use LoadingSkeletonProvider when one loading state controls a group of skeletons. The provider value overrides descendant isLoading props.

Border radius

Use borderRadius when the wrapped child has no radius, but the visible control inside it does.

Custom dimensions

Wrap an element with explicit dimensions when you need a placeholder for a fixed shape, such as an avatar.

Accessibility

While loading, skeleton content is hidden from assistive technology and cannot be focused or clicked. LoadingSkeleton sets aria-hidden, inert, tabIndex={-1}, and disables pointer events.

Props