디렉터리 페이지에서의 네트워크 호출 최적화

src/routes/(main)/directory/[[id]]/+page.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
   import { FloatingButton } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
+  import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem2.svelte";
   import { masterKeyStore, hmacSecretStore } from "$lib/stores";
   import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
   import DirectoryEntries from "./DirectoryEntries";
@@ -30,7 +29,7 @@
   let { data } = $props();
   let context = createContext();
 
-  let info: Writable<DirectoryInfo | null> | undefined = $state();
+  let infoPromise: Promise<DirectoryInfo> | undefined = $state();
   let fileInput: HTMLInputElement | undefined = $state();
   let duplicatedFile: File | undefined = $state();
   let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
@@ -61,7 +60,7 @@
         .then((res) => {
           if (!res) return;
           // TODO: FIXME
-          info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
         })
         .catch((e: Error) => {
           // TODO: FIXME
@@ -79,7 +78,7 @@
   });
 
   $effect(() => {
-    info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+    infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
   });
 </script>
 
@@ -89,106 +88,106 @@
 
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
-<div class="flex h-full flex-col">
-  {#if showTopBar}
-    <TopBar title={$info?.name} class="flex-shrink-0" />
-  {/if}
-  {#if $info}
-    <div class={["flex flex-grow flex-col px-4 pb-4", !showTopBar && "pt-4"]}>
-      <div class="flex gap-x-2">
-        <UploadStatusCard onclick={() => goto("/file/uploads")} />
-        <DownloadStatusCard onclick={() => goto("/file/downloads")} />
-      </div>
-      {#key $info}
+{#await infoPromise then info}
+  {#if info}
+    <div class="flex h-full flex-col">
+      {#if showTopBar}
+        <TopBar title={info.name} class="flex-shrink-0" />
+      {/if}
+      <div class={["flex flex-grow flex-col px-4 pb-4", !showTopBar && "pt-4"]}>
+        <div class="flex gap-x-2">
+          <UploadStatusCard onclick={() => goto("/file/uploads")} />
+          <DownloadStatusCard onclick={() => goto("/file/downloads")} />
+        </div>
         <DirectoryEntries
-          info={$info}
+          {info}
           onEntryClick={({ type, id }) => goto(`/${type}/${id}`)}
           onEntryMenuClick={(entry) => {
             context.selectedEntry = entry;
             isEntryMenuBottomSheetOpen = true;
           }}
-          showParentEntry={isFromFilePage && $info.parentId !== undefined}
+          showParentEntry={isFromFilePage && info.parentId !== undefined}
           onParentClick={() =>
             goto(
-              $info.parentId === "root"
+              info.parentId === "root"
                 ? "/directory?from=file"
-                : `/directory/${$info.parentId}?from=file`,
+                : `/directory/${info.parentId}?from=file`,
             )}
         />
-      {/key}
+      </div>
     </div>
+
+    <FloatingButton
+      icon={IconAdd}
+      onclick={() => {
+        isEntryCreateBottomSheetOpen = true;
+      }}
+      class="bottom-24 right-4"
+    />
+    <EntryCreateBottomSheet
+      bind:isOpen={isEntryCreateBottomSheetOpen}
+      onDirectoryCreateClick={() => {
+        isEntryCreateBottomSheetOpen = false;
+        isDirectoryCreateModalOpen = true;
+      }}
+      onFileUploadClick={() => {
+        isEntryCreateBottomSheetOpen = false;
+        fileInput?.click();
+      }}
+    />
+    <DirectoryCreateModal
+      bind:isOpen={isDirectoryCreateModalOpen}
+      onCreateClick={async (name) => {
+        if (await requestDirectoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
+          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+          return true;
+        }
+        return false;
+      }}
+    />
+    <DuplicateFileModal
+      bind:isOpen={isDuplicateFileModalOpen}
+      file={duplicatedFile}
+      onbeforeclose={() => {
+        resolveForDuplicateFileModal?.(false);
+        isDuplicateFileModalOpen = false;
+      }}
+      onUploadClick={() => {
+        resolveForDuplicateFileModal?.(true);
+        isDuplicateFileModalOpen = false;
+      }}
+    />
+
+    <EntryMenuBottomSheet
+      bind:isOpen={isEntryMenuBottomSheetOpen}
+      onRenameClick={() => {
+        isEntryMenuBottomSheetOpen = false;
+        isEntryRenameModalOpen = true;
+      }}
+      onDeleteClick={() => {
+        isEntryMenuBottomSheetOpen = false;
+        isEntryDeleteModalOpen = true;
+      }}
+    />
+    <EntryRenameModal
+      bind:isOpen={isEntryRenameModalOpen}
+      onRenameClick={async (newName: string) => {
+        if (await requestEntryRename(context.selectedEntry!, newName)) {
+          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+          return true;
+        }
+        return false;
+      }}
+    />
+    <EntryDeleteModal
+      bind:isOpen={isEntryDeleteModalOpen}
+      onDeleteClick={async () => {
+        if (await requestEntryDeletion(context.selectedEntry!)) {
+          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+          return true;
+        }
+        return false;
+      }}
+    />
   {/if}
-</div>
-
-<FloatingButton
-  icon={IconAdd}
-  onclick={() => {
-    isEntryCreateBottomSheetOpen = true;
-  }}
-  class="bottom-24 right-4"
-/>
-<EntryCreateBottomSheet
-  bind:isOpen={isEntryCreateBottomSheetOpen}
-  onDirectoryCreateClick={() => {
-    isEntryCreateBottomSheetOpen = false;
-    isDirectoryCreateModalOpen = true;
-  }}
-  onFileUploadClick={() => {
-    isEntryCreateBottomSheetOpen = false;
-    fileInput?.click();
-  }}
-/>
-<DirectoryCreateModal
-  bind:isOpen={isDirectoryCreateModalOpen}
-  onCreateClick={async (name) => {
-    if (await requestDirectoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
-      info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-      return true;
-    }
-    return false;
-  }}
-/>
-<DuplicateFileModal
-  bind:isOpen={isDuplicateFileModalOpen}
-  file={duplicatedFile}
-  onbeforeclose={() => {
-    resolveForDuplicateFileModal?.(false);
-    isDuplicateFileModalOpen = false;
-  }}
-  onUploadClick={() => {
-    resolveForDuplicateFileModal?.(true);
-    isDuplicateFileModalOpen = false;
-  }}
-/>
-
-<EntryMenuBottomSheet
-  bind:isOpen={isEntryMenuBottomSheetOpen}
-  onRenameClick={() => {
-    isEntryMenuBottomSheetOpen = false;
-    isEntryRenameModalOpen = true;
-  }}
-  onDeleteClick={() => {
-    isEntryMenuBottomSheetOpen = false;
-    isEntryDeleteModalOpen = true;
-  }}
-/>
-<EntryRenameModal
-  bind:isOpen={isEntryRenameModalOpen}
-  onRenameClick={async (newName: string) => {
-    if (await requestEntryRename(context.selectedEntry!, newName)) {
-      info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-      return true;
-    }
-    return false;
-  }}
-/>
-<EntryDeleteModal
-  bind:isOpen={isEntryDeleteModalOpen}
-  onDeleteClick={async () => {
-    if (await requestEntryDeletion(context.selectedEntry!)) {
-      info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-      return true;
-    }
-    return false;
-  }}
-/>
+{/await}