From 9096aab8c845586d0866d01ed2576933728d3a9b Mon Sep 17 00:00:00 2001
From: James Russo <james.russo@heygen.com>
Date: Mon, 26 Oct 2026 03:56:16 +0000
Subject: [PATCH] fix(studio): still placeholder while a video frame thumbnail
 loads (#6389)

Co-authored-by: Yi-111-a <153097222+Yi-111-a@users.noreply.github.com>
---
 .../src/components/ui/VideoFrameThumbnail.test.tsx       | 9 +++++++++
 .../studio/src/components/ui/VideoFrameThumbnail.tsx     | 4 +---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/studio/src/components/ui/VideoFrameThumbnail.test.tsx b/packages/studio/src/components/ui/VideoFrameThumbnail.test.tsx
index a5e919e4d0..28ef9c0b28 100644
--- a/packages/studio/src/components/ui/VideoFrameThumbnail.test.tsx
+++ b/packages/studio/src/components/ui/VideoFrameThumbnail.test.tsx
@@ -161,6 +161,15 @@ describe("VideoFrameThumbnail", () => {
     expect(video.loadCalls).toBe(2);
   });
 
+  it("shows a still, full-size placeholder while the frame loads", () => {
+    render({ src: "clip.mp4" });
+    const placeholder = container.querySelector("[data-thumbnail-loading]");
+    expect(placeholder).not.toBeNull();
+    expect(placeholder?.className).not.toMatch(/\banimate-/);
+    expect(placeholder?.classList.contains("w-full")).toBe(true);
+    expect(placeholder?.classList.contains("h-full")).toBe(true);
+  });
+
   it("retries with a fresh video element when src changes", () => {
     render({ src: "a.mp4" });
     act(() => root.render(<VideoFrameThumbnail src="b.mp4" />));
diff --git a/packages/studio/src/components/ui/VideoFrameThumbnail.tsx b/packages/studio/src/components/ui/VideoFrameThumbnail.tsx
index 92dbcc57c5..907baeb631 100644
--- a/packages/studio/src/components/ui/VideoFrameThumbnail.tsx
+++ b/packages/studio/src/components/ui/VideoFrameThumbnail.tsx
@@ -69,9 +69,7 @@ export function VideoFrameThumbnail({
   }
 
   if (!frame) {
-    return (
-      <div className="w-full h-full bg-neutral-800 animate-pulse motion-reduce:animate-none" />
-    );
+    return <div data-thumbnail-loading className="w-full h-full bg-panel-surface" />;
   }
 
   return <img src={frame} alt="" draggable={false} className="w-full h-full object-contain" />;