@chakra-ui/skeleton

Basic Skeleton

This feature allows you to create a basic skeleton loader with a specified height. It is useful for indicating loading states for text or other content.

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

function BasicSkeleton() {
  return <Skeleton height="20px" />;
}

Skeleton Circle

This feature allows you to create a circular skeleton loader, which is useful for indicating loading states for avatars or profile pictures.

import { SkeletonCircle } from '@chakra-ui/react';

function CircleSkeleton() {
  return <SkeletonCircle size="10" />;
}

Skeleton Text

This feature allows you to create a skeleton loader for text content with multiple lines. You can specify the number of lines and the spacing between them.

import { SkeletonText } from '@chakra-ui/react';

function TextSkeleton() {
  return <SkeletonText mt="4" noOfLines={4} spacing="4" />;
}

Custom Skeleton

This feature allows you to create a custom skeleton loader by combining multiple skeleton components. It is useful for more complex loading states that involve multiple elements.

import { Box, Skeleton } from '@chakra-ui/react';

function CustomSkeleton() {
  return (
    <Box padding="6" boxShadow="lg" bg="white">
      <Skeleton height="40px" />
      <Skeleton mt="4" height="20px" />
      <Skeleton mt="4" height="20px" />
    </Box>
  );
}