Is there any way to wait for first byte when clicking an HTML anchor?

Question

I have an anchor that when clicked, downloads a file that first needs to be generated. This takes a few seconds, so to the user it seems like nothing is happening. I want to display a loading animation while waiting for the first byte (after which the browser shows the download progress), but I can't figure how to do that.

I don't want to perform an ajax request and register for the progress events, because I want the browser's download manager to handle the actual download.

Is there a way to be notified when the download is actually starting?

If your not prepared to use ajax or fetch etc, then I'd say no. — Keith, Feb 17 '20 at 12:07
have a look at https://stackoverflow.com/questions/29532788/how-to-display-a-loading-animation-while-file-is-generated-for-download — as-if-i-code, Feb 17 '20 at 12:09
You could at least use ajax to get a message from the server that the file has been created and to remove the loader. — Emiel Zuurbier, Feb 17 '20 at 12:14

score 0 · Accepted Answer · answered Feb 18 '20 at 14:21

I ended up solving it by creating 2 endpoints:

endpoint that generates the file and buffers the result and returns an url to the second enpoint
endpoint that returns the generated (buffered) result

The HTML button the user clicks will ask the first endpoint for the URL, which doesn't return until the file has been generated. While that request is running, a loading animation is displayed to indicate to the user that the file is being generated. When the URL is returned, I stop the animation, create an (invisible) anchor, set the href to that url, attach it to the document and click it, causing the browser to download the file (which will now start to download immediately).

Is there any way to wait for first byte when clicking an HTML anchor?

1 Answers1