search

danielschuster-muc / potter-db

A Harry Potter database for all your wizarding needs: Books, Characters, Movies, Spells, and Potions. Powered by https://github.com/danielschuster-muc/scrabby
https://potterdb.com
MIT License
98 stars 38 forks source link

[Ticket]: Add progress bar #750

Closed danielschuster-muc closed 1 year ago

danielschuster-muc commented 1 year ago

Project

Website (potterdb.com)

Describe the ticket you want to create

To improve the visuals of the new website, it would be nice to have a progressbar on page loading. I suggest using Next NProgress Bar. Be aware to branch off from new-website, see here for assistance.

Acceptance Criteria

Additional Details

No response

Screenshots

No response

Logs

No response

AlexVCS commented 1 year ago

Hey there, I'm working on this and will do a draft PR. There is an issue though. The progress bar package require me to add a "use client" to the top of the file, but then it gives me this error:

You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

Do you have a preference on what to do here? Thanks

danielschuster-muc commented 1 year ago

Hey there, I'm working on this and will do a draft PR. There is an issue though. The progress bar package require me to add a "use client" to the top of the file, but then it gives me this error:

You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

Do you have a preference on what to do here? Thanks

I would suggest using the approach of wrapping it in a use-client provider component, e.g. creating a file called NProgressProvider and wrapping it around the {children} in the root layout.

AlexVCS commented 1 year ago

I tried doing that and it's still not working. I don't get anything showing up on my local version of the site. I'm not sure what I need to do, maybe pass props differently to the progress provider. Please have a look and let me know what you think is wrong: https://github.com/danielschuster-muc/potter-db/pull/754

danielschuster-muc commented 1 year ago

I tried doing that and it's still not working. I don't get anything showing up on my local version of the site. I'm not sure what I need to do, maybe pass props differently to the progress provider. Please have a look and let me know what you think is wrong: #754

Try it like this: https://github.com/Skyleen77/next-nprogress-bar#second-approach-wrap-in-a-use-client-providers-component-1 and make sure to put the NProgressProvider within the body of the root layout.

See my review in #754.

AlexVCS commented 1 year ago

I tried doing that and it's still not working. I don't get anything showing up on my local version of the site. I'm not sure what I need to do, maybe pass props differently to the progress provider. Please have a look and let me know what you think is wrong: #754

Try it like this: https://github.com/Skyleen77/next-nprogress-bar#second-approach-wrap-in-a-use-client-providers-component-1 and make sure to put the NProgressProvider within the body of the root layout.

See my review in #754.

Thanks! I made those changes and have looked for the bar but not noticed it. I tried slowing down my connection too but didn't notice it. Can you see it? it should be implemented correctly now.

danielschuster-muc commented 1 year ago

Seems to work fine for me: https://streamable.com/r5z8i0 (a bit hard to see in the video, but it is definitely there). I think you can now mark the pr as ready and then I can make a final review.

AlexVCS commented 1 year ago

Cool I see it now. Great!