How to integrate nprogress with router?

[taskindrp]

I can only see onRouteChange option, how to know start and end of the route change? like in nextjs, is there any events to track?
Example from https://mantine.dev/others/nprogress/

 const router = useRouter();

router.events.on("routeChangeStart", handleStart);
router.events.on("routeChangeComplete", handleComplete);
router.events.on("routeChangeError", handleComplete);

[elianparedes]

Hey, It's been a long time but you can suscribe to the router events by doing this after initializing the router instance!

// Set up a Router instance
const router = createRouter({
    routeTree,
    // ... Your router props
});

// Subscribe to events
router.subscribe('onBeforeLoad', () => nprogress.start())
router.subscribe('onLoad', () => nprogress.complete())

More information about router events here

Hope it helps!

[recallwei]

Only the path changed should display loading.

router.subscribe('onBeforeLoad', ({ pathChanged }) => pathChanged && nprogress.start())
router.subscribe('onLoad', () => nprogress.done())

[marten]

Expanding on this, for me the onLoad wouldn't fire on initial page load. Not sure if that's a bug in the router or something peculiar with my routes, but since this is the only thing I use the events for, I worked around it using:

router.subscribe("onBeforeLoad", ({ fromLocation, pathChanged }) => {
  // Don't show the progress bar on initial page load, seems like the onLoad event doesn't fire in that case
  fromLocation && pathChanged && BProgress.start();
});
router.subscribe("onLoad", () => {
  BProgress.done();
});