Skeleton

Import#

import { Skeleton, SkeletonText, SkeletonCircle } from '@volue/wave-react';

Background#

Skeletons provide an alternative to the Spinner component. Rather than showing an abstract widget, they are used in place of content being loaded creating anticipation of what is to come.

Skeletons improve perceived performance​, which tends to improve user experience by reducing load time frustration and making the page feel more responsive.

Examples#

Basic#

The default Skeleton renders rectangular block.

The width will be 100% unless a different width is specified. A standalone Skeleton that doesn't wrap any content, inserts a zero-width space character so by default it will have the same height as a single line of text by adopting the line-height. You should use the height prop to change the height of the Skeleton.

Text#

SkeletonText can be used to represent a line or multiple lines of text. Useful for rendering a placeholder for text content such as paragraphs.

SkeletonText has rounded corners and provides control of content length. Use lines property to simulate size of loaded content. Last line is visually shorter than others.

Height of SkeletonText is the same height as a single line of text unless an explicit height is specified. This allows for inheriting the size of text from a parent element.

Circle#

SkeletonCircle renders a cirular skeleton. Useful as a placeholder for graphic elements such as icons, avatars and circular images. Use size property to adjust the size.

Content wrapping#

When part of the content is known you don't have to use standalone Skeleton components. In these instances, you can pass children and the Skeleton component will infer its size from them.

Loaded state#

Use isLoaded property to reveal content wrapped inside the Skeleton.

Alternatively use standard conditional rendering​ to render skeleton placeholder or content.

Complex example#

Accessibility features#

• ​

  The animation can be disabled by enabling the prefers-reduced-motion setting at the OS level.

• ​

  Skeleton Loader has the aria-busy attribute set to true by default to indicate that the content is loading.

API Reference#

Skeleton#

SkeletonText#

SkeletonCircle#