React-top-loading-bar on page load

Question

I'm new to React and I tried implementing this https://github.com/klendi/react-top-loading-bar to my projet. So far the buttons are working to display the state of the bar, but I don't know how to "link" the state of the progress bar when my pages on load.

My code (App.js):

import Home from './pages/home';
import Menu from './components/menu';
import Clients from './pages/clients';
import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import React, { useState } from 'react';
import LoadingBar from 'react-top-loading-bar';

const App = () => {
  const [progress, setProgress] = useState(0)
    return (
      <div>
        <Router>

          <Menu/>

          <LoadingBar height="3px"  color="#1BC5BD" progress={progress} onLoaderFinished={() => setProgress(0)} />
          <button
            onClick={() => setProgress(progress + 10)}
          >
            Add 10%
          </button>
          <button
            onClick={() => setProgress(progress + 20)}
          >
            Add 20%
          </button>
          <button
            onClick={() => setProgress(100)}
          >
            Complete
          </button>
          <br/>

          <Switch>
             <Route exact path='/' component={Home} />
             <Route path='/clients' component={Client} />
             
          </Switch>
          
        </Router>
      </div>
    )
}

export default App;

Edit : I tried <div onClick={() => setProgress(100)}> <Menu /></div> and it's actually loading with the new pages but only one time.

Answer 1

You need to reset the progress each time you start to load something new.

Better use the continuousStart when you start to load something and then set it to complete as soon loading finishes:

<button
     onClick={() => ref.current.continuousStart()} >

as soon loading finishes

() => ref.current.complete()

Here I made a codesandbox for you with an example. Put some more of your code in there if you need more help.

https://codesandbox.io/s/nifty-haze-iye6s?file=/src/App.js

Answer 2

You can use a lib like this https://www.npmjs.com/package/@tanem/react-nprogress to get the page progression, or if you want a complete solution and you're using Next.js you can try this lib https://www.npmjs.com/package/nextjs-toploader