How to display a simple loading indicator between routes in react router ?
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" }}> w3wiki </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:
Contact Us