Skeleton

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

Import

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

Usage

Variants

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

EDITABLE EXAMPLE
copy
<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>
<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
copy
<Stack direction="column" spacing="4x" width={300}>
  <Box>
    <Skeleton />
    <Skeleton animation="pulse" />
    <Skeleton animation="wave" />
  </Box>
</Stack>
<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
copy
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>
  );
}
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