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 directly when it spans several lines. The skeleton then follows the final line breaks.

With components

Wrap a fixed-size element to keep its shape while it loads.

Set radius when the direct child has square corners but a visible descendant has rounded corners. Use radius="control" for a TextField, whose input control has rounded corners inside the field wrapper.

Provider

Use LoadingSkeletonProvider when one loading state controls a section. Pass isLoading to a child when it needs a different loading state.

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 its content from assistive technology and blocks focus and pointer input. It shows the content again when isLoading is false.

API

LoadingSkeletonProps

LoadingSkeletonProviderProps