Show busy gif after user clicks on a Link

Question

I have a large excel document that is generated when the user clicks on the download link. When the download link is clicked the browser pops up the standard open save cancel dialog. The problem is that the wait time can be really long e.g. 15 seconds or more before the dialog appears. I want to show a busy gif while the request is in progress. How can I accomplish this?

I'm pretty sure I can show a gif easily using jQuery, but I'm not sure how to stop/hide the busy indicator when the new document (excel doc) has finished loading. Is there a javascript event that I could attach a handler to?

Answer 1

The problem here is that clicking the link fires off another request which is nothing to do with the first one. You could have the code that handles the download request update some kind of session data, which a bit of Ajax on the linking page then polls to determine when the request handler is in the process of offering up the data for download.

Alternatively, you could simply make it time out after a reasonable period of time, say 30 seconds, and perhaps offer up an explanation. This might then transition through a couple of states:

"Click here to download the super-duper PDF of awesomeness!"
"Please wait, generating a whole dollop of fonty goodness..."
"It may take some time to bundle all that uber-data into a download...if nothing's happening, maybe you want to try again?"

This seems to be the approach Google Mail takes when it comes to detecting timeouts or similar problems.

Answer 2

Another option is the temporary file method: http://stackoverflow.com/questions/420417/is-there-a-way-to-detect-the-start-of-a-download-in-javascript/421201#421201

Basically:

1. User clicks on download link/button
2. An AJAX request is sent to create the excel doc. Show the 'busy' indicator.
3. The excel doc is created and saved to a temporary file on the server. A response is sent containing a unique id that identifies the file.
4. The AJAX response is handled on the client-side. Hide the 'busy' indicator. window.location is changed to something like 'download.aspx?id=###' which prompts the user to save the file.