Loading Skeleton

Use LoadingSkeleton when content is loading but its layout is known. Wrap the content that will appear so the placeholder occupies the same space.

With text

Wrap text itself, rather than its parent. The placeholder then follows each line of text. If you wrap the parent element, the skeleton covers the whole block instead.

This matters most for copy that wraps across several lines. LoadingSkeleton renders non-element children inline, so it follows the text without changing the line layout.

With components

Wrap an element to keep its dimensions while the skeleton covers it. Use this for controls, avatars, and other content with a fixed shape.

Set radius when the direct child has square corners but a visible descendant is rounded. This is useful when a TextField is the child because its input control is rounded inside the field wrapper.

Loading state

isLoading is true by default. Set it to false when the content is ready. The component then returns its children without a wrapper.

<LoadingSkeleton isLoading={isLoading}>
	<Button>Save changes</Button>
</LoadingSkeleton>

Use LoadingSkeletonProvider when one loading state controls a section. Its value overrides isLoading on every descendant skeleton, so a section changes together.

Element type

LoadingSkeleton renders a span by default. Set elementType when the parent requires another element, such as an li inside a list.

Accessibility

While loading, the content is hidden from assistive technology, removed from the tab order, and cannot receive pointer input. It becomes available again when isLoading is false.