Implementing Skeleton Components in React

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:

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

Good UX Means Good Business

In a world where technology is rapidly advancing and user expectations are rising, it’s no longer enough to have an average user experience; to delight your users and surpass your competition you must strive for the exceptional.

Get the Guide

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

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 !!!