Skip to main content

LoadingScreen.jsx Component Documentation

Overview​

The LoadingScreen.jsx component is a reusable loading overlay that can be displayed while waiting for data to load or during other asynchronous operations. It uses the ClipLoader from react-spinners to create a visually appealing loading animation.

Prerequisites​

Before using the LoadingScreen component, ensure that the react-spinners package is installed:

npm install react-spinners

Basic Usage​

To integrate the LoadingScreen component into your application, follow these steps:

1. Import the Component​

First, import the LoadingScreen component into your application file where you intend to use it.

import React from "react";
import LoadingScreen from "./components/LoadingScreen"; // Adjust the path as necessary

2. Rendering the Component​

Include the LoadingScreen component within your JSX to display it when needed. It typically appears as an overlay, covering the entire screen.

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate a data fetch with a timeout
    setTimeout(() => setLoading(false), 3000);
  }, []);

  return (
    <div>
      {loading && <LoadingScreen />}
      <div>
        <h1>Your Content Here</h1>
      </div>
    </div>
  );
};

export default App;

3. Customizing the Loader​

The LoadingScreen component can be customized by adjusting the styles or replacing the ClipLoader with another spinner from react-spinners. Here’s an example of how to modify the loading message or change the spinner:

Change the Loading Message​

You can easily change the "loading" message to something else:

const CustomLoadingScreen = () => {
  return (
    <LoadingScreen>
      <h1>Loading your dashboard...</h1>
    </LoadingScreen>
  );
};

Customize the Spinner​

Change the spinner size, color, or type by passing different props to ClipLoader:

<ClipLoader size={150} color={"#123abc"} />

Example Use Case​

Suppose you have a dashboard that requires fetching large amounts of data before rendering. You can use the LoadingScreen component to inform users that the data is loading.

const Dashboard = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchData().then(() => setLoading(false));
  }, []);

  return (
    <div>
      {loading && <LoadingScreen />}
      {!loading && (
        <div>
          <h1>Dashboard Content</h1>
        </div>
      )}
    </div>
  );
};

Conclusion​

The LoadingScreen.jsx component is a versatile and reusable way to display a loading overlay in your React application. By following the examples and customization options provided, you can easily integrate and tailor this component to fit your application's needs.