Skeleton

The skeleton component is used to provide a low fidelity representation of content before it appears on the page, and improves perceived load times.

When waiting for an action to be completed, use the spinner component.

Import

import { Skeleton } from '@outfitio/outkit';

Usage

Skeleton can be used as a standalone component

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

Useful when fetching remote data

import { Box } from '@outfitio/outkit';
function Card() {
  const { data, loading, error } = useRemoteData();
  if (error) return <Box children="error" />;
  return (
    <Box>
      <Skeleton isLoaded={!loading}>
        <Heading>{data.title}</Heading>
      </Skeleton>
    </Box>
  );
}

Skipping the skeleton when content is loaded

You can prevent the skeleton from rendering using the isLoaded prop

Best Practice

Skeleton content should try to match the width and height and mimick the layout of the content being loaded so it gives an accurate representation.