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

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) => {
+export const getCategoryInfo = (id: CategoryId, masterKey: CryptoKey) => {
-  return await cache.get(id, masterKey);
+  return cache.get(id, masterKey);
 };

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) => {
+export const getDirectoryInfo = (id: DirectoryId, masterKey: CryptoKey) => {
-  return await cache.get(id, masterKey);
+  return cache.get(id, masterKey);
 };

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) => {
+export const getFileInfo = (id: number, masterKey: CryptoKey) => {
-  return await cache.get(id, masterKey);
+  return cache.get(id, masterKey);
 };
 
-export const bulkGetFileInfo = async (ids: number[], masterKey: CryptoKey) => {
+export const bulkGetFileInfo = (ids: number[], masterKey: CryptoKey) => {
-  return await cache.bulkGet(new Set(ids), masterKey);
+  return cache.bulkGet(new Set(ids), masterKey);
 };

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();
     });
   }
 }

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);
+    }
+  }
+}

src/lib/utils/index.ts

@@ -1,3 +1,4 @@
 export * from "./format";
 export * from "./gotoStateful";
+export * from "./HybridPromise";
 export * from "./sort";

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: MaybeFileInfo | undefined = $state();
-  let info: FileInfo | null = $state(null);
   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) => {
+    HybridPromise.resolve(getFileInfo(data.id, $masterKeyStore?.get(1)?.key!)).then((result) => {
-      if (fileInfo.exists) {
+      if (data.id === result.id) {
-        info = fileInfo;
+        info = result;
       }
-      return fileInfo;
     });
-    info = null;
     isDownloadRequested = false;
     viewerType = undefined;
   });
@@ -111,8 +109,8 @@
   });
 
   $effect(() => {
-    if (info && downloadState?.status === "decrypted") {
+    if (info?.exists && downloadState?.status === "decrypted") {
-      untrack(() => !isDownloadRequested && updateViewer(downloadState.result!, info!.contentType));
+      untrack(() => !isDownloadRequested && updateViewer(downloadState.result!, info!.contentIv!));
     }
   });
 
@@ -123,8 +121,7 @@
   <title>파일</title>
 </svelte:head>
 
-{#if info}
+<TopBar title={info?.name}>
-  <TopBar title={info.name}>
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <div onclick={(e) => e.stopPropagation()}>
@@ -137,19 +134,19 @@
     <TopBarMenu
       bind:isOpen={isMenuOpen}
       directoryId={["category", "gallery"].includes(page.url.searchParams.get("from") ?? "")
-          ? info.parentId
+        ? info?.parentId
         : undefined}
       {fileBlob}
-        filename={info.name}
+      filename={info?.name}
     />
   </div>
-  </TopBar>
+</TopBar>
-  <FullscreenDiv>
+<FullscreenDiv>
   <div class="space-y-4 pb-4">
     {#if downloadState}
       <DownloadStatus state={downloadState} />
     {/if}
-      {#if viewerType}
+    {#if info && viewerType}
       <div class="flex w-full justify-center">
         {#snippet viewerLoading(message: string)}
           <p class="text-gray-500">{message}</p>
@@ -183,7 +180,7 @@
       <p class="text-lg font-bold">카테고리</p>
       <div class="space-y-1">
         <Categories
-            categories={info.categories}
+          categories={info?.categories ?? []}
           categoryMenuIcon={IconClose}
           onCategoryClick={({ id }) => goto(`/category/${id}`)}
           onCategoryMenuClick={({ id }) => removeFromCategory(id)}
@@ -200,10 +197,9 @@
       </div>
     </div>
   </div>
-  </FullscreenDiv>
+</FullscreenDiv>
 
-  <AddToCategoryBottomSheet
+<AddToCategoryBottomSheet
   bind:isOpen={isAddToCategoryBottomSheetOpen}
   onAddToCategoryClick={addToCategory}
-  />
+/>
-{/if}

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}
-  {#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!))}
+          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)} class="w-full">
+          <Button onclick={() => onAddToCategoryClick(categoryInfo!.id as number)} class="w-full">
-              이 카테고리에 추가하기
+            {categoryInfo!.name} 카테고리에 추가하기
           </Button>
         </BottomDiv>
       {/if}
     </FullscreenDiv>
   </BottomSheet>
+{/if}
 
-    <CategoryCreateModal
+<CategoryCreateModal
   bind:isOpen={isCategoryCreateModalOpen}
   onCreateClick={async (name: string) => {
-        if (await requestCategoryCreation(name, categoryInfo.id, $masterKeyStore?.get(1)!)) {
+    if (await requestCategoryCreation(name, categoryInfo!.id, $masterKeyStore?.get(1)!)) {
-          categoryInfoPromise = getCategoryInfo(categoryInfo.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getCategoryInfo(categoryInfo!.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
-    />
+/>
-  {/if}
-{/await}

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,8 +41,7 @@
   <title>카테고리</title>
 </svelte:head>
 
-{#await infoPromise then info}
+{#if info?.exists}
-  {#if info?.exists}
   {#if info.id !== "root"}
     <TopBar title={info.name} />
   {/if}
@@ -46,7 +52,7 @@
       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
+        void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       }}
       onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
       onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
@@ -56,19 +62,20 @@
       }}
     />
   </div>
+{/if}
 
-    <CategoryCreateModal
+<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
+      void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
-    />
+/>
 
-    <CategoryMenuBottomSheet
+<CategoryMenuBottomSheet
   bind:isOpen={isCategoryMenuBottomSheetOpen}
   onRenameClick={() => {
     isCategoryMenuBottomSheetOpen = false;
@@ -78,26 +85,24 @@
     isCategoryMenuBottomSheetOpen = false;
     isCategoryDeleteModalOpen = true;
   }}
-    />
+/>
-    <CategoryRenameModal
+<CategoryRenameModal
   bind:isOpen={isCategoryRenameModalOpen}
   onRenameClick={async (newName: string) => {
     if (await requestCategoryRename(context.selectedCategory!, newName)) {
-          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
-    />
+/>
-    <CategoryDeleteModal
+<CategoryDeleteModal
   bind:isOpen={isCategoryDeleteModalOpen}
   onDeleteClick={async () => {
     if (await requestCategoryDeletion(context.selectedCategory!)) {
-          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
-    />
+/>
-  {/if}
-{/await}

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,8 +95,7 @@
 
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
-{#await infoPromise then info}
+{#if info?.exists}
-  {#if info?.exists}
   <div class="flex h-full flex-col">
     {#if showTopBar}
       <TopBar title={info.name} class="flex-shrink-0" />
@@ -99,6 +105,7 @@
         <UploadStatusCard onclick={() => goto("/file/uploads")} />
         <DownloadStatusCard onclick={() => goto("/file/downloads")} />
       </div>
+      {#key info.id}
         <DirectoryEntries
           {info}
           onEntryClick={({ type, id }) => goto(`/${type}/${id}`)}
@@ -109,22 +116,24 @@
           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>
+{/if}
 
-    <FloatingButton
+<FloatingButton
   icon={IconAdd}
   onclick={() => {
     isEntryCreateBottomSheetOpen = true;
   }}
   class="bottom-24 right-4"
-    />
+/>
-    <EntryCreateBottomSheet
+<EntryCreateBottomSheet
   bind:isOpen={isEntryCreateBottomSheetOpen}
   onDirectoryCreateClick={() => {
     isEntryCreateBottomSheetOpen = false;
@@ -134,18 +143,18 @@
     isEntryCreateBottomSheetOpen = false;
     fileInput?.click();
   }}
-    />
+/>
-    <DirectoryCreateModal
+<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
+      void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
-    />
+/>
-    <DuplicateFileModal
+<DuplicateFileModal
   bind:isOpen={isDuplicateFileModalOpen}
   file={duplicatedFile}
   onbeforeclose={() => {
@@ -156,9 +165,9 @@
     resolveForDuplicateFileModal?.(true);
     isDuplicateFileModalOpen = false;
   }}
-    />
+/>
 
-    <EntryMenuBottomSheet
+<EntryMenuBottomSheet
   bind:isOpen={isEntryMenuBottomSheetOpen}
   onRenameClick={() => {
     isEntryMenuBottomSheetOpen = false;
@@ -168,26 +177,24 @@
     isEntryMenuBottomSheetOpen = false;
     isEntryDeleteModalOpen = true;
   }}
-    />
+/>
-    <EntryRenameModal
+<EntryRenameModal
   bind:isOpen={isEntryRenameModalOpen}
   onRenameClick={async (newName: string) => {
     if (await requestEntryRename(context.selectedEntry!, newName)) {
-          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
-    />
+/>
-    <EntryDeleteModal
+<EntryDeleteModal
   bind:isOpen={isEntryDeleteModalOpen}
   onDeleteClick={async () => {
     if (await requestEntryDeletion(context.selectedEntry!)) {
-          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
-    />
+/>
-  {/if}
-{/await}