---
title: "Skeleton Loader — React"
canonical: https://sky-ui.cf.sky.com/components/skeleton-loader/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Skeleton Loader — React

Used to indicate that content is in the process of loading.

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

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

```tsx
<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](/core/system/height) and [width](/core/system/width) |

### $type

The `$type` prop can be set to any [typography size](/foundations/typography) or `rectangle`

If using `$type` as a [typography size](/foundations/typography), 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.

```tsx
<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.

```tsx
  <SkeletonLoader $type="rectangle"/>
```

Or define the size using the system modifiers as below.

```tsx
  <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.

```tsx
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:

- [border-radius](/core/system/border-radius/)
- [height](/core/system/height/)
- [margin](/core/system/margin/)
- [width](/core/system/width/)