feat: add experimental download progress toast

src/utils/files.tsx

@@ -1,5 +1,7 @@
 import { auth } from "@/stores/auth";
 import type { UploadedFile } from "@/types/api";
+import { createSignal } from "solid-js";
+import toast from "solid-toast";
 
 export const createFileImporter = (onFileUploaded: (files: FileList) => unknown) => {
   const input = document.createElement("input");
@@ -78,13 +80,25 @@ export const getUploadedFileURL = (file: UploadedFile) => {
   return url;
 };
 
+const [downloadProgress, setDownloadProgress] = createSignal(0);
+
 export const downloadUploadedFile = (file: UploadedFile) => {
   const xhr = new XMLHttpRequest();
   xhr.open("GET", "/api/file/" + file.id, true);
   xhr.setRequestHeader("authorization", auth.profile!.api_token);
 
   xhr.responseType = "blob";
 
+  toast.custom(() => (
+    <div 
+      class="relative flex flex-col gap-2 rounded-md bg-base px-6 py-3 pr-12 font-medium shadow-md">
+        Downloading... {downloadProgress()}%
+      <progress value={downloadProgress()} max={100} class="bg-lavender" />
+    </div>
+  ), {
+    unmountDelay: 0
+  });
+
   xhr.onload = () => {
     if (xhr.status === 200) {
       const blob = xhr.response;
@@ -107,6 +121,11 @@ export const downloadUploadedFile = (file: UploadedFile) => {
   xhr.onprogress = (event) => {
     if (event.lengthComputable) {
       console.info(file.name, `${event.loaded}/${event.total} (${event.loaded * 100 / event.total}%)`);
+      setDownloadProgress(Math.floor(event.loaded * 100 / event.total));
+
+      if (event.loaded === 1) {
+        toast.dismiss();
+      } 
     }
   };