썸네일 로딩 로직 최적화

src/lib/components/atoms/buttons/FileThumbnailButton.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { browser } from "$app/environment";
+  import { getFileThumbnail } from "$lib/modules/file";
   import type { SummarizedFileInfo } from "$lib/modules/filesystem";
-  import { requestFileThumbnailDownload } from "$lib/services/file";
 
   interface Props {
     info: SummarizedFileInfo;
@@ -10,25 +9,16 @@
 
   let { info, onclick }: Props = $props();
 
-  let showThumbnail = $derived(
-    browser && (info.contentType.startsWith("image/") || info.contentType.startsWith("video/")),
-  );
-  let thumbnailPromise = $derived(
-    showThumbnail ? requestFileThumbnailDownload(info.id, info.dataKey?.key) : null,
-  );
+  let thumbnail = $derived(getFileThumbnail(info));
 </script>
 
 <button
   onclick={onclick && (() => setTimeout(() => onclick(info), 100))}
   class="aspect-square overflow-hidden rounded transition active:scale-95 active:brightness-90"
 >
-  {#await thumbnailPromise}
+  {#if $thumbnail}
+    <img src={$thumbnail} alt={info.name} class="h-full w-full object-cover" />
+  {:else}
     <div class="h-full w-full bg-gray-100"></div>
-  {:then thumbnail}
-    {#if thumbnail}
-      <img src={thumbnail} alt={info.name} class="h-full w-full object-cover" />
-    {:else}
-      <div class="h-full w-full bg-gray-100"></div>
-    {/if}
-  {/await}
+  {/if}
 </button>

src/lib/components/organisms/Category/File.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { browser } from "$app/environment";
   import { ActionEntryButton } from "$lib/components/atoms";
   import { DirectoryEntryLabel } from "$lib/components/molecules";
+  import { getFileThumbnail } from "$lib/modules/file";
   import type { CategoryFileInfo } from "$lib/modules/filesystem";
-  import { requestFileThumbnailDownload } from "$lib/services/file";
   import type { SelectedFile } from "./service";
 
   import IconClose from "~icons/material-symbols/close";
@@ -16,12 +15,7 @@
 
   let { info, onclick, onRemoveClick }: Props = $props();
 
-  let showThumbnail = $derived(
-    browser && (info.contentType.startsWith("image/") || info.contentType.startsWith("video/")),
-  );
-  let thumbnailPromise = $derived(
-    showThumbnail ? requestFileThumbnailDownload(info.id, info.dataKey?.key) : null,
-  );
+  let thumbnail = $derived(getFileThumbnail(info));
 </script>
 
 <ActionEntryButton
@@ -30,9 +24,5 @@
   actionButtonIcon={onRemoveClick && IconClose}
   onActionButtonClick={() => onRemoveClick?.(info)}
 >
-  {#await thumbnailPromise}
-    <DirectoryEntryLabel type="file" name={info.name} />
-  {:then thumbnail}
-    <DirectoryEntryLabel type="file" thumbnail={thumbnail ?? undefined} name={info.name} />
-  {/await}
+  <DirectoryEntryLabel type="file" thumbnail={$thumbnail} name={info.name} />
 </ActionEntryButton>