How do you handle busy icons in an AJAX site?

Question

This question deals with concurrency issues, for suggestions on how to display a busy icon see this question: http://stackoverflow.com/questions/205631/javascript-loadingbusy-indicator-or-transparent-div-over-page-on-event-click

When a user initiates an AJAX request on a page it's useful to show some kind of "working" or busy icon or progress indicator. If there is only one long-running process this can be handled in a relatively straightforward way:

function do_action() {
   show_busy_icon();       

   long_running_asynchronous_process(function() {
      // Callback function run when process finishes
      hide_busy_icon();
   });
}

However, if multiple asynchronous processes are running on the page, using on/off methods wouldn't work. The first process to finish switches off the icon even though there are additional processes running.

So, how do you handle displaying an indicator, on a web page, that is on when there are one or more processes running, and off when there are no processes running?

I imagine it would be possible to maintain a count of the number of processes running. hide_busy_icon() only hides the icon if the process count is 0. That seems kinda prone to failure. Perhaps there's a better/simpler way that I'm not seeing.

Thanks for your ideas and suggestions!

Edit: After working with the solution in the marked answer for a while, I'm happy to say it works very well. The only issue I've run into are cases where my own scripts call functions of scripts I don't control. Unless those functions allow callbacks to be supplied there's no way to update the process-count when they begin and end.

An example of where this can occurs is adding a set of markers to a Google map. Once my script calls the Google maps function the busy icon disappears, while the markers are still being loaded.

I'm not sure of a good way to handle this.

Answer 1

Please see my answer here:

http://stackoverflow.com/questions/244183/how-to-display-a-loading-screen-while-site-content-loads#244190

I give a small, working JavaScript example of how to do exactly this, hope it helps.

Answer 2

I think the problem is really that you are using only one indicator. It may be easier to have an indicator for each action that needs one.

So, if you have multiple searches on a page each search area would have it's own independent indicator that is shown or hidden in the appropriate javascript functions.

Answer 3

If you want the same busy indicator for all actions, then use a counter.

Instead of "show_busy_icon()", do a "increment_busy_count()", which calls "show_busy_icon()" if busy count goes from 0 to 1. Instead of "hide_busy_icon()", do a "decrement_busy_count()", which calls "hide_busy_icon()" if busy count goes from 1 to 0.

Answer 4

Prototype has this built-in; a property called Ajax.activeRequestCount keeps track of how many requests are active at any given time. It'll also let you set up global Ajax responders to determine whether to hide or show the "busy" icon.