파일이 다운로드/업로드된 직후에 다운로드/업로드 페이지의 목록에서 바로 사라지던 버그 수정

src/lib/modules/file/download.svelte.ts

@@ -45,7 +45,7 @@ export const clearDownloadedFiles = () => {
 
 const requestFileDownload = limitFunction(
   async (state: FileDownloadState, id: number) => {
-    state.status = "download-pending";
+    state.status = "downloading";
 
     const res = await axios.get(`/api/file/${id}/download`, {
       responseType: "arraybuffer",

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

@@ -1,18 +1,14 @@
 <script lang="ts">
   import { FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import { getFileInfo } from "$lib/modules/filesystem";
   import { getDownloadingFiles, clearDownloadedFiles } from "$lib/modules/file";
+  import { getFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
 
-  let downloadingFilesPromise = $derived(
-    Promise.all(
-      getDownloadingFiles().map(async (file) => ({
-        state: file,
-        fileInfo: await getFileInfo(file.id, $masterKeyStore?.get(1)?.key!),
-      })),
-    ),
+  const downloadingFiles = getDownloadingFiles();
+  const filesPromise = $derived(
+    Promise.all(downloadingFiles.map(({ id }) => getFileInfo(id, $masterKeyStore?.get(1)?.key!))),
   );
 
   $effect(() => clearDownloadedFiles);
@@ -24,9 +20,11 @@
 
 <TopBar />
 <FullscreenDiv>
-  {#await downloadingFilesPromise then downloadingFiles}
-    {#each downloadingFiles as { state, fileInfo }}
-      <File {state} info={fileInfo} />
-    {/each}
+  {#await filesPromise then files}
+    <div class="space-y-2 pb-4">
+      {#each files as file, index}
+        <File state={downloadingFiles[index]!} info={file} />
+      {/each}
+    </div>
   {/await}
 </FullscreenDiv>

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

@@ -4,6 +4,8 @@
   import { getUploadingFiles, clearUploadedFiles } from "$lib/modules/file";
   import File from "./File.svelte";
 
+  const uploadingFiles = getUploadingFiles();
+
   $effect(() => clearUploadedFiles);
 </script>
 
@@ -14,7 +16,7 @@
 <TopBar />
 <FullscreenDiv>
   <div class="space-y-2 pb-4">
-    {#each getUploadingFiles() as file}
+    {#each uploadingFiles as file}
       <File state={file} />
     {/each}
   </div>