Define Busy Indicators and Use Related APIs

As an application designer or story developer, you can define busy indicators and use related APIs to temporarily block viewers from doing other actions, for example, when the analytic application or optimized story is loading or when the script is running.

There are two types of busy indicators:

  • Busy indicator that displays automatically when loading is longer than the predefined delay. Once it’s triggered, the actions in the entire analytic application or optimized story are blocked.

  • Busy indicator that’s owned by an analytic application or optimized story, popup or container, such as a tab strip or panel. It’s defined by APIs and when it’s triggered, only the actions on that specific level are blocked.

Define an Automatic Busy Indicator

You can define an automatic busy indicator, which can be triggered by loading activities on either application or story level or widget level. Whenever there’s a loading that exceeds the predefined delay time, the entire application or story is blocked.

Procedure

  1. For analytic applications, go to the Styling panel of Canvas. For optimized stories, select Global Settings from the Outline panel.
  2. Under Loading Indicator Settings, select Enable loading indicator when necessary.
  3. Optional: Enter information text that you want to display with the loading indicator icon.
  4. Under Loading Indicator Delay, define the time in millisecond to be delayed before the loading indicator shows up.

Results

In view time, the loading indicator automatically appears when the loading activity exceeds the time you've defined, and disappears after it's completed.

API to Enable an Automatic Busy Indicator

You can also use API for enabling an automatic busy indicator.

Code Syntax
Application.setAutomaticBusyIndicatorEnabled (enabled: boolean)

The information text and loading indicator delay time follow the settings in the Styling panel of canvas (for analytic applications) or Global Settings (for optimized stories).

APIs to Enable Busy Indicators on Different Levels

You can use APIs to show or hide busy indicators on different levels so that only the actions on the specific levels are blocked when such busy indicators are triggered in view time.

You can leverage APIs to show or hide busy indicators for:

  • Applications or stories

  • Popups

  • Containers (including tab strips and panels)

Code Syntax
// Show busy indicator. And if the text parameter is specified, show the text along with the busy indicator icon.
Application.showBusyIndicator(text?: string) // cover the whole page
Popup_1.showBusyIndicator(text?: string) // cover the pop up only
TabStrip_1.showBusyIndicator(text?: string) // cover the tab strip only
Panel_1.showBusyIndicator(text?: string) // cover the panel only
 
// Hide busy indicator
Application.hideBusyIndicator()
Popup_1.hideBusyIndicator()
TabStrip_1.hideBusyIndicator()
Panel_1.hideBusyIndicator()

The automatic busy indicator is fully independent of the busy indicators defined in this way, which means that when the automatic busy indicator is enabled, it won’t affect calls to Application.showBusyIndicator() or Application.hideBusyIndicator().

Example

In this example, you can write scripts to show the busy indicator when a request is sent via a postMessage event and hide it when a response is received from the outside page:
Sample Code
button.onClick() {
    Application.showBusyIndicator(); // Show application manual indicator
    Application.postMessage(PostMessageReceiver.Parent, message, "http://localhost:8080");
}
 
Application.onPostMessageReceived(message:string, origin: string) {
    if (message === "JOB_DONE") {
        Application.hideBusyIndicator();// Hide application manual indicator when getting the response message “JOB_DONE”
    }
}