busy-indicator

This is version 1.17.0 for Angular 17

Implements a simple "I'm busy" modal indicator, showing a rotating figure on a semi-transparent background.

Building and publishing

See the top level README file.

Usage

• Run npm install @almaobservatory/busy-indicator

• Place a <busy-indicator> element at the top level of your application, for instance in the header bar

• Identify where you want the indicator to appear and disappear, and call the show() and hide() methods of the BusyIndicatorService as described below.

Parameters

• showing: if true, the indicator should appear on creation; default is false
• label: a text to display

Example:

<busy-indicator [label]="'Please wait...'"></busy-indicator>

Showing and hiding the indicator

The indicator should be shown when a "long" operation is taking place, and the user needs to wait.

NOTE There seems to be a consensus around the notion that an operation with a waiting time between 1-10 sec should use some indicator that the system is busy. For anything that takes less than 1 second to load, it is distracting to use an animation.
Wait times of more than 10 sec should be handled by progress indicators instead, or "skeleton screens", or "progressive loading".
See:

• https://usersnap.com/blog/progress-indicators/
• https://www.stevenseow.com/papers/UI%20Timing%20Cheatsheet.pdf
• https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e

The class controlling the indicator should inject an instance of the BusyIndicatorService and use its show() and hide() methods:

    constructor( private busyIndicatorService: BusyIndicatorService ) {
    }

    this.busyIndicatorService.show();

    // Perform some lengthy operation

    this.busyIndicatorService.hide();