Open In App

How to display a simple loading indicator between routes in react router ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In a React JS application using React Router, transitioning between routes often involves 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 simple loading indicator between routes in the react router we will use a useState instance to update if the component is loading or completed loading. 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.

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;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Peek-2023-10-19-17-50



Last Updated : 25 Oct, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads