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>

Colour

AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.

This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).

Light palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<Stack gap={1.5}>
		<H4>Skeleton: on light background</H4>
		<SkeletonBox height="80px" width="100%" />
	</Stack>
</Box>

Dark palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Stack gap={1.5}>
		<H4>Skeleton: on dark background</H4>
		<SkeletonBox height="80px" width="100%" />
	</Stack>
</Box>

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.