0

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.

JD Davis
  • 3,517
  • 4
  • 28
  • 61

1 Answers1

0

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.

The F
  • 3,647
  • 1
  • 20
  • 28
  • For whatever reason, the first option does not execute no matter what I try. Using pace, suddenly my promises stop triggering. – JD Davis Oct 14 '15 at 21:49
  • Do you include jQuery? "Whenever an Ajax request is about to be sent, , jQuery triggers the ajaxStart event". You will probably find what you need while browsing the doc. I don't know why promises would 'stop triggering'. Do you get any errors? – The F Oct 14 '15 at 21:59
  • JQuery is definitely being included, and no errors are thrown. What appears to be happening is that Pace ties into the same mechanism that Cujojs does, and it's intercepting the XHR "done" messages and not passing them on. – JD Davis Oct 15 '15 at 13:25