This will show fancy progress bar on top of your apps :D

App.js

/*Here's how to use it*/ 
import FancyRoute from "./components/Route/Route"

export default function App(){
  return (
    <Router>
      <FancyRoute path="/" component={Home}/>
    </Router>
  
  )

}

progressStyles.css

/*  You can customize the color here*/
  
#nprogress .bar {
  background: #b45309;
  height: 3px;
}

RouteWithProgress.jsx

import "nprogress/nprogress.css"
import "./routeStyles.css"
import nprogress from "nprogress"
import { useEffect, useState } from "react"
import { Route } from "react-router-dom"

export default function FancyRoute(props) {
  useState(nprogress.start())
  useEffect(() => {
    nprogress.done()
    return () => nprogress.start()
  })
  return <Route {...props} />
}