Feature: add missing loading animations to page transitions

[isabensusan]

Type of feature

🍕 Feature

Current behavior

Right now we only show a loading splash screen when users click on the opensauced logo:

If users want to navigate the rest of the site (which can be a bit slow at times) there's no indication that the page is loading.

Suggested solution

We could really use some affordance to make it clear to the user that when they click on a link to navigate to somewhere else in the page, that page is loading. Otherwise it feels like you click on stuff but nothing happens.

As much as I like the pizza splash screen, I think it does remove the user from context and adds some cognitive load, making it feel like the page takes longer to load than it actually does.

A suggested solution would be to have a loading animation like Github's -- a loading bar right below the url box (see the blue loading indicator):

Example

(pls ignore weird background texture of the gif, focus on orange bar at the top)

height: 4px 
background-color: OpenSauced primary (#FF5402)

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[Jyotipal29]

Please assign this to me

[babblebey]

Hey @Jyotipal29,

Kindly refer to this part of the contribution guide to learn how you can assign an issue to yourself - https://github.com/open-sauced/.github/blob/deffbf5eda2e9ade160cfedaeaedb2427744b964/CONTRIBUTING.md#issues

[Jyotipal29]

.take

[open-sauced]

🎉 This issue has been resolved in version 1.75.0-beta.7 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[open-sauced]

🎉 This issue has been resolved in version 1.75.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀