Skeleton

---

The EuiSkeleton components are placeholder components for content which has yet to load. They provide meaningful previews, avoid layout content shifts, and add accessible announcements to screen readers when content is done loading.

note

Using the contentAriaLabel prop

The contentAriaLabel prop should be used to help describe the type of content that is loading to screen reader users. If you do not provide a descriptive label and have multiple loading skeletons on the page, screen reader users may hear a multitude of “Loaded” messages in a row, with no meaningful indication of what actually loaded.

Text

Use EuiSkeletonText to display a placeholder for multiple lines of text.

Title

Use EuiSkeletonTitle to display a placeholder for heading titles.

Circle

Use EuiSkeletonCircle to display a circular preview, mainly for avatars.

Rectangle

EuiSkeletonRectangle allows you define a large and customizable shape via its width, height, and borderRadius props.

Combining multiple skeletons

EuiSkeletonLoading is a light wrapper around the EuiSkeleton components that handles loading accessibility and flipping between skeleton and loaded content.

As you may have noticed in the previous demos, toggling multiple skeletons to their loaded state all at once triggers multiple queued screen reader announcements, which can be annoying to SR users.

To circumvent this, use EuiSkeletonLoading to handle a single parent-level isLoading state. EuiSkeleton children passed to the loadingContent should not have their own isLoading props or children.

Customizing screen reader announcements

EuiSkeleton components assume that the page starts as loading and transitions to loaded, and the default screen reader experience is set up accordingly (announceLoadedStatus={true}).

In scenarios where that is not the case (i.e., transitioning to loading), you can customize what statuses are announced to screen readers by setting announceLoadingStatus to true, or announceLoadedStatus to false. Submitting the below example announces a loading status, but not a loaded status.

As an optional escape hatch, ariaLiveProps is also available and accepts any EuiScreenReaderLive props.