사소한 리팩토링

src/routes/(fullscreen)/file/downloads/+page.svelte

@@ -1,18 +1,29 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import { FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import { getDownloadingFiles, clearDownloadedFiles } from "$lib/modules/file";
-  import { bulkGetFileInfo } from "$lib/modules/filesystem";
+  import {
+    getDownloadingFiles,
+    clearDownloadedFiles,
+    type FileDownloadState,
+  } from "$lib/modules/file";
+  import { bulkGetFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
 
-  const downloadingFiles = getDownloadingFiles();
-  const filesPromise = $derived(
-    bulkGetFileInfo(
-      downloadingFiles.map(({ id }) => id),
+  let downloadingFiles: { info: MaybeFileInfo; state: FileDownloadState }[] = $state([]);
+
+  onMount(async () => {
+    const states = getDownloadingFiles();
+    const infos = await bulkGetFileInfo(
+      states.map(({ id }) => id),
       $masterKeyStore?.get(1)?.key!,
-    ),
-  );
+    );
+    downloadingFiles = states.map((state) => ({
+      info: infos.get(state.id)!,
+      state,
+    }));
+  });
 
   $effect(() => clearDownloadedFiles);
 </script>
@@ -23,14 +34,11 @@
 
 <TopBar />
 <FullscreenDiv>
-  {#await filesPromise then files}
-    <div class="space-y-2 pb-4">
-      {#each downloadingFiles as state}
-        {@const info = files.get(state.id)!}
-        {#if info.exists}
-          <File {state} {info} />
-        {/if}
-      {/each}
-    </div>
-  {/await}
+  <div class="space-y-2 pb-4">
+    {#each downloadingFiles as { info, state } (info.id)}
+      {#if info.exists}
+        <File {info} {state} />
+      {/if}
+    {/each}
+  </div>
 </FullscreenDiv>

src/routes/(fullscreen)/file/downloads/File.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { FileDownloadState } from "$lib/modules/file";
-  import type { FileInfo } from "$lib/modules/filesystem";
+  import type { SummarizedFileInfo } from "$lib/modules/filesystem";
   import { formatNetworkSpeed } from "$lib/utils";
 
   import IconCloud from "~icons/material-symbols/cloud";
@@ -11,7 +11,7 @@
   import IconError from "~icons/material-symbols/error";
 
   interface Props {
-    info: FileInfo;
+    info: SummarizedFileInfo;
     state: FileDownloadState;
   }