Skeleton Loader - React

View on Figma View on GitHub

import { SkeletonLoader } from '@sky-uk/ui-core';

The Skeleton Loader component is used to indicate that content is in the process of loading.

<Flex $flexDirection="column">
  <SkeletonLoader $type="rectangle" $height="100px"/>
  <SkeletonLoader $type="display-5"/>
  <SkeletonLoader $type="display-5"/>
  <SkeletonLoader $type="display-5"/>
</Flex>

<Flex $flexDirection="column">
  <SkeletonLoader $type="rectangle" $height="100px"/>
  <SkeletonLoader $type="display-5"/>
  <SkeletonLoader $type="display-5"/>
  <SkeletonLoader $type="display-5"/>
</Flex>

Props

SkeletonLoader

Prop	Type	Default	Description
$type	string	required	The $type prop is used to define which skeleton loader will be used. If set to a typography, the height is set to mock the relevant font. If set to rectangle, then the height and width can be determined by height and width

$type

The $type prop can be set to any typography size or rectangle

If using $type as a typography size, the $height of the skeleton loader is set and shouldn't be overwritten. This ensures that when SkeletonLoaders are stacked, they maintain the correct spacing to match the text.

<Flex $flexDirection="column">
    <SkeletonLoader $type="display-5" $width="80%" />
    <SkeletonLoader $type="body-lg" $width="80%" />
    <SkeletonLoader $type="body-lg" $width="80%" />
    <SkeletonLoader $type="body-lg" $width="80%" />
    <SkeletonLoader $type="body-lg" $width="80%" />
</Flex>

<Flex $flexDirection="column">
    <SkeletonLoader $type="display-5" $width="80%" />
    <SkeletonLoader $type="body-lg" $width="80%" />
    <SkeletonLoader $type="body-lg" $width="80%" />
    <SkeletonLoader $type="body-lg" $width="80%" />
    <SkeletonLoader $type="body-lg" $width="80%" />
</Flex>

If using $type="rectangle" then the default height (50px) and width (100%) are applied.

<SkeletonLoader $type="rectangle"/>

<SkeletonLoader $type="rectangle"/>

Or define the size using the system modifiers as below.

<SkeletonLoader $type="rectangle" $height="100px" $width="200px"/>

<SkeletonLoader $type="rectangle" $height="100px" $width="200px"/>

Accessibility

When using a skeleton loader, it's important to ensure that assistive technologies properly convey its purpose. Since skeleton loaders do not contain meaningful content, they should be hidden from screen readers to prevent confusion. Below is an example of how SkeletonLoaders should be used on a page.

function Example() {
  const [loading, setLoading] = React.useState(true);

  const handleButtonClick = () => {
    setLoading(!loading);
  };

  return (
    <Flex $flexDirection="column" $gap={5}>
      <Button onClick={handleButtonClick} $maxWidth="300px">Click to change loading state</Button>

      {loading ? (

          <Flex $flexDirection="column" aria-busy="true">
          <VisuallyHiddenText>Loading specific page details...</VisuallyHiddenText>
          <SkeletonLoader $type="display-1" $width="60%"/>
          <SkeletonLoader $type="display-5"/>
          <SkeletonLoader $type="body-lg"/>
          <SkeletonLoader $type="body-lg" $width="70%"/>
          </Flex>

      ) : (
          <Flex $flexDirection="column">
          <Text $fontSize="display-1">Lorem ipsum</Text>
          <Text $fontSize="display-5">Egestas magna adipiscing taciti nulla imperdiet ridiculus.</Text>
          <Text $fontSize="body-lg">Ullamcorper primis faucibus pretium tempor condimentum fames aliquam nisl nostra. Vel egestas malesuada, ante natoque donec malesuada facilisis accumsan.</Text>
          </Flex>
      )}
    </Flex>
  );
}

function Example() {
  const [loading, setLoading] = React.useState(true);

  const handleButtonClick = () => {
    setLoading(!loading);
  };

  return (
    <Flex $flexDirection="column" $gap={5}>
      <Button onClick={handleButtonClick} $maxWidth="300px">Click to change loading state</Button>

      {loading ? (

          <Flex $flexDirection="column" aria-busy="true">
          <VisuallyHiddenText>Loading specific page details...</VisuallyHiddenText>
          <SkeletonLoader $type="display-1" $width="60%"/>
          <SkeletonLoader $type="display-5"/>
          <SkeletonLoader $type="body-lg"/>
          <SkeletonLoader $type="body-lg" $width="70%"/>
          </Flex>

      ) : (
          <Flex $flexDirection="column">
          <Text $fontSize="display-1">Lorem ipsum</Text>
          <Text $fontSize="display-5">Egestas magna adipiscing taciti nulla imperdiet ridiculus.</Text>
          <Text $fontSize="body-lg">Ullamcorper primis faucibus pretium tempor condimentum fames aliquam nisl nostra. Vel egestas malesuada, ante natoque donec malesuada facilisis accumsan.</Text>
          </Flex>
      )}
    </Flex>
  );
}

System Modifiers

The SkeletonLoader component also accepts props applied using the following system modifiers: