In today's digital world, users quickly become impatient when they encounter blank screens while waiting for content to load. However, with the help of ReactJS, we can create skeleton loading screens. They show users a preview of what's coming while the actual content loads quietly. For instance, when you open YouTube, you often see a skeleton animation that persists until the real content is fully loaded.

 

In this article, we will teach you how to create skeleton loading screens in ReactJS. There's no need to worry about confusing code – we'll keep it simple. Say goodbye to boring loading icons and hello to exciting skeleton designs!

 

Are you ready? So let's start.

 

• Step 1: Setting Up Your React Environment
• Step 2: Create the Project Files
• Step 3: Create the Skeleton Component
• Step 4: Create the DataList Component
• Step 5: Add the DataList Component to the App Component
• Step 6: Add the App Component to the index.js file
• Step 7: Run your App

 

 

Step 1: Setting Up Your React Environment

 

First, ensure you have Node.js and npm installed on your system. If not, download and install them from the Node.js official website.

 

Next, create a new React application using Create React App:

 

npx create-react-app skeleton-loader-example
cd skeleton-loader-example
npm start

 

 

Step 2: Create the Project Files

 

After creating a React application, you can delete some unnecessary files in the folder to keep things organized. Then, create these important files in the src directory: Skeleton.jsx, DataList.jsx, skeleton.css, and datalist.css.

 

After setting everything up, your project folder structure should look like this:

 

 

 

Step 3: Create the Skeleton Component

 

Create a Skeleton component that will represent the skeleton loader. This part of the code ensures that the sparkling effect is displayed on the screen.

 

// src/Skeleton.jsx
import React from 'react';
import './skeleton.css';

const Skeleton = ({ width, height, borderRadius = '5px' }) => {
    return (
        <div className="skeleton" style={{ width, height, borderRadius }}></div>
    );
};

export default Skeleton;

 

To colorize the skeleton animation, add this style to your skeleton.css file:

 

/* src/skeleton.css */
.skeleton {
    background-color: #e0e0e0;
}

h1 {
    text-align: center;
}

 

Step 4: Create the DataList Component

 

The DataList component acts like it's getting data from an API. While it's waiting for the real data to arrive, it shows a skeleton loader. Once the data is ready, it switches to showing the actual information.

 

// src/DataList.jsx
import React, { useEffect, useState } from 'react';
import Skeleton from './Skeleton';
import './datalist.css';

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

    useEffect(() => {
        const fetchData = async () => {
            setLoading(true);
            try {
                const response = await fetch('https://randomuser.me/api/?results=3');
                const jsonData = await response.json();
                setData(jsonData.results);
                setLoading(false);
            } catch (error) {
                console.error('Error fetching data:', error);
                setLoading(false);
            }
        };
        fetchData();
    }, []);

    return (
        <div className="card-container">
            {loading ? (
                Array.from({ length: 3 }).map((_, index) => (
                    <div key={index} className="skeleton-card">
                        <Skeleton width="100%" height="200px" borderRadius="8px" />
                        <Skeleton width="60%" height="20px" />
                        <Skeleton width="80%" height="20px" />
                        <Skeleton width="40%" height="20px" />
                    </div>
                ))
            ) : (
                data.map((user, index) => (
                    <div key={index} className="card">
                        <div className="card-image">
                            <img src={user.picture.large} alt="User" />
                        </div>
                        <h3>{`${user.name.first} ${user.name.last}`}</h3>
                        <p>Email: {user.email}</p>
                        <p>Location: {`${user.location.city}, ${user.location.country}`}</p>
                    </div>
                ))
            )}
        </div>
    );
};

export default DataList;

 

Add basic styles to your datalist.css file to make the card layout clean and visually appealing.

 

/* src/datalist.css */
.card-container {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.card,
.skeleton-card {
    width: 300px;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.card {
    flex-direction: column;
}

.card .card-image {
    height: 200px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.card .card-image img {
    width: 100%;
    height: 100%;
}

.card h3 {
    margin: 10px 0 5px;
}

.skeleton-card .skeleton {
    margin-bottom: 16px;
}

 

Step 5: Add the DataList Component to the App Component

 

Now, let's bring the DataList component into your main App.js component.

 

// src/App.js
import React from 'react';
import DataList from './DataList';
import './skeleton.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Skeleton Loader Example</h1>
        <DataList />
      </header>
    </div>
  );
}

export default App;

 

 

Step 6: Add the App Component to the index.js file

 

Finally, import your App.js component and skeleton.css file into the index.js file. Render the App component so that the UI is visible in the browser.

 

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './skeleton.css'

ReactDOM.createRoot(document.getElementById("root")).render(
  <>
    <App />
  </>
);

 

 

Step 7: Run your app

 

Run your React application:

 

npm start

When you open http://localhost:3000 in your browser, you should see the skeleton loaders animating while the data is being "fetched." After the simulated fetch completes, the skeletons will be replaced by the actual data items.

 

Your project appears like this:

 

 

 

Conclusion

 

We hope you successfully created an animated skeleton loading screen using ReactJS. The old loading icons were used before showing any data. But today, this type of skeleton animation is very popular, so our websites look more attractive, and the users stay there before any data is loaded. You can use skeleton animations to improve your website and customize them to match your project's theme.

 

Important: Imagine you have a button on your website that gives a response when you click it. Sometimes, you want to show an animation in that button until the data loads. In this case, using a skeleton animation might not be the best choice because it doesn't look good in these places. Instead, it's better to use a loading spinner.

 

If you have any questions about this article or any other related to web development, you can ask them in the question box given below, and you will get the answer as soon as possible.