How to add Pre Loader on all React Pages.

I was hanging around on google in search of adding a preloader animation on every route change in react. But every thing was just showing on data fetched from server. And loader only shows until the data is being fetched.

This disappointed me that I am unable to add preloader on every route change. Then I drink 2 full bottles of sting. This might sound crazy/funny but My mind started running at 120/kmh.

And I found a way to display a loader animation on every render & on every route change. So, Here is the way you can do it as well.

First of all Create a Loader animation as you like. If you don’t know how to create an animated loader animation. You can always check out my profile for complete guide.

It will take over 100 years to create a loader ^ _ ^ Just Kidding!!!. Alright so Joke’s a Part. Let’s get to real task for why we are here.

At first in App.jsxFile create all your routes using react router domAnd wrap it in another function (name whatever you like). You don’t need to export that function because we will be using it in the same file.

import { BrowserRouter as Router, Route, Routes } from "react-router-dom"

import Home from "./pages/Home"
import Blog from "./pages/Blog"
import About from "./pages/About"
import Contact from "./pages/Contact"

function AppJSX() {
  return (
    <>
      <Router>
        <Routes>
          <Route index element={<Home />} />
          <Route path="/blog" element={<Blog/>}/>
          <Route path="/about" element={<About/>}/>
          <Route path="/contact" element={<Contact/>}/>
        </Routes>
      </Router>
    </>
  )
}

Now here is the main part where you are going to let your loader load for a while. It is quite EZ!!!

// create a useEffect function to run it on every render and add a setTimout
// which will setLoading to false with useState and add write timeout of 4s

const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
  setTimeout(() => {
    setIsLoading(false)
  }, 4000)
}, [])

Now the whole file shall look like this.

import { BrowserRouter as Router, Route, Routes } from "react-router-dom"

import Home from "./pages/Home"
import Blog from "./pages/Blog"
import About from "./pages/About"
import Contact from "./pages/Contact"

import Loader from "./components/Loader"


function AppJSX() {
  return (
    <>
      <Router>
        <Routes>
          <Route index element={<Home />} />
          <Route path="/blog" element={<Blog />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Router>
    </>
  )
}

export default function App() {
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false)
    }, 4000)
  }, [])

  return <>{isLoading ? <Loader /> : <AppJSX />}</>
}

Here in the useState hook loading is set to true which means the app will keep loading until it is set to false. in Order to setLoading to false we used a useEffect hook and applied a setTimout method as an arrow function and setLoading to false after 4000ms (4s). In the return statement at first we returned a Loader which will show until the loader is true. and then the AppJSX Function (React Routes) will load after 4 second.

Hope!!! You Enjoyed reading this long article. Keep Learning, Keep Trying, Repeat

Hope!!! You Enjoyed reading this long article. Keep Learning, Keep Trying, Repeat. Don’t get Disappoint if you fail a part. I consider failure as my best friend. If you don’t fail, You don’t grow.