Open In App
Related Articles

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

Improve Article
Save Article
Like Article

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.



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


// Filename - App.js
import React from "react";
import {
    BrowserRouter as Router,
} from "react-router-dom";
import { useState } from "react";
import Home from "./components/Home";
function App() {
    return (
                textAlign: "center",
                margin: "auto",
            {/* Create route for each page, since we // have
            only one page. So we are defining // only one
            route. */}
                    <Route path="/" element={<Home />} />
export default App;


// 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 (
                <h1 style={{ color: "green" }}>
                <h3>This is Home Component</h3>
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:


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 25 Oct, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials