Skeleton

Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.

Import

import { Skeleton } from '@trendmicro/react-styled-ui';

Usage

Variants

This component provides 3 shape variants: text, rect, and circle.


EDITABLE EXAMPLE
<Stack display="inline-flex" direction="column" spacing="4x">
 <Skeleton variant="text" />
 <Skeleton variant="rect" width={200} height={100} />
 <Skeleton variant="circle" width={40} height={40} />
</Stack>

Animations

The animation is disabled by default. You can change the animation effect to pulse or wave.


EDITABLE EXAMPLE
<Stack direction="column" spacing="4x" width={300}>
 <Box>
 <Skeleton />
 <Skeleton animation="pulse" />
 <Skeleton animation="wave" />
 </Box>
</Stack>

Inferring dimensions

In addition to accepting width and height props, the component can also infer the dimensions.


EDITABLE EXAMPLE
function Example() {
 return (
 <Flex>
 <Stack direction="column" spacing="4x" flex="none" width={300}>
 <Text size="4xl"><Skeleton /></Text>
 <Text size="xl"><Skeleton /></Text>
 <Text><Skeleton /></Text>
 </Stack>
 <Space width="8x" flex="none" />
 <Stack direction="column" spacing="4x" flex="1">
 <Text size="4xl">Heading 8</Text>
 <Text size="xl">Heading 4</Text>
 <Text>body text</Text>
 </Stack>
 </Flex>
 );
}

Props

Name	Type	Default	Description
variant	string	'text'	The type of content that will be rendered. One of: `'text'`, `'rect'`, `'circle'`
animation	string		The animation effect. One of: `'pulse'`, `'wave'`
width	number \| string		Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
height	number \| string		Height of the skeleton. Useful when you don't want to adopt the skeleton to a text element.