Usability - Use a load indicator for XHR requests

[nlaprell]

There should be a visual load indicator when a user triggered XHR is processing so the user has feedback that something is happening. Currently, the UI appears unresponsive when (for example) creating large queries or views, as clicking submit has a 2 - 3 second lag before the navigation is updated.

Proposed solutions:

• Use an overlay to dim the screen and disable UI (max zindexed black layer with a low opacity). Render an animated "loading" indicator on top of the layer.
• Update the specific button (e.g., "Submit") to display a wait indicator once clicked until the XHR returns.
• Update the document body CSS to use cursor: wait when the request starts and revert it back when finished (probably the easiest solution).

[nlaprell]

Created a script that tracks XHR calls/completions and toggles the display of a wait cursor while there are outstanding requests. A delay is used to prevent flickering of the cursor or display for very fast responses.

[cskeefer]

As an option, I've used this in the past.

[nlaprell]

Thanks, @cskeefer. This looks solid. The main difference between that and my approach is that what I wrote automatically applies to all requests, while this has to be applied to each $http request or promise individually. There are pros and cons to each, so I created the branch /feature/133-alt-load-indicator which uses this plugin and submitted a pull request/review for feedback on both approaches.

[nlaprell]

Merged into master.