Skeleton

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

Skeleton components are not read out to screen readers by default, so it is important for you to provide meaningful context for screen reader users.

By using the VisuallyHidden component, we can indicate to screen readers that an element is in a loading state.

<Card shadow>
	<CardInner>
		<Stack gap={1}>
			<SkeletonHeading type="h3" width="50%" />
			<SkeletonText fontSize="sm" width="25%" />
			<VisuallyHidden>Loading</VisuallyHidden>
		</Stack>
	</CardInner>
</Card>

References

• More Accessible Skeletons by Adrian Roselli.