[Feature Request]: Top loading bar animation for page transitions

[dhairyathedev]

Is there an existing issue for this?

• [X] I have searched the existing issues

Feature Description

Adding a top-loading bar animation can significantly enhance user experience by indicating when a page is loading. This is particularly useful for pages that involve server-side rendering or client-side rendering with preprocessing, where changing the URL path might take some time without any visual feedback. Implementing a top-loading animation bar will ensure smoother page transitions and provide users with clear indicators of loading activity, thereby improving overall user experience.

Use Case

For better page transition and user experience

Benefits

Benefits:

• Clear indication of page loading status
• Enhanced perceived performance
• Smoother page transitions

Add ScreenShots

https://github.com/ashutosh-rath02/git-re/assets/65452005/9bbf6d69-f23d-45cc-9ed8-aceecec03274

Priority

High

Record

• [X] I have read the Contributing Guidelines
• [X] I'm a GSSOC'24 contributor
• [X] I have starred the repository

[ashutosh-rath02]

Thank you for creating this issue! 🎉 We'll look into it as soon as possible. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊

You can also check our CONTRIBUTING.md for guidelines on contributing to this project.

[ashutosh-rath02]

Are you asking for a progress bar @dhairyathedev ?

[dhairyathedev]

Are you asking for a progress bar @dhairyathedev ?

Yes, but on top of the page.

[ashutosh-rath02]

How about making a progress loader at the middle of the screen? This loader can be used as a template for all such loading processes?

[dhairyathedev]

Okay Ashutosh

I suggest, for page transitions, a top loader is ideal as it doesn't hide any content and smoothly shows the progress. Using a middle loader would require additional components to manage loading states, potentially leading to performance issues and poor user experience as changing states very frequently. If you prefer, we can use a middle loader where data is fetched from the client end, not the server end, to avoid these complications.

One example is GitHub itself using the top loading animation,

https://github.com/ashutosh-rath02/git-re/assets/65452005/95578f83-2ffe-4b45-9bbf-20c97047023a

If you still want to add the middle loader, I'll need to create a custom hook for it, and I'll need to do some research to make that happen.

[ashutosh-rath02]

Performance is one of our concerns too. It's taking too much time to load the resume after entering the username. You can give this a try.

[dhairyathedev]

Okay, I will try.

Also, can you assign this issue to me?

[ashutosh-rath02]

Hello @dhairyathedev! Your issue #264 has been closed. Thank you for your contribution!