How to implement Loader Spinner in React (Updated 2024)

73

Integrating a loader spinner into your React application enhances user experience by indicating that data or content is being loaded, especially during asynchronous operations like fetching data from an API. This article will guide you through adding a loader spinner to your React app with straightforward code examples.

Guiding Steps for Integration of Loader Spinner in React

Step 1: Choose a Loader Spinner Package

For this example, we’ll use the popular react-loader-spinner package, which offers a variety of spinner types. First, you need to install the package:

npm install react-loader-spinner

Step 2: Import the Spinner in Your Component

Decide where you want the spinner to appear in your app. For demonstration purposes, we’ll add it to a component that fetches data from an API. First, import the spinner component at the top of your file:

import Loader from 'react-loader-spinner';

Step 3: Implement the Spinner in Your Component

Within your component, you can control the visibility of the spinner based on whether data is being loaded. For example, you might have a state variable isLoading that tracks the loading status:

import React, { useState, useEffect } from 'react';
import Loader from 'react-loader-spinner';

const DataFetchingComponent = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      // Simulate fetching data from an API
      const result = await new Promise(resolve =>
        setTimeout(() => resolve("Data loaded"), 2000)
      );
      setData(result);
      setIsLoading(false);
    };

    fetchData();
  }, []);

  return (
    <div>
      {isLoading ? (
        <Loader type="Puff" color="#00BFFF" height={100} width={100} />
      ) : (
        <div>{data}</div>
      )}
    </div>
  );
};

export default DataFetchingComponent;

In this example, the Loader component from react-loader-spinner is displayed while data is being fetched (isLoading is true). Once the data is loaded, the loader disappears, and the data is displayed.

Customize the Spinner

react-loader-spinner offers a wide range of loader types to suit different aesthetics and functional requirements in React applications. These include Audio, BallTriangle, Bars, Circles, Grid, Hearts, Oval, Puff, Rings, TailSpin, ThreeDots, Watch, RevolvingDot, Triangle, Plane, MutatingDots, and CradleLoader. Each type provides a unique visual style, enabling developers to choose one that best fits the application’s design theme. By adjusting properties like type, color, height, and width, developers can easily customize these loaders to enhance the user experience during wait times.

Conclusion

Adding a loader spinner to your React app is a simple yet effective way to improve user experience during data loading or other asynchronous tasks. With react-loader-spinner, you can easily integrate and customize a spinner for your app’s unique needs.

React Spinner Loader – FAQ