Fix the progress bar for when screens are loading

[NiallJoeMaher]

Context

Currently, on www.codu.co, we get a progress bar when changing pages.
With the new next/navigation package, the way we handled this no longer works.
I'm open to suggestions that might help us fix this and show the loading indicator so the site doesn't feel laggy.

You can find this component in components/ProgressBar/ProgressBar.tsx.
You'll see it is commented out on app/layout.tsx.

Expected Behavior

Expecting the progress bar to work as it currently does but if not possible that suggestions are offered and agreed and implemented.

Current Behavior

We commented out the progress bar for the moment.

Screenshots

Screen.Recording.2023-10-15.at.08.27.43.mov

[seog-jun]

It seems like router.events is from next/router and it doesn't support anymore on Next.js 13. I'm still investigating a solution, and I'm not sure I can fix it, but I want to give it a shot. If I can't, I'll let you know asap. Thanks!

[NiallJoeMaher]

Cheers James! You can suggest solutions here if you think you found something

[seog-jun]

Hi @NiallJoeMaher
I found a simple workaround for Progress Bar, which is using NextTopLoader library: https://github.com/TheSGJ/nextjs-toploader

I simply updated layout.tsx by using NextTopLoader, but I didn't figure out how to apply CSS transition to the progress bar so far. Do you think it's good to go or want a different approach? I'm waiting for your feedback! Thanks

progressBar.online-video-cutter.com.mp4

[NiallJoeMaher]

I think it's definitely better than currently having nothing. If you can get that working with the gradient like before you can open up a PR 🦾 Thanks!