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>

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

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