Progress/busy indicator while waiting for file download in javascript?

Question

here is the situation: In the web application, user selects some options, submits form, and PDF file is dynamically generated on the server side and offered for download.

The problem: The generation of PDF file takes quite long (up to 1 minute). Some users think nothing is hapening and keep clicking the submit button again and again increasing server load and slowing it down even further.

I thougt about adding some busy indicator, which would show animated picture and message like "Please wait, your file is being generated", which seems very easy to do.

But: how to hide this indicator when the file is ready and "file download" dialog pops up? Otherwise, the message stays on screen even after the user has downloaded the file!

Seems very basic requirement, but I'm completely stuck. Thanks for any suggestions!

Answer 1

I've had to do this for something that took a lot longer (converting a video's format). It might seem like overkill to you but it did work.

1. Move your PDF code out of process.
2. When a job is started create a unique job ID and save it to session. Tell the PDF creator this ID.
3. Make it write a status file (named as the job ID) to the server so that it writes "0% complete" and updates it every few seconds (this part depends on you being able to have a progress metric in your process... If it doesn't then this won't work)
4. Use JS to pull that file down. You can display the progress to the user.
5. When the progress equals "100% complete", push them to the PDF's location. It might help if you name this as the job ID too.*

*We had another download script that renamed it to a nice name (based on the original video filename) using the content-disposition header, but that's really up to you!

Edit: I should add that the waiting page was the result of clicking submit. It was a new pageload but there's no reason you couldn't AJAX the whole process, just make sure, as others have said, to disable the submit button on the first click to stop the user going ape on it.

Answer 2

I agree with the other respondents that your best bet would be to just disable the submit button on the form and give the user a busy indicator; however, for files that take a long time to generate it does make sense to have a more realistic indicator to the user that things didn't just hang.

One way that you might be able to implement a status bar, or an updating waiting message, is to have the client side JavaScript make an initial call to the server and have the server immediately respond back once it starts generation. Then you could have the client JavaScript poll the sever every n seconds to see if the file is complete. If you have a way of determining the file generation status then you could give a numeric response back for the progress bar percentage, or you could just reply back with a "still working" type of message.

I believe that this blog on asp.net discusses a similar setup.