How to Display a Simple Loading Indicator Between Routes in React Router ?

Last Updated : 19 Sep, 2024

Displaying a loading indicator between routes helps in transitioning between routes that involve loading data or components asynchronously. During this transition period, it’s essential to provide visual feedback to users to indicate that something is happening. It is a good practice to display a loading screen while you prepare your page to display. It is very easy to display a simple loading indicator between routes in react-router.

Prerequisites:

Approach

To display a loading indicator between routes in the react-router we will use a useState instance to track the loading state. The URL address matches the components with defined routes then the loading screen will appear until the Component loading is finished and loading is set to false. We can use useEffect hook to conditionally render the loading and the web page.

Steps to Create React Application

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure

It will look like the following.

Step to Install react-router-dom:

Use this command in the terminal

npm i react-router-dom

Dependencies list in package.json file after installing packages

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.17.0",
    "react-router-dom": "^6.17.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Create Home component and show loading dialogue untill the page is loaded

JavaScript

// Filename - App.js

import React from "react";
import {
    BrowserRouter as Router,
    Routes,
    Route,
} from "react-router-dom";
import { useState } from "react";
import Home from "./components/Home";

function App() {
    return (
        <div
            style={{
                textAlign: "center",
                margin: "auto",
            }}
        >
            {/* Create route for each page, since we // have
            only one page. So we are defining // only one
            route. */}
            <Router>
                <Routes>
                    <Route path="/" element={<Home />} />
                </Routes>
            </Router>
        </div>
    );
}

export default App;

JavaScript

// Filename - components/Home.js

import React from "react";
import { useState } from "react";

const Home = () => {
    // Set loading state to true initially
    const [loading, setLoading] = useState(true);

    // Page will load after 2 seconds
    setTimeout(() => {
        setLoading((loading) => !loading);
    }, 2000);
    // If page is in loading state, display
    // loading message. Modify it as per your
    // requirement.
    if (loading) {
        return <h3>Loading Page....</h3>;
    }

    // If page is not in loading state, display page.
    else {
        return (
            <div>
                <h1 style={{ color: "green" }}>
                    GeeksforGeeks
                </h1>
                <h3>This is Home Component</h3>
            </div>
        );
    }
};

export default Home;