router.push() progress bar

[rossanodr]

Describe the feature you'd like to request

A progress bar which shows the progress while loading a new page.
It's a little strange to use useRouter and have no indication that the new page is going to load.

Describe the solution you'd like

Something like https://www.npmjs.com/package/nextjs-progressbar
It was great.

Describe alternatives you've considered

Currently in next Js 13 unfortunately I've found no alternatives

[guitheengineer]

You can play an animation on the routeChangeStart' event and end it on the routeChangeEnd event

  const router = useRouter()
  useEffect(() => {
    router.events.on('routeChangeStart', routeChangeStart);
    router.events.on('routeChangeComplete', routeChangeEnd);
    router.events.on('routeChangeError', routeChangeError);
    return () => {
      router.events.off('routeChangeStart', routeChangeStart);
      router.events.off('routeChangeComplete', routeChangeEnd);
      router.events.off('routeChangeError', routeChangeError);
    };
  }, []);

This is how this library is doing actually: https://github.com/apal21/nextjs-progressbar/blob/master/src/index.tsx

Do you think something else is needed or you can just use the router events?

[rossanodr]

You can play an animation on the routeChangeStart' event and end it on the routeChangeEnd event

  const router = useRouter()
  useEffect(() => {
    router.events.on('routeChangeStart', routeChangeStart);
    router.events.on('routeChangeComplete', routeChangeEnd);
    router.events.on('routeChangeError', routeChangeError);
    return () => {
      router.events.off('routeChangeStart', routeChangeStart);
      router.events.off('routeChangeComplete', routeChangeEnd);
      router.events.off('routeChangeError', routeChangeError);
    };
  }, []);

This is how this library is doing actually: https://github.com/apal21/nextjs-progressbar/blob/master/src/index.tsx

Do you think something else is needed or you can just use the router events?

It does not work with next13.
the useRouter from "next/navigation" does not have events :/
and the next/router can't be used with the app folder

[SamRoehrich]

I am curious if there is a way to use Suspense to achieve this. Not sure what the requirements are for your use case but I could see if you had 3 requests for example, updating the progress of a loader component as each request comes back.

[JavierLopezSCG]

Bumping the issue.

The new useRouter from Next 13 'next/navigation' (AppRouterInstance) doesn't expose any properties to detect the events on routes. Any possible solution?

[guitheengineer]

I think they'll eventually add these events again, just a matter of time.

One PR is open to listen to routeChangeStart:
#46391