How to create a customizable loading indicator and placeholder in React using react-content-loader

React is a popular JavaScript library used for building web applications with dynamic user interfaces. When developing such applications, it is essential to have a good user experience. One aspect of user experience is providing visual feedback to users while content is loading. In this tutorial, we will explore how to create a customizable loading indicator and placeholder in React using react-content-loader.

1. What is react-content-loader?

react-content-loader is a lightweight library that provides customizable loading indicators and placeholders for React applications. It uses SVG to create animated placeholders that mimic the look of the actual content that is being loaded. These placeholders can be customized by changing the animation, size, and shape.

2. Installation

To get started, we need to install react-content-loader using npm:

npm install react-content-loader

3. Creating a basic loading indicator

We will begin by creating a basic loading indicator using react-content-loader. We will create a component that displays a placeholder for a rectangle. Here's how to create the component:

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

const LoadingIndicator = () => (
  <ContentLoader viewBox="0 0 400 400">
    <rect x="25" y="25" rx="5" ry="5" width="350" height="350" />
  </ContentLoader>
);

export default LoadingIndicator;

In the above code, we imported ContentLoader from react-content-loader and used it to create a basic loading indicator that displays a rectangle with rounded corners.

Output:

Output - Basic Loading - Clue Mediator

4. Customizing the loading indicator

react-content-loader provides several props that we can use to customize the loading indicator. We can change the shape, animation, and size of the placeholder. Here's an example of how to customize the loading indicator:

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

const LoadingIndicator = () => (
  <ContentLoader viewBox="0 0 400 400" backgroundColor="#f0f0f0" foregroundColor="#dedede">
    <rect x="25" y="25" rx="5" ry="5" width="350" height="100" />
    <rect x="50" y="150" rx="3" ry="3" width="100" height="10" />
    <rect x="50" y="170" rx="3" ry="3" width="200" height="10" />
  </ContentLoader>
);

export default LoadingIndicator;

In the above code, we added two additional rectangles to the loading indicator and customized the background and foreground colors of the SVG.

Output:

Output - Customize Loading - Clue Mediator

5. Creating a placeholder for a list

We can also use react-content-loader to create placeholders for lists. Here's an example of how to create a placeholder for a list:

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

const ListPlaceholder = () => (
  <ContentLoader viewBox="0 0 400 300" backgroundColor="#f0f0f0" foregroundColor="#dedede">
    <rect x="25" y="25" rx="5" ry="5" width="350" height="100" />
    <rect x="25" y="150" rx="5" ry="5" width="350" height="100" />
    <rect x="25" y="275" rx="5" ry="5" width="350" height="100" />
  </ContentLoader>
);

export default ListPlaceholder;

In the above code, we created a placeholder for a list by adding three rectangles to the ContentLoader component. Each rectangle represents an item in the list, and we can customize the size, shape, and color of these rectangles to match the design of our application.

Output:

Output - List Loading - Clue Mediator

6. Using the loading indicator and placeholder in your application

Once you have created the loading indicator and placeholder components, you can easily use them in your application. For example, you can render the loading indicator component while data is being fetched from an API, and then replace it with the actual content once the data is loaded. Here's an example:

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

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

  useEffect(() => {
    // Fetch data from API
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/mylist');
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        console.error(error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <LoadingIndicator /> // Show loading indicator while data is being fetched
      ) : (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default MyList;

In the above example, we are using the LoadingIndicator component to display a loading indicator while data is being fetched from an API. Once the data is loaded, we replace the loading indicator with the actual content.

Conclusion

In this tutorial, we learned how to create a customizable loading indicator and placeholder in React using react-content-loader. We explored how to customize the loading indicator by changing the shape, animation, and size, and also how to create a placeholder for a list. By using loading indicators and placeholders in our React applications, we can provide a better user experience by visually indicating that content is being loaded, and improving the perceived performance of our applications.