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

Page Loading

Design

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.

JS

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

Loading Overlay

Design
Toggle a loading state on this form
AUD $

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.

JS

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