Frontend - Loading component

[danielcj2]

There are some skips in the UI when navigating from page to page. Would be a good idea to render a loading spinner component as the fetch operations or other calculations are being completed.

[danielcj2]

Here is an example (from github). A simple loading spinner with some custom text.

[s-babaeizadeh]

It is not always a good idea to render a loading spinner and it should be avoided. Instead, using skeleton screens and shimmer effects can significantly enhance the user experience during content loading by creating a more engaging and responsive interface. Skeleton screens serve as placeholders that visually represent the layout of the content that is loading, allowing users to see where information will appear instead of waiting on a static loading spinner. This approach improves perceived performance, keeps users engaged, reduces bounce rates, and provides a smoother transition to fully loaded content. Complementing skeleton screens, shimmer effects add a dynamic animation over the placeholders, capturing user attention and making the loading process feel less tedious.