From df2bb5dc8b6d4a3469ff41d1c601d2a004ff7c20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B0=95=20=ED=95=9C?= <hkang@devmsys.onmicrosoft.com>
Date: Sun, 19 Jul 2026 15:33:13 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EB=93=9C=EC=97=90=20?=
 =?UTF-8?q?=EC=8D=B8=EB=84=A4=EC=9D=BC=20'=EC=83=9D=EC=84=B1=20=EC=A4=91'?=
 =?UTF-8?q?=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

썸네일 미준비 셀이 빈 칸으로 보이던 것을 개선. 스냅샷 flags에
비트1(생성 실패, thumb_state=2)을 추가해 대기/실패를 구분한다.
- 대기(생성 전): 은은한 pulse 스켈레톤(bg-hover)
- 실패: 정적 아이콘(🖼) — 무한 pulse 방지
- 준비됨: 썸네일 이미지

검증: 619개 대기 상태에서 하단 스크롤 시 pulse 스켈레톤 50개 →
생성 완료되며 이미지로 즉시 전환 확인(bg #33363d, animation pulse).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src-tauri/src/commands.rs           |  8 +++++++-
 src/features/grid/JustifiedGrid.tsx | 22 +++++++++++++++++++++-
 src/ipc/commands.ts                 |  4 ++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs
index b0c4aa4..e9f064a 100644
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@@ -307,7 +307,13 @@ fn pack_snapshot(rows: Vec<(i64, Option<u32>, Option<u32>, Option<u32>, i64, i64
         buf.extend_from_slice(&(w.min(65535) as u16).to_le_bytes());
         buf.extend_from_slice(&(h.min(65535) as u16).to_le_bytes());
         buf.push(kind as u8);
-        let flags = if thumb_state == 1 { 1u8 } else { 0u8 };
+        // 비트0 = 썸네일 준비됨(state 1), 비트1 = 생성 시도했으나 실패(state 2).
+        // 둘 다 0이면 생성 대기(state 0) — 프론트에서 스켈레톤/실패표시 구분용.
+        let flags = match thumb_state {
+            1 => 1u8,
+            2 => 2u8,
+            _ => 0u8,
+        };
         buf.push(flags);
     }
     buf
diff --git a/src/features/grid/JustifiedGrid.tsx b/src/features/grid/JustifiedGrid.tsx
index 059c4e3..18a4b38 100644
--- a/src/features/grid/JustifiedGrid.tsx
+++ b/src/features/grid/JustifiedGrid.tsx
@@ -387,6 +387,11 @@ export const JustifiedGrid: Component = () => {
                 const s = snapshot();
                 return !!s && (s.hasThumb(i) || version() > 0);
               };
+              // 썸네일 미준비 상태: 실패(state 2)면 정적 표시, 그 외엔 '생성 중' 스켈레톤.
+              const failed = () => {
+                const s = snapshot();
+                return !!s && s.thumbFailed(i);
+              };
               const isVideo = () => {
                 const s = snapshot();
                 return !!s && s.kind(i) === 1;
@@ -417,7 +422,22 @@ export const JustifiedGrid: Component = () => {
                     if (s) onCellDragStart(e, s, i);
                   }}
                 >
-                  <Show when={showImg() && info()}>
+                  <Show
+                    when={showImg() && info()}
+                    fallback={
+                      // 준비 전: 실패면 정적 아이콘, 대기면 은은한 스켈레톤(생성 중)
+                      <Show
+                        when={!failed()}
+                        fallback={
+                          <div class="grid h-full w-full place-items-center text-[var(--text-muted)]">
+                            <span class="text-base opacity-60">🖼</span>
+                          </div>
+                        }
+                      >
+                        <div class="h-full w-full animate-pulse bg-[var(--bg-hover)]" />
+                      </Show>
+                    }
+                  >
                     <img
                       src={`${thumbUrl(info()!, id())}&v=${version()}`}
                       class="h-full w-full object-cover"
diff --git a/src/ipc/commands.ts b/src/ipc/commands.ts
index 7f6b2d3..0383d9b 100644
--- a/src/ipc/commands.ts
+++ b/src/ipc/commands.ts
@@ -98,6 +98,10 @@ export class Snapshot {
   hasThumb(i: number): boolean {
     return (this.view.getUint8(i * ITEM_BYTES + 9) & 1) !== 0;
   }
+  /** 썸네일 생성을 시도했으나 실패함(state 2) — 대기와 구분해 스켈레톤을 멈추기 위함 */
+  thumbFailed(i: number): boolean {
+    return (this.view.getUint8(i * ITEM_BYTES + 9) & 2) !== 0;
+  }
   /** 레이아웃 워커 입력용 종횡비 배열 (미지 치수는 1:1) */
   aspectRatios(): Float32Array {
     const out = new Float32Array(this.count);