Show progress for long actions

How to do it

Start the job and get back a status address, as long-running jobs describes. Show a <progress> element with a count, such as "1,200 of 5,000 rows". Poll every 2 to 5 seconds while the tab is visible. Keep the job list on a page people can return to, and notify them when it ends.

Example

const POLL_MS = 3000;

export async function followJob(statusUrl: string, bar: HTMLProgressElement) {
  while (true) {
    const job = await api.get(statusUrl);
    bar.max = job.total;
    bar.value = job.done;
    if (job.state === 'succeeded' || job.state === 'failed') return job;
    await new Promise(done => setTimeout(done, POLL_MS));
  }
}

@app.get("/api/jobs/<job_id>")
def job_status(job_id):
    job = jobs.get_for_account(current_user().account_id, job_id)
    return {"state": job.state, "done": job.done, "total": job.total, "result": job.result_url}

How to check

A browser test starts an export of 5,000 rows, leaves for another screen and returns. The progress is still shown, and the finished export is listed with a download link.