Loading

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

<Box height="300px" width="100%" border style={{ position: 'relative' }}>
	<LoadingBlanket label="Component loading state" />
</Box>

The LoadingBlanket component can be used indicate the loading state of a component or page.

By default this component is positioned absolutely, so you will need to make sure your component container is positioned relatively.

Adding the fullScreen prop will position the component over the whole screen. We recommend limiting the use of this pattern to certain use cases such as before or after a redirection.

<LoadingBlanket fullScreen label="Page loading state" />

Do

• use for charts and components that are loading.

Don’t

• use full-screen blanket for partially loaded pages – use patterns such as Skeleton.

Loading Dots

The LoadingDots component can be used on its own, for example when fetching data from a remote source.

<Stack gap={2} alignItems="center">
	<LoadingDots size="sm" label="Loading" role="status" />
	<LoadingDots size="md" label="Loading" role="status" />
	<LoadingDots size="lg" label="Loading" role="status" />
</Stack>

Related components

• Skeleton – Skeletons are visual placeholders for information while data is still loading.

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.