Skeleton

import { ... } from '@ag.ds-next/react/skeleton';

Do

• use to reduce page jumpiness as different parts of the page load
• map the size of the Skeleton to the shape of the final user interface
• use an animation to indicate something is happening.

Don’t

• use a Skeleton to represent components that contain other components such as cards, tables, accordions etc.

SkeletonHeading

The SkeletonHeading component can be used as a placeholder for any Heading component.

The height of the component is determined by the type property.

The width of the element can be customised using the width property.

<Stack gap={1.5}>
	<SkeletonHeading type="h1" />
	<SkeletonHeading type="h2" />
	<SkeletonHeading type="h3" />
	<SkeletonHeading type="h4" />
	<SkeletonHeading type="h5" />
	<SkeletonHeading type="h6" />
</Stack>

SkeletonText

The SkeletonHeading component can be used as a placeholder for any Text component.

The height of the component can be controlled using using the fontSize and lineHeight properties.

The width of the element can be customised using the width property.

<Stack gap={1.5}>
	<SkeletonText fontSize="xxxl" lineHeight="default" />
	<SkeletonText fontSize="xxl" lineHeight="default" />
	<SkeletonText fontSize="xl" lineHeight="default" />
	<SkeletonText fontSize="lg" lineHeight="default" />
	<SkeletonText fontSize="md" lineHeight="default" />
	<SkeletonText fontSize="sm" lineHeight="default" />
	<SkeletonText fontSize="xs" lineHeight="default" />
</Stack>

SkeletonBox

The SkeletonBox component allows you to create custom shapes by providing full control over both the width and height.

<Stack gap={1.5}>
	<SkeletonBox width="150px" height="150px" />
	<SkeletonBox width="50%" height="50px" />
</Stack>

Related components

• Loading – Loading indicators inform users their action is being processed.

Related patterns

• Loading, empty and error states – When loading data in an application, it is important to consider and design for loading, empty, and error states. These states will help set user expectations and prevent them from assuming that the interface is unresponsive.