Skeleton

Features

• Automatically matches the shape of its children.
• Allows setting a width and height for custom elements.

When to use

At Pleo, we use skeleton loading in cases where the user experience can be enhanced by displaying placeholders for content during data fetching. This can help reduce perceived loading times and maintain layout consistency. Learn more about when to use skeleton loading.

Examples

With children

The Skeleton component is commonly used to wrap other components, automatically presenting them in a loading state. It preserves the dimensions of its children and also hides and disables any nested interactive elements.

<Skeleton>
    <Switch />
</Skeleton>

Size

Use the width and height props to manually control the size of the skeleton.

<Skeleton width="48px" height="48px" />

With text

When using a Skeleton with text, wrap the text itself, rather than its parent element. This ensures that the text is replaced with a placeholder of the same size:

<Text>
    <Skeleton>
        Issue Pleo's smart company cards with individual spending limits. Your team can buy what
        they need, while we sort the paperwork automatically.
    </Skeleton>
</Text>

Border radius

For components containing complex markup, the Skeleton may not always accurately determine the border radius of its children. In such cases, you can manually supply a borderRadius to match that of the children.

<Skeleton borderRadius={8}>
    <Input />
</Skeleton>

Full example

<Stack space={24}>
    <Inline space={24} style={{width: '100%'}} justifyContent="space-between" alignItems="center">
        <Skeleton>
            <Avatar src={jeppe} />
        </Skeleton>
    </Inline>
    <Text variant="body-l">
        <Skeleton borderRadius={8}>Skeletons are pretty cool!</Skeleton>
    </Text>
    <Text>
        <Skeleton borderRadius={4}>
            They can be used to replace content with same shape placeholders which indicate a
            loading state. They can furthermore help improve perceived performance.
        </Skeleton>
    </Text>
    <FormControl>
        <Skeleton borderRadius={4}>
            <FormControl.Label>Your skeleton name</FormControl.Label>
        </Skeleton>
        <Skeleton borderRadius={8}>
            <Input name="skeleton-name" placeholder={`E.g. "Crazy Bones" or "Skeletor"`} />
        </Skeleton>
    </FormControl>
    <ButtonGroup>
        <Skeleton>
            <Button variant="primary">Start loading</Button>
        </Skeleton>
        <Skeleton>
            <Button variant="secondary">Abort</Button>
        </Skeleton>
    </ButtonGroup>
</Stack>

Accessibility

The component is designed with accessibility in mind, ensuring that it is not focusable and does not distract assistive technologies when loading content. The component uses the aria-hidden attribute to hide itself from screen readers while it's in a loading state. Additionally, it leverages the inert attribute to prevent user interaction with the component until it's fully loaded, making the page more accessible and navigable for all users.