add download loading state

src/pages/Drive/DrivePage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button, CloseButton, Select, Tooltip } from "flowbite-svelte";
+  import { Button, CloseButton, Select, Spinner, Tooltip } from "flowbite-svelte";
   import {
     ArrowDownToBracketOutline,
     ArrowLeftToBracketOutline,
@@ -48,6 +48,7 @@
   import { MultiDownload } from "../../helpers/multi-download";
   import { clearCache, getLocalFileURL } from "../../services/downloads";
   import { onDestroy } from "svelte";
+  import DownloadSelected from "./actions/DownloadSelected.svelte";
 
   export let currentPath: string;
   export let drive: Drive;
@@ -259,16 +260,7 @@
 
       <div class="flex-1" />
 
-      <Button
-        size="sm"
-        class="!p-2"
-        color="alternative"
-        on:click={downloadSelected}
-        disabled={subTree.children.length === 0}
-      >
-        <DownloadOutline />
-      </Button>
-      <Tooltip placement="bottom">Download</Tooltip>
+      <DownloadSelected {drive} path={currentPath} {selected} />
 
       {#if selected.length === 0}
         <div class="h-8 border border-gray-200 dark:border-gray-800" />

src/pages/Drive/actions/DownloadSelected.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { Button, Spinner, Tooltip } from "flowbite-svelte";
+  import { DownloadOutline } from "flowbite-svelte-icons";
+  import type Drive from "../../../blossom-drive-client/Drive";
+  import { MultiDownload } from "../../../helpers/multi-download";
+  import type TreeFile from "../../../blossom-drive-client/FileTree/TreeFile";
+  import type TreeFolder from "../../../blossom-drive-client/FileTree/TreeFolder";
+  import { servers } from "../../../services/servers";
+
+  export let drive: Drive;
+  export let path: string;
+  export let selected: string[];
+
+  $: subTree = drive.getFolder(path);
+
+  let loading = false;
+  async function download() {
+    loading = true;
+    const download = new MultiDownload(drive, $servers);
+    const entries: (TreeFile | TreeFolder)[] = [];
+    for (const entry of subTree) {
+      if (selected.includes(entry.name)) entries.push(entry);
+    }
+
+    download.on("log", (message) => console.log(download.id, message));
+
+    if (entries.length > 0) await download.start(entries);
+    else await download.start([subTree]);
+
+    loading = false;
+  }
+</script>
+
+<Button
+  size="sm"
+  class="!p-2"
+  color="alternative"
+  on:click={download}
+  disabled={subTree.children.length === 0 || loading}
+>
+  {#if loading}
+    <Spinner size="5" />
+  {:else}
+    <DownloadOutline />
+  {/if}
+</Button>
+<Tooltip placement="bottom">Download</Tooltip>