홈, 갤러리, 캐시 설정, 썸네일 설정 페이지에서의 네트워크 호출 최적화

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

@@ -2,13 +2,16 @@
   import { FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
   import { getDownloadingFiles, clearDownloadedFiles } from "$lib/modules/file";
-  import { getFileInfo } from "$lib/modules/filesystem";
+  import { bulkGetFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
 
   const downloadingFiles = getDownloadingFiles();
   const filesPromise = $derived(
-    Promise.all(downloadingFiles.map(({ id }) => getFileInfo(id, $masterKeyStore?.get(1)?.key!))),
+    bulkGetFileInfo(
+      downloadingFiles.map(({ id }) => id),
+      $masterKeyStore?.get(1)?.key!,
+    ),
   );
 
   $effect(() => clearDownloadedFiles);
@@ -22,9 +25,10 @@
 <FullscreenDiv>
   {#await filesPromise then files}
     <div class="space-y-2 pb-4">
-      {#each files as file, index}
-        {#if file.exists}
-          <File state={downloadingFiles[index]!} info={file} />
+      {#each downloadingFiles as state}
+        {@const info = files.get(state.id)!}
+        {#if info.exists}
+          <File {state} {info} />
         {/if}
       {/each}
     </div>

src/routes/(fullscreen)/gallery/+page.svelte

@@ -4,7 +4,7 @@
   import { FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
   import { Gallery } from "$lib/components/organisms";
-  import { getFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
+  import { bulkGetFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
 
   let { data } = $props();
@@ -12,9 +12,7 @@
   let files: MaybeFileInfo[] = $state([]);
 
   onMount(async () => {
-    files = await Promise.all(
-      data.files.map((file) => getFileInfo(file, $masterKeyStore?.get(1)?.key!)),
-    );
+    files = Array.from((await bulkGetFileInfo(data.files, $masterKeyStore?.get(1)?.key!)).values());
   });
 </script>
 

src/routes/(fullscreen)/settings/cache/+page.svelte

@@ -4,7 +4,7 @@
   import { TopBar } from "$lib/components/molecules";
   import type { FileCacheIndex } from "$lib/indexedDB";
   import { getFileCacheIndex, deleteFileCache as doDeleteFileCache } from "$lib/modules/file";
-  import { getFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
+  import { bulkGetFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import { formatFileSize } from "$lib/utils";
   import File from "./File.svelte";
@@ -23,13 +23,17 @@
   };
 
   onMount(async () => {
-    fileCache = await Promise.all(
-      getFileCacheIndex().map(async (index) => ({
-        index,
-        info: await getFileInfo(index.fileId, $masterKeyStore?.get(1)?.key!),
-      })),
+    const indexes = getFileCacheIndex();
+    const infos = await bulkGetFileInfo(
+      indexes.map(({ fileId }) => fileId),
+      $masterKeyStore?.get(1)?.key!,
     );
-    fileCache.sort((a, b) => a.index.lastRetrievedAt.getTime() - b.index.lastRetrievedAt.getTime());
+    fileCache = indexes
+      .map((index, i) => ({
+        index,
+        info: infos.get(index.fileId)!,
+      }))
+      .sort((a, b) => a.index.lastRetrievedAt.getTime() - b.index.lastRetrievedAt.getTime());
   });
 
   $effect(() => {

src/routes/(fullscreen)/settings/thumbnail/+page.svelte

@@ -4,7 +4,7 @@
   import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
   import { IconEntryButton, TopBar } from "$lib/components/molecules";
   import { deleteAllFileThumbnailCaches } from "$lib/modules/file";
-  import { getFileInfo } from "$lib/modules/filesystem";
+  import { bulkGetFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
   import {
@@ -14,7 +14,6 @@
   } from "./service.svelte";
 
   import IconDelete from "~icons/material-symbols/delete";
-  import { file } from "zod";
 
   let { data } = $props();
 
@@ -27,13 +26,12 @@
   };
 
   onMount(async () => {
-    persistentStates.files = await Promise.all(
-      data.files.map(async (fileId) => ({
-        id: fileId,
-        info: await getFileInfo(fileId, $masterKeyStore?.get(1)?.key!),
-        status: getGenerationStatus(fileId),
-      })),
-    );
+    const fileInfos = await bulkGetFileInfo(data.files, $masterKeyStore?.get(1)?.key!);
+    persistentStates.files = persistentStates.files.map(({ id, status }) => ({
+      id,
+      info: fileInfos.get(id)!,
+      status,
+    }));
   });
 </script>