[Web] Add Loading Indicator

[tbsbdr]

Description

Provide immediate feedback for ui-interactions and system status

User Stories

• As a user I want to see that the system is working on my command so that I'm reassured that my order is being worked on.

Value

1. They reassure the user that the system is working and reduce the user’s uncertainty.
2. Empower the user to do the right actions (if the user knows that the system is copying files, he/she acts different than if she/he thinks that the system is doing nothing)
3. They give the user something to look at while waiting, which makes the waiting period easier to tolerate.
4. They offer a reason to wait for the system to finish— simply because something appears to be happening.
5. They can reduce users’ perception of time: Users devote some cognitive resources to the feedback itself, and they pay less attention to the wait itself.
6. Enables us to let the user continue their work while a long running process runs in the background

( source: https://www.nngroup.com/articles/progress-indicators/ )

Acceptance Criteria

• This progress indicator should be used for any action (with a debounce, see below). At least the potentially long running operations copy, move, batch delete, archive download. 🫣
• show top loading bar if a user-triggered action takes longer than 500 ms (debounce threshold needs some fine tuning when it can be tried out)
• Style: use primary color; check YouTube example video attached.
• Indeterminate State: Looped indicator if percent-done is not possible
• Multiple long running actions can happen at the same time. ;) Keep loading indicator visible until all of them are finished.

Definition of done

• Functional requirements
  [ ] functionality described in the user story works
  [ ] acceptance criteria are fulfilled
• Quality
  [ ] codre review happened
  [ ] CI is green
  [ ] critical code received unit tests by the developer
  [ ] automated tests passed (if automated tests are not available, this test needs to be created and passed
• Non-functional requirements
  [ ] no sonar cloud issues

Research / examples

Red loading bar on top:

Blue loading bar on top:

[tbsbdr]

Added YouTube example

[tbsbdr]

Added box com example

[lookacat]

Intresting: https://www.digitalocean.com/community/tutorials/add-loading-indicators-to-your-vuejs-application