How to use nprogress in v6？

[hcweb]

I would like to use nprogress in v6. How can I implement it? Are there any beforeEach and afterEach methods similar to vue router? Thank you very much

[kiliman]

You can use the useNavigation and useFetchers hooks to know when navigation/requests are in progress. Then trigger NProgress.start()/done() accordingly. Add this to your top-level route component.

const navigation = useNavigation();
const fetchers = useFetchers();
useEffect(() => {
  const fetchersIdle = fetchers.every((f) => f.state === 'idle');
  if (navigation.state === 'idle' && fetchersIdle) {
    NProgress.done();
  } else {
    NProgress.start();
  }
}, [navigation.state, fetchers]);

[lukelew]

Thanks man, very useful answer. But I got a weird situation. The state of my navigation is always 'idle'. Don't know why it happens. BTW, I'm using createBrowserRouter to generate the router and passing it to RouterProvier to create routes in my app.

[ecesar88]

That is also happening to me. The navigation state is always "idle". Also using createBrowserRouter