Loading States

A program that is loaded may itself contain components that are not initially loaded into main storage, but can be loaded if and when their logic is needed. Once loading state is triggered, a symbol is usually shown as a feedback to the user.

Subcomponents

Progress Bars

Page Loading

Design
JS

Loading…

Rules:

The loading notification should be used anywhere an interaction may cause a small delay, but doesn't stop the user interacting with the page.

 
​
<loading-notification></loading-notification>
​

This will automatically listen for ajaxRequestRunning from ng-common when placed on the page. Placement should be near the top.

Loading Overlay

Design
JS

Toggle a loading state on this form

Input Label

Prefixed Label (Inc. tax)

AUD $

Postfixed Button

Rules:

The loading-overlay should be able to be placed on any container, modal or panel.

It is used to indicate a section change, page load, or full panel refresh, where the user will not be able to interact with the page during that change.

 
<div class="your-container" loading-overlay="loadingIndicatorsCtrl.manualLoading">
…
</div>
​
<div class="form-body" loading-overlay use-ui-router="true">
…
</div>

You can manually set the loading state by passing the directive a boolean. Or you set it to use-ui-router, where it will listen for $stateChangeStart, $stateChangeSuccess and $stateChangeError