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.