I am trying to download documents uploaded in the application via fetchHandlers. While doing so I am making an API call and once API response(BLOB data) is available creating a object URL to download the document. Below is the code:

  downloadDocument(file.id, clientId)
    .then((res) => {
      const urlToDownload = URL.createObjectURL(res);
      const link = document.createElement("a");
      link.href = urlToDownload;
      link.setAttribute("download", `${file.name}`);

      // Append to html link element page
      document.body.appendChild(link);

      // Start download
      link.click();

      // Clean up and remove the link
      link.parentNode.removeChild(link);
    })
    .catch((err) => {
      console.log(err);
    });
};

However, if the document size is big it takes a lot of time there is a need to show that the download is in progress. Google and Gmail handles this use case(download attachments) by showing the download in the bottom download bar and the spinner comes as part of the document icon. However using the above the download happens independently and the spinner in the taskbar appears only for a brief moment while the object url is clicked.

How can we use the inbuilt browser experience to show the spinner. This experience is visible in Google Chrome.

Please check the download bar below.