Components

Skeletons

Skeletons are loading placeholder components that let you emulate the loaded product.

Examples

A simple skeleton loader

<Stack>
  <Skeleton height={6} />
  <Skeleton height={6} />
  <Skeleton height={6} />
</Stack>

A more complex example

<SimpleGrid columns={[1, 2]} gap={3}>
  <StaticCard border borderWidth={1} p={3}>
    <Stack>
      <SkeletonCircle boxSize={6} mr={3} />
      <SkeletonText noOfLines={3} width="100%" />
    </Stack>
  </StaticCard>
  <StaticCard border borderWidth={1} p={3}>
    <Stack>
      <SkeletonCircle boxSize={6} mr={3} />
      <SkeletonText noOfLines={3} width="100%" />
    </Stack>
  </StaticCard>
</SimpleGrid>