Skip to main content

Experience Design

Implementing Skeleton Components in React

Tablet, Digital Marketing And Woman Networking On Social Media Or Content Marketing With Seo Algorithm Knowledge. Social Network, Communication And Manager Typing A Post For Online In Office Building

In our last blog, we have gone through the concept of what is skeleton component in React. Now we will continue to implement skeleton component in React.

The component supports 4 shape variants:

  • text(default): represents a single line of text (you can adjust the height via font size).
  • circular, rectangular, and rounded: come with different border radius to let you take control of the size.

Implementing Skeleton Components

Let’s get started with creating one skeleton component.

Step 1: 

You will have to install the @mui/material module in your react project.

npm install @mui/material

npm i @emotion/react @emotion/styled

Step 2: 

We will be creating one skeleton component for text. Open App.js file and add below code

import { Skeleton } from "@mui/material";
import React from "react";
  
export default function App() {
    return (
        <div>
            <h4>
                Skeleton component for Text
            </h4>
            <Skeleton variant="text" width={200} height={50} />
        </div>
    );
}

Here we can add width and height for the skeleton. Output will be like this:

Text Skeleton

Similarly for Rectangle, Circle and Rounded component variant, we can add skeleton code as below.

<Skeleton variant=”rectangular” width={300} height={100} />

<Skeleton variant=”circular” width={40} height={40} />

<Skeleton variant=”rounded” width={210} height={60} />

Now let’s create a skeleton component for real-time data. For this we will be using one React plugin react-content-loader

Now What is React-Content-Loader?

react-content-loader is a React component library used to create placeholder loading states, often referred to as “skeleton screens” or “skeleton loaders.” The library provides a set of customizable components that mimic the structure of your actual content while it’s loading. This helps maintain the overall layout of a page and provides a better user experience compared to a blank or empty space.

Here’s a basic example of using react-content-loader:

Step 1: npm install react-content-loader

Step 2: Create one SkeletonComponent.js file and add the code below

import React from 'react';
import ContentLoader from 'react-content-loader';

const SkeletonComponent = () => (
  <ContentLoader
    speed={4}
    width={400}
    height={200}
    viewBox="0 0 400 200"
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb">

    <rect x="0" y="0" rx="3" ry="3" width="400" height="10" />
    <rect x="0" y="20" rx="3" ry="3" width="400" height="10" />
    <rect x="0" y="40" rx="3" ry="3" width="400" height="10" />
    <rect x="0" y="60" rx="3" ry="3" width="400" height="10" />
    <rect x="0" y="80" rx="3" ry="3" width="400" height="10" />
    <rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
    {/* Add more shapes as needed */}
  </ContentLoader>
  
);

export default SkeletonComponent;

Step 3: Create one file as DataList.js and add below code

import React, { useState, useEffect } from 'react';
import SkeletonComponent from './SkeletonComponent';

const DataList = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <SkeletonComponent />
      ) : (
        <ul>
          {data?.map(post => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default DataList;

Step 4: In the App.js, add below code

import React from 'react';
import DataList from './DataList';

const App = () => {
  return (
    <div>
      <h1>Data List</h1>
      <DataList />
    </div>
  );
};

export default App;

Data List Image

Data List Image

In this way, we can use the react-content-loader tool to enhance the user experience by providing a visual representation of content loading.

By using a Skeleton Component, react applications can manage loading states gracefully, contributing to a more engaging and user-friendly interface.

Thanks for reading !!!

Thoughts on “Implementing Skeleton Components in React”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Tejasvini Agare

Tejasvini is a Front-end Technical Consultant working with the Dish Team and is passionate about exploring new UI frameworks. She actively shares her knowledge with the team to enhance their projects and optimize user experiences.

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram