디렉터리 및 카테고리 페이지에서 탐색시의 깜빡임 현상 완화

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

@@ -4,6 +4,7 @@
   import { Category, CategoryCreateModal } from "$lib/components/organisms";
   import { getCategoryInfo, type MaybeCategoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
+  import { HybridPromise } from "$lib/utils";
   import CategoryDeleteModal from "./CategoryDeleteModal.svelte";
   import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
   import CategoryRenameModal from "./CategoryRenameModal.svelte";
@@ -18,7 +19,7 @@
   let { data } = $props();
   let context = createContext();
 
-  let infoPromise: Promise<MaybeCategoryInfo> | undefined = $state();
+  let info: MaybeCategoryInfo | undefined = $state();
 
   let isCategoryCreateModalOpen = $state(false);
   let isCategoryMenuBottomSheetOpen = $state(false);
@@ -26,7 +27,13 @@
   let isCategoryDeleteModalOpen = $state(false);
 
   $effect(() => {
-    infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+    HybridPromise.resolve(getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!)).then(
+      (result) => {
+        if (data.id === result.id) {
+          info = result;
+        }
+      },
+    );
   });
 </script>
 
@@ -34,70 +41,68 @@
   <title>카테고리</title>
 </svelte:head>
 
-{#await infoPromise then info}
-  {#if info?.exists}
-    {#if info.id !== "root"}
-      <TopBar title={info.name} />
-    {/if}
-    <div class="min-h-full bg-gray-100 pb-[5.5em]">
-      <Category
-        bind:isFileRecursive={info.isFileRecursive}
-        {info}
-        onFileClick={({ id }) => goto(`/file/${id}?from=category`)}
-        onFileRemoveClick={async ({ id }) => {
-          await requestFileRemovalFromCategory(id, data.id as number);
-          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-        }}
-        onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
-        onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
-        onSubCategoryMenuClick={(subCategory) => {
-          context.selectedCategory = subCategory;
-          isCategoryMenuBottomSheetOpen = true;
-        }}
-      />
-    </div>
-
-    <CategoryCreateModal
-      bind:isOpen={isCategoryCreateModalOpen}
-      onCreateClick={async (name: string) => {
-        if (await requestCategoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
-          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-          return true;
-        }
-        return false;
-      }}
-    />
-
-    <CategoryMenuBottomSheet
-      bind:isOpen={isCategoryMenuBottomSheetOpen}
-      onRenameClick={() => {
-        isCategoryMenuBottomSheetOpen = false;
-        isCategoryRenameModalOpen = true;
-      }}
-      onDeleteClick={() => {
-        isCategoryMenuBottomSheetOpen = false;
-        isCategoryDeleteModalOpen = true;
-      }}
-    />
-    <CategoryRenameModal
-      bind:isOpen={isCategoryRenameModalOpen}
-      onRenameClick={async (newName: string) => {
-        if (await requestCategoryRename(context.selectedCategory!, newName)) {
-          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-          return true;
-        }
-        return false;
-      }}
-    />
-    <CategoryDeleteModal
-      bind:isOpen={isCategoryDeleteModalOpen}
-      onDeleteClick={async () => {
-        if (await requestCategoryDeletion(context.selectedCategory!)) {
-          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-          return true;
-        }
-        return false;
-      }}
-    />
+{#if info?.exists}
+  {#if info.id !== "root"}
+    <TopBar title={info.name} />
   {/if}
-{/await}
+  <div class="min-h-full bg-gray-100 pb-[5.5em]">
+    <Category
+      bind:isFileRecursive={info.isFileRecursive}
+      {info}
+      onFileClick={({ id }) => goto(`/file/${id}?from=category`)}
+      onFileRemoveClick={async ({ id }) => {
+        await requestFileRemovalFromCategory(id, data.id as number);
+        void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      }}
+      onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
+      onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
+      onSubCategoryMenuClick={(subCategory) => {
+        context.selectedCategory = subCategory;
+        isCategoryMenuBottomSheetOpen = true;
+      }}
+    />
+  </div>
+{/if}
+
+<CategoryCreateModal
+  bind:isOpen={isCategoryCreateModalOpen}
+  onCreateClick={async (name: string) => {
+    if (await requestCategoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
+      void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>
+
+<CategoryMenuBottomSheet
+  bind:isOpen={isCategoryMenuBottomSheetOpen}
+  onRenameClick={() => {
+    isCategoryMenuBottomSheetOpen = false;
+    isCategoryRenameModalOpen = true;
+  }}
+  onDeleteClick={() => {
+    isCategoryMenuBottomSheetOpen = false;
+    isCategoryDeleteModalOpen = true;
+  }}
+/>
+<CategoryRenameModal
+  bind:isOpen={isCategoryRenameModalOpen}
+  onRenameClick={async (newName: string) => {
+    if (await requestCategoryRename(context.selectedCategory!, newName)) {
+      void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>
+<CategoryDeleteModal
+  bind:isOpen={isCategoryDeleteModalOpen}
+  onDeleteClick={async () => {
+    if (await requestCategoryDeletion(context.selectedCategory!)) {
+      void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>