diff --git a/src/lib/modules/filesystem/category.ts b/src/lib/modules/filesystem/category.ts
index 47a4565..778f75c 100644
--- a/src/lib/modules/filesystem/category.ts
+++ b/src/lib/modules/filesystem/category.ts
@@ -116,6 +116,6 @@ const storeToIndexedDB = (info: CategoryInfo) => {
   return { ...info, exists: true as const };
 };
 
-export const getCategoryInfo = async (id: CategoryId, masterKey: CryptoKey) => {
-  return await cache.get(id, masterKey);
+export const getCategoryInfo = (id: CategoryId, masterKey: CryptoKey) => {
+  return cache.get(id, masterKey);
 };
diff --git a/src/lib/modules/filesystem/directory.ts b/src/lib/modules/filesystem/directory.ts
index 3f6cab1..4144a68 100644
--- a/src/lib/modules/filesystem/directory.ts
+++ b/src/lib/modules/filesystem/directory.ts
@@ -97,6 +97,6 @@ const storeToIndexedDB = (info: DirectoryInfo) => {
   return { ...info, exists: true as const };
 };
 
-export const getDirectoryInfo = async (id: DirectoryId, masterKey: CryptoKey) => {
-  return await cache.get(id, masterKey);
+export const getDirectoryInfo = (id: DirectoryId, masterKey: CryptoKey) => {
+  return cache.get(id, masterKey);
 };
diff --git a/src/lib/modules/filesystem/file.ts b/src/lib/modules/filesystem/file.ts
index 66ad359..9f8827d 100644
--- a/src/lib/modules/filesystem/file.ts
+++ b/src/lib/modules/filesystem/file.ts
@@ -168,10 +168,10 @@ const bulkStoreToIndexedDB = (infos: FileInfo[]) => {
   return infos.map((info) => [info.id, { ...info, exists: true }] as const);
 };
 
-export const getFileInfo = async (id: number, masterKey: CryptoKey) => {
-  return await cache.get(id, masterKey);
+export const getFileInfo = (id: number, masterKey: CryptoKey) => {
+  return cache.get(id, masterKey);
 };
 
-export const bulkGetFileInfo = async (ids: number[], masterKey: CryptoKey) => {
-  return await cache.bulkGet(new Set(ids), masterKey);
+export const bulkGetFileInfo = (ids: number[], masterKey: CryptoKey) => {
+  return cache.bulkGet(new Set(ids), masterKey);
 };
diff --git a/src/lib/modules/filesystem/internal.svelte.ts b/src/lib/modules/filesystem/internal.svelte.ts
index 6e8d7f2..7a8c446 100644
--- a/src/lib/modules/filesystem/internal.svelte.ts
+++ b/src/lib/modules/filesystem/internal.svelte.ts
@@ -29,8 +29,6 @@ export class FilesystemCache<K, V extends object> {
         this.map.set(key, newState);
       }
 
-      state.promise = newPromise;
-
       (state.value
         ? Promise.resolve(state.value)
         : this.options.fetchFromIndexedDB(key).then((loadedInfo) => {
@@ -54,7 +52,8 @@ export class FilesystemCache<K, V extends object> {
           state.promise = undefined;
         });
 
-      return newPromise;
+      state.promise = newPromise;
+      return state.value ?? newPromise;
     });
   }
 
@@ -108,12 +107,17 @@ export class FilesystemCache<K, V extends object> {
           });
         });
 
-      return Promise.all(
+      const bottleneckPromises = Array.from(
         keys
           .keys()
           .filter((key) => this.map.get(key)!.value === undefined)
           .map((key) => this.map.get(key)!.promise!),
-      ).then(() => new Map(keys.keys().map((key) => [key, this.map.get(key)!.value!] as const)));
+      );
+      const makeResult = () =>
+        new Map(keys.keys().map((key) => [key, this.map.get(key)!.value!] as const));
+      return bottleneckPromises.length > 0
+        ? Promise.all(bottleneckPromises).then(makeResult)
+        : makeResult();
     });
   }
 }
diff --git a/src/lib/utils/HybridPromise.ts b/src/lib/utils/HybridPromise.ts
new file mode 100644
index 0000000..10c6be9
--- /dev/null
+++ b/src/lib/utils/HybridPromise.ts
@@ -0,0 +1,93 @@
+type MaybePromise<T> = T | Promise<T> | HybridPromise<T>;
+
+type HybridPromiseState<T> =
+  | { mode: "sync"; status: "fulfilled"; value: T }
+  | { mode: "sync"; status: "rejected"; reason: unknown }
+  | { mode: "async"; promise: Promise<T> };
+
+export class HybridPromise<T> implements PromiseLike<T> {
+  private isConsumed = false;
+
+  private constructor(private readonly state: HybridPromiseState<T>) {
+    if (state.mode === "sync" && state.status === "rejected") {
+      queueMicrotask(() => {
+        if (!this.isConsumed) {
+          throw state.reason;
+        }
+      });
+    }
+  }
+
+  isSync(): boolean {
+    return this.state.mode === "sync";
+  }
+
+  toPromise(): Promise<T> {
+    this.isConsumed = true;
+
+    if (this.state.mode === "async") return this.state.promise;
+    return this.state.status === "fulfilled"
+      ? Promise.resolve(this.state.value)
+      : Promise.reject(this.state.reason);
+  }
+
+  static resolve<T>(value: MaybePromise<T>): HybridPromise<T> {
+    if (value instanceof HybridPromise) return value;
+    return new HybridPromise(
+      value instanceof Promise
+        ? { mode: "async", promise: value }
+        : { mode: "sync", status: "fulfilled", value },
+    );
+  }
+
+  static reject<T = never>(reason?: unknown): HybridPromise<T> {
+    return new HybridPromise({ mode: "sync", status: "rejected", reason });
+  }
+
+  then<TResult1 = T, TResult2 = never>(
+    onfulfilled?: ((value: T) => MaybePromise<TResult1>) | null | undefined,
+    onrejected?: ((reason: unknown) => MaybePromise<TResult2>) | null | undefined,
+  ): HybridPromise<TResult1 | TResult2> {
+    this.isConsumed = true;
+
+    if (this.state.mode === "async") {
+      return new HybridPromise({
+        mode: "async",
+        promise: this.state.promise.then(onfulfilled, onrejected) as any,
+      });
+    }
+
+    try {
+      if (this.state.status === "fulfilled") {
+        if (!onfulfilled) return HybridPromise.resolve(this.state.value as any);
+        return HybridPromise.resolve(onfulfilled(this.state.value));
+      } else {
+        if (!onrejected) return HybridPromise.reject(this.state.reason);
+        return HybridPromise.resolve(onrejected(this.state.reason));
+      }
+    } catch (e) {
+      return HybridPromise.reject(e);
+    }
+  }
+
+  catch<TResult = never>(
+    onrejected?: ((reason: unknown) => MaybePromise<TResult>) | null | undefined,
+  ): HybridPromise<T | TResult> {
+    return this.then<T, TResult>(null, onrejected);
+  }
+
+  finally(onfinally?: (() => void) | null | undefined): HybridPromise<T> {
+    this.isConsumed = true;
+
+    if (this.state.mode === "async") {
+      return new HybridPromise({ mode: "async", promise: this.state.promise.finally(onfinally) });
+    }
+
+    try {
+      onfinally?.();
+      return new HybridPromise(this.state);
+    } catch (e) {
+      return HybridPromise.reject(e);
+    }
+  }
+}
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 1db9577..5d5b9d4 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1,3 +1,4 @@
 export * from "./format";
 export * from "./gotoStateful";
+export * from "./HybridPromise";
 export * from "./sort";
diff --git a/src/routes/(fullscreen)/file/[id]/+page.svelte b/src/routes/(fullscreen)/file/[id]/+page.svelte
index 585c0d0..0b344bc 100644
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -9,6 +9,7 @@
   import { captureVideoThumbnail } from "$lib/modules/thumbnail";
   import { getFileDownloadState } from "$lib/modules/file";
   import { masterKeyStore } from "$lib/stores";
+  import { HybridPromise } from "$lib/utils";
   import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
   import DownloadStatus from "./DownloadStatus.svelte";
   import {
@@ -26,8 +27,7 @@
 
   let { data } = $props();
 
-  let infoPromise: Promise<MaybeFileInfo> | undefined = $state();
-  let info: FileInfo | null = $state(null);
+  let info: MaybeFileInfo | undefined = $state();
   let downloadState = $derived(getFileDownloadState(data.id));
 
   let isMenuOpen = $state(false);
@@ -65,22 +65,20 @@
   const addToCategory = async (categoryId: number) => {
     await requestFileAdditionToCategory(data.id, categoryId);
     isAddToCategoryBottomSheetOpen = false;
-    infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+    void getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
   };
 
   const removeFromCategory = async (categoryId: number) => {
     await requestFileRemovalFromCategory(data.id, categoryId);
-    infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+    void getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
   };
 
   $effect(() => {
-    infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!).then((fileInfo) => {
-      if (fileInfo.exists) {
-        info = fileInfo;
+    HybridPromise.resolve(getFileInfo(data.id, $masterKeyStore?.get(1)?.key!)).then((result) => {
+      if (data.id === result.id) {
+        info = result;
       }
-      return fileInfo;
     });
-    info = null;
     isDownloadRequested = false;
     viewerType = undefined;
   });
@@ -111,8 +109,8 @@
   });
 
   $effect(() => {
-    if (info && downloadState?.status === "decrypted") {
-      untrack(() => !isDownloadRequested && updateViewer(downloadState.result!, info!.contentType));
+    if (info?.exists && downloadState?.status === "decrypted") {
+      untrack(() => !isDownloadRequested && updateViewer(downloadState.result!, info!.contentIv!));
     }
   });
 
@@ -123,87 +121,85 @@
   <title>파일</title>
 </svelte:head>
 
-{#if info}
-  <TopBar title={info.name}>
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div onclick={(e) => e.stopPropagation()}>
-      <button
-        onclick={() => (isMenuOpen = !isMenuOpen)}
-        class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
-      >
-        <IconMoreVert class="text-2xl" />
-      </button>
-      <TopBarMenu
-        bind:isOpen={isMenuOpen}
-        directoryId={["category", "gallery"].includes(page.url.searchParams.get("from") ?? "")
-          ? info.parentId
-          : undefined}
-        {fileBlob}
-        filename={info.name}
-      />
-    </div>
-  </TopBar>
-  <FullscreenDiv>
-    <div class="space-y-4 pb-4">
-      {#if downloadState}
-        <DownloadStatus state={downloadState} />
-      {/if}
-      {#if viewerType}
-        <div class="flex w-full justify-center">
-          {#snippet viewerLoading(message: string)}
-            <p class="text-gray-500">{message}</p>
-          {/snippet}
+<TopBar title={info?.name}>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div onclick={(e) => e.stopPropagation()}>
+    <button
+      onclick={() => (isMenuOpen = !isMenuOpen)}
+      class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
+    >
+      <IconMoreVert class="text-2xl" />
+    </button>
+    <TopBarMenu
+      bind:isOpen={isMenuOpen}
+      directoryId={["category", "gallery"].includes(page.url.searchParams.get("from") ?? "")
+        ? info?.parentId
+        : undefined}
+      {fileBlob}
+      filename={info?.name}
+    />
+  </div>
+</TopBar>
+<FullscreenDiv>
+  <div class="space-y-4 pb-4">
+    {#if downloadState}
+      <DownloadStatus state={downloadState} />
+    {/if}
+    {#if info && viewerType}
+      <div class="flex w-full justify-center">
+        {#snippet viewerLoading(message: string)}
+          <p class="text-gray-500">{message}</p>
+        {/snippet}
 
-          {#if viewerType === "image"}
-            {#if fileBlobUrl}
-              <img src={fileBlobUrl} alt={info.name} onerror={convertHeicToJpeg} />
-            {:else}
-              {@render viewerLoading("이미지를 불러오고 있어요.")}
-            {/if}
-          {:else if viewerType === "video"}
-            {#if fileBlobUrl}
-              <div class="flex flex-col space-y-2">
-                <video bind:this={videoElement} src={fileBlobUrl} controls muted></video>
-                <IconEntryButton
-                  icon={IconCamera}
-                  onclick={() => updateThumbnail(info?.dataKey?.key!, info?.dataKey?.version!)}
-                  class="w-full"
-                >
-                  이 장면을 썸네일로 설정하기
-                </IconEntryButton>
-              </div>
-            {:else}
-              {@render viewerLoading("비디오를 불러오고 있어요.")}
-            {/if}
+        {#if viewerType === "image"}
+          {#if fileBlobUrl}
+            <img src={fileBlobUrl} alt={info.name} onerror={convertHeicToJpeg} />
+          {:else}
+            {@render viewerLoading("이미지를 불러오고 있어요.")}
           {/if}
-        </div>
-      {/if}
-      <div class="space-y-2">
-        <p class="text-lg font-bold">카테고리</p>
-        <div class="space-y-1">
-          <Categories
-            categories={info.categories}
-            categoryMenuIcon={IconClose}
-            onCategoryClick={({ id }) => goto(`/category/${id}`)}
-            onCategoryMenuClick={({ id }) => removeFromCategory(id)}
-          />
-          <IconEntryButton
-            icon={IconAddCircle}
-            onclick={() => (isAddToCategoryBottomSheetOpen = true)}
-            class="h-12 w-full"
-            iconClass="text-gray-600"
-            textClass="text-gray-700"
-          >
-            카테고리에 추가하기
-          </IconEntryButton>
-        </div>
+        {:else if viewerType === "video"}
+          {#if fileBlobUrl}
+            <div class="flex flex-col space-y-2">
+              <video bind:this={videoElement} src={fileBlobUrl} controls muted></video>
+              <IconEntryButton
+                icon={IconCamera}
+                onclick={() => updateThumbnail(info?.dataKey?.key!, info?.dataKey?.version!)}
+                class="w-full"
+              >
+                이 장면을 썸네일로 설정하기
+              </IconEntryButton>
+            </div>
+          {:else}
+            {@render viewerLoading("비디오를 불러오고 있어요.")}
+          {/if}
+        {/if}
+      </div>
+    {/if}
+    <div class="space-y-2">
+      <p class="text-lg font-bold">카테고리</p>
+      <div class="space-y-1">
+        <Categories
+          categories={info?.categories ?? []}
+          categoryMenuIcon={IconClose}
+          onCategoryClick={({ id }) => goto(`/category/${id}`)}
+          onCategoryMenuClick={({ id }) => removeFromCategory(id)}
+        />
+        <IconEntryButton
+          icon={IconAddCircle}
+          onclick={() => (isAddToCategoryBottomSheetOpen = true)}
+          class="h-12 w-full"
+          iconClass="text-gray-600"
+          textClass="text-gray-700"
+        >
+          카테고리에 추가하기
+        </IconEntryButton>
       </div>
     </div>
-  </FullscreenDiv>
+  </div>
+</FullscreenDiv>
 
-  <AddToCategoryBottomSheet
-    bind:isOpen={isAddToCategoryBottomSheetOpen}
-    onAddToCategoryClick={addToCategory}
-  />
-{/if}
+<AddToCategoryBottomSheet
+  bind:isOpen={isAddToCategoryBottomSheetOpen}
+  onAddToCategoryClick={addToCategory}
+/>
diff --git a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
index 5d89512..17b6662 100644
--- a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
+++ b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
@@ -4,6 +4,7 @@
   import { CategoryCreateModal } from "$lib/components/organisms";
   import { getCategoryInfo, type MaybeCategoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
+  import { HybridPromise } from "$lib/utils";
   import { requestCategoryCreation } from "./service";
 
   interface Props {
@@ -13,48 +14,50 @@
 
   let { onAddToCategoryClick, isOpen = $bindable() }: Props = $props();
 
-  let categoryInfoPromise: Promise<MaybeCategoryInfo> | undefined = $state();
+  let categoryInfo: MaybeCategoryInfo | undefined = $state();
 
   let isCategoryCreateModalOpen = $state(false);
 
   $effect(() => {
     if (isOpen) {
-      categoryInfoPromise = getCategoryInfo("root", $masterKeyStore?.get(1)?.key!);
+      HybridPromise.resolve(getCategoryInfo("root", $masterKeyStore?.get(1)?.key!)).then(
+        (result) => (categoryInfo = result),
+      );
     }
   });
 </script>
 
-{#await categoryInfoPromise then categoryInfo}
-  {#if categoryInfo?.exists}
-    <BottomSheet bind:isOpen class="flex flex-col">
-      <FullscreenDiv>
-        <SubCategories
-          class="py-4"
-          info={categoryInfo}
-          onSubCategoryClick={({ id }) =>
-            (categoryInfoPromise = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
-          onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
-          subCategoryCreatePosition="top"
-        />
-        {#if categoryInfo.id !== "root"}
-          <BottomDiv>
-            <Button onclick={() => onAddToCategoryClick(categoryInfo.id)} class="w-full">
-              이 카테고리에 추가하기
-            </Button>
-          </BottomDiv>
-        {/if}
-      </FullscreenDiv>
-    </BottomSheet>
+{#if categoryInfo?.exists}
+  <BottomSheet bind:isOpen class="flex flex-col">
+    <FullscreenDiv>
+      <SubCategories
+        class="py-4"
+        info={categoryInfo}
+        onSubCategoryClick={({ id }) =>
+          HybridPromise.resolve(getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)).then(
+            (result) => (categoryInfo = result),
+          )}
+        onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
+        subCategoryCreatePosition="top"
+      />
+      {#if categoryInfo.id !== "root"}
+        <BottomDiv>
+          <Button onclick={() => onAddToCategoryClick(categoryInfo!.id as number)} class="w-full">
+            {categoryInfo!.name} 카테고리에 추가하기
+          </Button>
+        </BottomDiv>
+      {/if}
+    </FullscreenDiv>
+  </BottomSheet>
+{/if}
 
-    <CategoryCreateModal
-      bind:isOpen={isCategoryCreateModalOpen}
-      onCreateClick={async (name: string) => {
-        if (await requestCategoryCreation(name, categoryInfo.id, $masterKeyStore?.get(1)!)) {
-          categoryInfoPromise = getCategoryInfo(categoryInfo.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-          return true;
-        }
-        return false;
-      }}
-    />
-  {/if}
-{/await}
+<CategoryCreateModal
+  bind:isOpen={isCategoryCreateModalOpen}
+  onCreateClick={async (name: string) => {
+    if (await requestCategoryCreation(name, categoryInfo!.id, $masterKeyStore?.get(1)!)) {
+      void getCategoryInfo(categoryInfo!.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>
diff --git a/src/routes/(main)/category/[[id]]/+page.svelte b/src/routes/(main)/category/[[id]]/+page.svelte
index f57b402..3c07474 100644
--- a/src/routes/(main)/category/[[id]]/+page.svelte
+++ b/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;
+  }}
+/>
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index 8edd04b..1919d7b 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -6,6 +6,7 @@
   import { TopBar } from "$lib/components/molecules";
   import { getDirectoryInfo, type MaybeDirectoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore, hmacSecretStore } from "$lib/stores";
+  import { HybridPromise } from "$lib/utils";
   import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
   import DirectoryEntries from "./DirectoryEntries";
   import DownloadStatusCard from "./DownloadStatusCard.svelte";
@@ -29,7 +30,7 @@
   let { data } = $props();
   let context = createContext();
 
-  let infoPromise: Promise<MaybeDirectoryInfo> | undefined = $state();
+  let info: MaybeDirectoryInfo | undefined = $state();
   let fileInput: HTMLInputElement | undefined = $state();
   let duplicatedFile: File | undefined = $state();
   let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
@@ -60,7 +61,7 @@
         .then((res) => {
           if (!res) return;
           // TODO: FIXME
-          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+          void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
         })
         .catch((e: Error) => {
           // TODO: FIXME
@@ -78,7 +79,13 @@
   });
 
   $effect(() => {
-    infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+    HybridPromise.resolve(getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!)).then(
+      (result) => {
+        if (data.id === result.id) {
+          info = result;
+        }
+      },
+    );
   });
 </script>
 
@@ -88,17 +95,17 @@
 
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
-{#await infoPromise then info}
-  {#if info?.exists}
-    <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>
+{#if info?.exists}
+  <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>
+      {#key info.id}
         <DirectoryEntries
           {info}
           onEntryClick={({ type, id }) => goto(`/${type}/${id}`)}
@@ -109,85 +116,85 @@
           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`,
             )}
         />
-      </div>
+      {/key}
     </div>
+  </div>
+{/if}
 
-    <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;
-      }}
-    />
+<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)!)) {
+      void 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}
-{/await}
+<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)) {
+      void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>
+<EntryDeleteModal
+  bind:isOpen={isEntryDeleteModalOpen}
+  onDeleteClick={async () => {
+    if (await requestEntryDeletion(context.selectedEntry!)) {
+      void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>