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.

Wrap text itself, rather than its parent, when it can span several lines. The placeholder then follows each line without changing the 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 has rounded corners. A TextField is a typical case, because its input control has rounded corners 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, LoadingSkeleton hides content from assistive technology, removes it from the tab order, and blocks pointer input. It becomes available again when isLoading is false.

API

LoadingSkeletonProps

LoadingSkeletonProviderProps