ReactJS UI Ant Design Skeleton Component

Ant Design, also known as AntD, is a popular React UI library that provides the Skeleton component that is used for improving the user experience during content loading. It provides a placeholder that looks like the shape of the content is loaded, making the waiting period smoother for users.

In this article, we’ll explore the basics of using the Ant Design Skeleton component and discuss its features.

What is the Ant Design Skeleton Component?

The Skeleton component in Ant Design serves as a loading placeholder that simulates the layout of the actual content being fetched. When data is being loaded, a skeleton screen (usually consisting of grey boxes resembling text, images, or other content) is displayed. Once the data has been fetched, the real content replaces the skeleton screen.

Skeletons help create a smoother user experience by reducing the perceived loading time and keeping the user interface responsive.

Skeleton Props:

• active: It is used to show the animation effect.
• avatar: It is used to show an avatar placeholder.
• loading: It is used to display the skeleton when it is set to true.
• paragraph: It is used to show the paragraph placeholder.
• round: It is used to show the paragraph and title radius when it is set to true.
• title: It is used to show the title placeholder.

Skeleton.Avatar Props:

• active: It is used to show the animation effect.
• shape: It is used to set the shape of an avatar.
• size: It is used to set the size of the avatar.

Skeleton.Title Props:

• width: It is used to set the width of the title.

Skeleton.Paragraph Props:

• rows: It is used to set the row count of paragraphs.
• width: It is used to set the width of paragraph.

Skeleton.Button Props:

• active: It is used to show the animation effect.
• shape: It is used to set the shape of the button.
• size: It is used to set the size of the button.

Skeleton.Input Props:

• active: It is used to show the animation effect.
• size: It is used to set the size of the input.

Steps To Implement Ant Design Skeleton Component

Step 1: Create a React application using the following command:

npx create-react-app foldername
cd foldername

Step 2: Install the required module using the following command

npm install antd

Project Structure

Depedencies

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "antd": "^5.21.2",
 "react": "^18.3.1",
 "react-dom": "^18.3.1",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
 }

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Run the application using the following command

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: