Busy Indicator

Overview

Whenever the programmatic flow of your application will pause for more than a few seconds, it’s important to indicate to the user that this pause is expected, otherwise the user may assume that the application has locked up. Applications typically display a small “busy” animation on the screen to indicate that it is processing and hasn’t locked up.

Indeterminate Delays

Indeterminate delays are cases where your application is performing a long running task whose progress can’t be determined by your app. An example of an indeterminate delay is calling an asynchronous remote data service: you typically don’t get an idea of how the service call is progressing or when the service call will finally complete (or fail). All you get is the data or an error after the service call completes.

Since you won’t always know how quickly or slowly an indeterminate process will take, it’s best to display a busy indicator before starting an indeterminate process, then hide the busy indicator after that process completes.

You’ll want to set the busy indicator for the container that contains the data being retrieved. If there is one service call that retrieves all data for the view, you’ll want to set the busy indicator at the function view level. Likewise, if there is a service call for just the data within a display block, group box, or tile, you’ll want to set the busy indicator for that display block, group box or tile.

Determinate Delays

Sometimes there is a delay while your app processes a list of items, where the number of items to process is known.

Use the progress bar for determinate cases like this.

Development

Web component development

Implementation

Each of our container components — rui-function-view, rui-display-block, rui-group-box, and rui-tile — has an isBusy boolean attribute. Bind this attribute to a reference to the boolean value in your TypeScript that indicates whether the application is busy retrieving the data for that container component. Switch the TypeScript variable from false to true to turn on the busy indicator, then from true to false to turn it off.

For the rui-function-view, rui-display-block and rui-group-box components, you can also optionally set a busyText property with text to be displayed below the spinning busy indicator when isBusy is set to true.

<rui-display-block titleText="Customer Info" [isBusy]="loadingCustomerInfo" busyText="Loading account data">

Angular wrapper development

Implementation

Each of our container components — jha-function-view, jha-display-block, jha-group-box, and jha-tile — has an jhaIsBusy boolean attribute. Bind this attribute to a reference to the boolean value in your TypeScript that indicates whether the application is busy retrieving the data for that container component. Switch the TypeScript variable from false to true to turn on the busy indicator, then from true to false to turn it off.

For the jha-function-view, jha-display-block and jha-group-box components, you can also optionally set a jhaBusyText property with text to be displayed below the spinning busy indicator when isBusy is set to true.

<jha-display-block jhaTitle="Customer Info" [jhaIsBusy]="loadingCustomerInfo" jhaBusyText="Loading account data">

Component playground

Design

There are no specific design components for a busy indicator as these states are typically not shown in design documents.