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" />;