@chakra-ui/skeleton

What is @chakra-ui/skeleton?

@chakra-ui/skeleton is a component library that provides skeleton loading indicators for React applications. These skeletons are used to show placeholder content while the actual content is being loaded, improving the user experience by giving a visual indication that content is on its way.

What are @chakra-ui/skeleton's main functionalities?

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>
  );
}

Other packages similar to @chakra-ui/skeleton

react-loading-skeleton

react-loading-skeleton is a popular package for creating skeleton loading screens in React applications. It offers a simple API and is highly customizable. Compared to @chakra-ui/skeleton, it provides more flexibility in terms of styling and customization but lacks the built-in design consistency provided by Chakra UI.

react-content-loader

react-content-loader allows you to create SVG-based skeleton loaders. It provides a wide range of pre-built loaders and also allows you to create custom loaders using an online tool. Compared to @chakra-ui/skeleton, it offers more advanced customization options and the ability to create complex SVG animations, but it may require more effort to integrate and style.

material-ui

Material-UI is a comprehensive React component library that includes a Skeleton component. It provides a wide range of UI components following the Material Design guidelines. Compared to @chakra-ui/skeleton, it offers a more extensive set of components and design guidelines but may be more complex to set up and use.

README

@chakra-ui/skeleton

Skeleton page is used to provide a low fidelity representation of the user interface (UI) before content appears on the page

A skeleton screen is a user experience pattern that’s shown to reduce load time frustration. They create better “perceived performance”.

Installation

yarn add @chakra-ui/skeleton

# or

npm i @chakra-ui/skeleton

Import component

import { Skeleton } from "@chakra-ui/skeleton"

Usage

<Skeleton>
  <span>Chakra ui is cool</span>
</Skeleton>