jQuery throbber while processing a large file

Question

On my web app the user can generate a CVS file that can get pretty large 10+ Mb sometimes. The report obviously can take some time to generate. I want to display a throbber for the user while the report is being generated, once they are prompted to save/run I want the throbber to hide. Is this possible?

Answer 1

No, it's not really possible to detect when the file arrives and the user saves it. You're pretty much stuck just updating your throbber and offering a continue link when they're ready to continue.

If this was possible then the download sites would use it to auto-forward you to the download list when you're finished at the file's landing page.

Answer 2

Yes, typically heavy operations in JavaScript are split into chunks and then called from a setInterval. The timeout keeps the page from freezing up.

var csvTxt = "";
var isDone = false;
addPart = function(){
    csvTxt += addTextFromLongCalculation();
    if(csvTxt > 10000000) isDone = true; // this is an arbitrary example
}

var handle = setInterval(function(){
   addPart();
   if(isDone){
        clearInterval(handle);
   }
}, 20);

Answer 3

I'm guessing that you are posting some data, generating the CSV on the server, setting the content-type and waiting for the browser's save dialog to appear. Correct?

In that case, I think you will be disappointed. I spend quite some time trying to find events that would fire for this exact scenario and I couldn't figure it out. I finally had to do something convoluted like use XHR to poll the status of the file creation. Once I got the response I wanted, I hid the throbber and requested the CSV.

To be clearer:

• Show the throbber
• Use XHR to tell the server to start the CSV generation
• Use XHR to poll the status of the CSV creation
• Once file creation is complete:
  • add an invisible iframe to the document that points to the newly created CSV and have the server add the content-disposition header to it.
  • Hide the throbber after a short delay (you can try to time it so that the throbber is hidden after the file save window is shown, but while the user is interacting with the window). You could also possibly detect the window blur event for hiding the throbber, but I'm pretty sure that won't be very reliable.