Show a loading spinner while waiting for promise with cujojs?

Question

I'm working on a web application where I make asynchronous using cujojs with their whenjs extension. However, I'm generally just tying into one of our service interfaces and letting them do all the heavy lifting.

Is there any way to show a spinner/loader automatically when the application is awaiting a response from the server? Just some visual cue maybe in the corner letting the user know that everything is churning along.

The big thing I want to avoid is having to manually show/hide a loading spinner every time I make a call.

Answer 1

There are two ways I can think of doing that:

1) Use global ajax event handlers to listen for asynchronous activity. You can bind them to your document and therefore execute some js, no matter what ajax call is being executed:

$(document).on('ajaxStart', function() {
    // show your spinner
});
$(document).on('ajaxComplete', function() {
    // hide your spinner
});

2) Pace.js is "An automatic web page progress bar" that you can easily include and choose a theme from:

<script src="/pace/pace.js"></script>
<link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />

It's particularly easy to grab a theme on their github. The animation you choose wil hit everytime your page loads or a another response is awaited.