Estoy tratando de descargar documentos cargados en la aplicación a través de fetchHandlers. Mientras lo hago, hago una llamada a la API y, una vez que la respuesta de la API (datos BLOB) está disponible, se crea una URL de objeto para descargar el documento. A continuación se muestra el código:

 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); }); };

Sin embargo, si el tamaño del documento es grande, lleva mucho tiempo, es necesario mostrar que la descarga está en curso. Google y Gmail manejan este caso de uso (descarga de archivos adjuntos) al mostrar la descarga en la barra de descarga inferior y la rueda giratoria aparece como parte del ícono del documento. Sin embargo, al usar lo anterior, la descarga se realiza de forma independiente y la rueda giratoria en la barra de tareas aparece solo por un breve momento mientras se hace clic en la URL del objeto.

¿Cómo podemos usar la experiencia del navegador incorporado para mostrar la rueda giratoria? Esta experiencia es visible en Google Chrome.

Consulte la barra de descarga a continuación.