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();
});

[tauhid97k]

I’m expanding on this to share a complete step-by-step guide for anyone who isn’t sure how to set things up properly. This includes making sure the progress bar only finishes after the router is fully resolved with data.

Install BProgress

pnpm add @bprogress/core

Import the CSS in your styles.css

@import '@bprogress/core/css';

Optional: Change the color

:root {
  --bprogress-color: var(--primary);
}

Add the events in router.tsx

// Progress bar configuration
// BProgress.configure({
//  showSpinner: false
// })

// Progress bar Start
router.subscribe('onBeforeNavigate', ({ pathChanged }) => {
   pathChanged && BProgress.start()
})

// Progress bar Done
router.subscribe('onResolved', () => {
  BProgress.done()
})

return router