@almaobservatory/busy-indicator

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

Usage no npm install needed!

<script type="module">
  import almaobservatoryBusyIndicator from 'https://cdn.skypack.dev/@almaobservatory/busy-indicator';
</script>

README

busy-indicator

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

Version 1.0.14

Building and publishing

cd @almaobservatory
make clean all publish

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.

Showing and hiding the indicator

The indicator should be shown when a "long" operation is taking place, and the user needs to wait. 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();