From 33abfd14b488eb66a307bfd0677dd587a1b9c039 Mon Sep 17 00:00:00 2001
From: "posthog[bot]" <206114724+posthog[bot]@users.noreply.github.com>
Date: Thu, 13 Aug 2026 13:17:43 +0000
Subject: [PATCH] fix(video-bites): render a card skeleton before the media
 mounts

VideoHoverPreviewSurface painted a bare bg-ods-card rectangle while the
IntersectionObserver mount gate had not yet reported the card as near the
viewport. On the flamingo.run homepage carousel this showed as empty dark
boxes during a fast marquee glide or a chevron jump, because the observer
runs async and lags a fast scroll.

The un-mounted branch now renders real card chrome: the poster (a lazy
next/image, so off-screen cards fetch nothing) plus the center play glyph,
or an animated shimmer when a bite has no thumbnail. An ungated card reads
as a card instead of a flat dark box.

Generated-By: PostHog Desktop
Task-Id: fae7cfe4-7c8e-4c70-aa31-0a4cf1fe6805
---
 .../features/video-hover-preview.tsx          | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/openframe-frontend-core/src/components/features/video-hover-preview.tsx b/openframe-frontend-core/src/components/features/video-hover-preview.tsx
index 0fc10d91b..2ab9cd9f4 100644
--- a/openframe-frontend-core/src/components/features/video-hover-preview.tsx
+++ b/openframe-frontend-core/src/components/features/video-hover-preview.tsx
@@ -194,7 +194,29 @@ export function VideoHoverPreviewSurface({
             </div>
         </>
       ) : (
-        <div className="absolute inset-0 bg-ods-card" />
+        // Un-mounted skeleton: the player-mount gate has not fired yet, or the
+        // marquee carried this card far off-screen. Render real card chrome —
+        // the poster (or a shimmer when a bite has none) plus the play glyph —
+        // so an ungated card still reads as a card instead of a flat dark box.
+        // The poster is a lazy <Image>, so off-screen cards fetch nothing.
+        <>
+          {posterSrc ? (
+            <Image
+              src={posterSrc}
+              alt=""
+              fill
+              sizes={posterSizes}
+              unoptimized
+              onError={onPosterError}
+              className="object-cover"
+            />
+          ) : (
+            <div className="absolute inset-0 animate-pulse bg-ods-border" />
+          )}
+          {badge === 'play' && (
+            <VideoPlayBadge className="absolute inset-0 z-10 m-auto" />
+          )}
+        </>
       )}
     </div>
   );