Skeleton

A loading state for a component to display an animated placeholder in place of the component, to convey data is being fetched and prevent layout shift.

React

import { Skeleton } from '@hoverinc/design-system-react-web';

Usage

You can use it as a standalone component.

Or to wrap another component to take the same height and width.

Useful when fetching remote data.

import { Box } from '@hoverinc/design-system-react-web';

const Card = () => {
  const { data, loading, error } = useRemoteData();

  if (error) return <Box children="error" />;

  return (
    <Box>
      <Skeleton isLoaded={!loading}>
        <Heading>{data.title}</Heading>
      </Skeleton>
    </Box>
  );
};

Color mode

By default, Skeleton uses the color mode context to determine whether to display a dark or light placeholder animation. Pass colorMode to manually force a color mode.

Displaying content once loaded

You can prevent the skeleton from rendering using the isLoaded prop.

<Skeleton isLoaded>
  <span>Content has been loaded</span>
</Skeleton>

Fade duration

With the fadeDuration prop, you can control the duration of the content fading into view. The value in this prop is a number representing seconds which is part of the animation style prop that is rendered to the component. The default value is 0.4 seconds.

This requires the isLoaded prop, and the animation is best visible when the isLoaded prop is toggled to true.

Design System

Settings