Feature: Progress Indicator for page loading and downloads

[pepper3k]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Problem Description

When I refresh the page, or load a new page within a service, sometimes because the webapp is slow I'm not sure if anything is happening.

The same problem occurs when I download a file within a service.

Proposed Solution

I solution to this would be to create some sort of progress indicator for page loading and downloads.

Example for replacing the service logo while loading:

https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/08/s_2A9C470D38F43091CCD122E63014ED4503CAA7508FAF0C6806AE473C2B94B83E_1627522653545_loadinfo.gif?resize=200%2C200&ssl=1

A couple of examples for a download progress bar:

https://codepen.io/shankarcabus/pen/kOEYBO
https://codepen.io/aorcsik/pen/JXMvar

The information displayed would be path/filename, downloadKB/totalKB, download speed, download link, etc..
Also, there would be clickable options to open file, or open file location.
Al

Alternatives Considered

Nothing

Additional Information

No response

[vraravam]

Could I request you to please separate out the 2 items into 2 feature requests?

The first one: there's already a loader in the app, and I think it (or a similar loader to what you have linked) can be implemented in a simple manner.

The download manager ui that you describe is much more complex, and will take time.

[HenrijsS]

@SpecialAro What do you think about a more subtle progress bar at the top?

Here's a pretty simple library for it: https://kimmobrunfeldt.github.io/progressbar.js/

For example:
Animate the bar to 0.4 when starting navigation and to 1.0 when finished and hide it. (Like some SPA Frameworks do it).

[SpecialAro]

@SpecialAro What do you think about a more subtle progress bar at the top?

Here's a pretty simple library for it: https://kimmobrunfeldt.github.io/progressbar.js/

For example: Animate the bar to 0.4 when starting navigation and to 1.0 when finished and hide it. (Like some SPA Frameworks do it).

I can consider this. It would be better visually, I agree.
Will try and get back to you, thank you!

[vraravam]

Actually, we could use this: https://www.npmjs.com/package/react-topbar-progress-indicator - its a react component and doesn't need to be treated like a standalone js library.