@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/src/components/features/remote-session/remote-session-chat-panel.tsx

@@ -129,7 +129,7 @@ export function RemoteSessionChatPanel({
           value={draft}
           onChange={event => onDraftChange(event.target.value)}
           disabled={!ready}
-          placeholder={ready ? 'Enter your Message...' : 'Loading chat...'}
+          placeholder={ready ? 'Enter your Message...' : 'Connecting to the chat'}
           aria-label="Message"
           className="h-12 min-w-0 flex-1 rounded-md border border-ods-border bg-ods-bg px-[var(--spacing-system-s)] text-ods-text-primary outline-none text-h6 placeholder:text-ods-text-secondary"
         />

package/src/components/features/status-filter-component.tsx

@@ -1,7 +1,11 @@
 'use client';
 
 import { Filter } from 'lucide-react';
+import { ICON_SIZE } from '../../styles/component-sizes';
+import { cn } from '../../utils/cn';
+import { InteractiveSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button';
+import { useLoadingScope } from '../ui/loading-scope';
 
 export interface StatusOption {
   value: string;
@@ -37,8 +41,23 @@ export interface StatusFilterComponentProps {
    * (which React then pairs against this component during hydration).
    */
   showAll?: boolean;
+  /** The options are read on the client and have not arrived: the row draws its skeleton, as in a loading scope. */
+  loading?: boolean;
 }
 
+/** The row's frame, label and controls, read by the row and by its skeleton, so the skeleton is the row's size. */
+const STATUS_FILTER_ROW_CLASS = 'flex flex-wrap items-center gap-3 rounded-lg border border-ods-border bg-ods-card p-4';
+const STATUS_FILTER_LABEL_CLASS = 'flex items-center gap-2';
+const STATUS_FILTER_ICON_CLASS = `${ICON_SIZE.sm} text-ods-accent`;
+const STATUS_FILTER_LABEL_TEXT_CLASS = 'text-ods-text-secondary text-h5';
+/** The option buttons' type, read by the row and by its skeleton. */
+const STATUS_FILTER_BUTTON_CLASS = 'text-h3';
+const STATUS_FILTER_COUNT_CLASS = 'ml-auto shrink-0 text-ods-text-secondary text-h6';
+/** The option buttons' size, read by the row and by its skeleton (`InteractiveSkeleton.Button size`). */
+const STATUS_FILTER_BUTTON_SIZE = 'small-legacy';
+/** How many option buttons the skeleton draws when the options are read with the page. */
+export const STATUS_FILTER_SKELETON_PILLS = 3;
+
 /**
  * StatusFilterComponent - Reusable status filter for admin dashboards
  *
@@ -54,17 +73,29 @@ export function StatusFilterComponent({
   disabledValues = [],
   label = 'Status',
   showAll = true,
+  loading = false,
 }: StatusFilterComponentProps) {
   // Filter out 'all' from options since we render it separately
   const filteredOptions = statusOptions.filter(option => option.value !== 'all');
 
+  if (useLoadingScope() || loading) {
+    return (
+      <StatusFilterComponentSkeleton
+        label={label}
+        // Options the page states itself are its own words: drawn for real. Read ones arrive empty: boxes.
+        options={filteredOptions.length > 0 ? filteredOptions.map(option => option.label) : undefined}
+        showAll={showAll}
+        showCount={showCount}
+        className={className}
+      />
+    );
+  }
+
   return (
-    <div
-      className={`flex flex-wrap items-center gap-3 rounded-lg border border-ods-border bg-ods-card p-4 ${className}`}
-    >
-      <div className="flex items-center gap-2">
-        <Filter className="h-4 w-4 text-ods-accent" />
-        <span className="text-ods-text-secondary text-h5">{label}</span>
+    <div className={`${STATUS_FILTER_ROW_CLASS} ${className}`}>
+      <div className={STATUS_FILTER_LABEL_CLASS}>
+        <Filter className={STATUS_FILTER_ICON_CLASS} />
+        <span className={STATUS_FILTER_LABEL_TEXT_CLASS}>{label}</span>
       </div>
 
       {/* All button */}
@@ -72,10 +103,10 @@ export function StatusFilterComponent({
         <Button
           type="button"
           variant={selectedStatus === 'all' ? 'accent' : 'outline'}
-          size="small-legacy"
+          size={STATUS_FILTER_BUTTON_SIZE}
           onClick={() => onStatusChange('all')}
           disabled={disabledValues.includes('all')}
-          className="text-h3"
+          className={STATUS_FILTER_BUTTON_CLASS}
         >
           All
         </Button>
@@ -87,17 +118,80 @@ export function StatusFilterComponent({
           key={option.value}
           type="button"
           variant={selectedStatus === option.value ? 'accent' : 'outline'}
-          size="small-legacy"
+          size={STATUS_FILTER_BUTTON_SIZE}
           onClick={() => onStatusChange(option.value)}
           disabled={disabledValues.includes(option.value)}
-          className="text-h3"
+          className={STATUS_FILTER_BUTTON_CLASS}
         >
           {option.label}
         </Button>
       ))}
 
       {/* Optional count display */}
-      {showCount && <div className="ml-auto shrink-0 text-ods-text-secondary text-h6">{count} items</div>}
+      {showCount && <div className={STATUS_FILTER_COUNT_CLASS}>{count} items</div>}
+    </div>
+  );
+}
+
+/**
+ * The status filter while its page is read: the same row, its label and "All" for real (the row's own words), the
+ * `options` the page states for real, else `pills` option buttons as boxes of the buttons' size. With `showCount`
+ * the count is a bar before "items".
+ */
+export function StatusFilterComponentSkeleton({
+  label = 'Status',
+  options,
+  pills = STATUS_FILTER_SKELETON_PILLS,
+  showAll = true,
+  showCount = false,
+  className,
+}: {
+  label?: string;
+  /** Option labels the page states itself: drawn as real buttons (in place of `pills` boxes). */
+  options?: string[];
+  pills?: number;
+  showAll?: boolean;
+  showCount?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={cn(STATUS_FILTER_ROW_CLASS, className)} aria-hidden inert>
+      <div className={STATUS_FILTER_LABEL_CLASS}>
+        <Filter className={STATUS_FILTER_ICON_CLASS} />
+        <span className={STATUS_FILTER_LABEL_TEXT_CLASS}>{label}</span>
+      </div>
+      {showAll && (
+        <Button
+          type="button"
+          variant="outline"
+          size={STATUS_FILTER_BUTTON_SIZE}
+          className={STATUS_FILTER_BUTTON_CLASS}
+          tabIndex={-1}
+        >
+          All
+        </Button>
+      )}
+      {options
+        ? options.map(option => (
+            <Button
+              key={option}
+              type="button"
+              variant="outline"
+              size={STATUS_FILTER_BUTTON_SIZE}
+              className={STATUS_FILTER_BUTTON_CLASS}
+              tabIndex={-1}
+            >
+              {option}
+            </Button>
+          ))
+        : Array.from({ length: pills }, (_, index) => (
+            <InteractiveSkeleton.Button key={index} size={STATUS_FILTER_BUTTON_SIZE} />
+          ))}
+      {showCount && (
+        <div className={STATUS_FILTER_COUNT_CLASS}>
+          <TextLineSkeleton type="inherit" as="span" className="inline-block w-6 align-top" /> items
+        </div>
+      )}
     </div>
   );
 }

package/src/components/features/use-video-warmup.ts

@@ -39,13 +39,6 @@ import { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { useChatRuntime } from '../../contexts/chat-runtime-context';
 import { useNearViewport } from '../../hooks/use-near-viewport';
-// Re-export from the server-safe `mux-origins.ts` module so the
-// constants are NOT bound to this `'use client'` file. See the
-// JSDoc in `mux-origins.ts` for the bug history. Backward-compat:
-// existing imports that read `MUX_STREAM_ORIGIN` from
-// `@flamingo-stack/openframe-frontend-core/components/features`
-// continue to resolve through this re-export.
-export { MUX_STREAM_ORIGIN, MUX_IMAGE_ORIGIN } from './mux-origins';
 import { MUX_STREAM_ORIGIN, MUX_IMAGE_ORIGIN } from './mux-origins';
 
 /**

package/src/components/features/use-walkthrough-video.ts

@@ -17,6 +17,7 @@
  */
 
 import { useQuery } from '@tanstack/react-query';
+import { useLoadingScope } from '../ui/loading-scope';
 import { useCaptions } from './use-captions';
 import type { WalkthroughVideoData } from './walkthrough-video';
 
@@ -39,7 +40,10 @@ export interface UseWalkthroughVideoResult {
 }
 
 export function useWalkthroughVideo(opts: UseWalkthroughVideoOptions): UseWalkthroughVideoResult {
-  const { endpoint, initialData, enabled = true, transformCaptionsUrl } = opts;
+  const { endpoint, initialData, enabled: enabledGiven = true, transformCaptionsUrl } = opts;
+  // In a loading scope nothing is fetched.
+  const inScope = useLoadingScope();
+  const enabled = enabledGiven && !inScope;
   const captions = useCaptions();
 
   const query = useQuery<WalkthroughVideoData | null>({

package/src/components/features/video-bites-strip.tsx

@@ -30,6 +30,8 @@ import { useMemo, useRef, useState } from 'react';
 import { useIsomorphicLayoutEffect } from '../../hooks/ui/use-isomorphic-layout-effect';
 import { cn } from '../../utils/cn';
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 import { UserDisplay } from '../user-display';
 import { CardHitLayer } from './card-hit-layer';
 import { CardsStrip, STRIP_CELL_MAX_WIDTH } from './cards-strip';
@@ -90,6 +92,9 @@ export interface VideoBitesStripProps {
    *  surfaces pass `sortBitesByFeaturedAtDesc` so display order matches the
    *  featured-recency ranking their server aggregation is capped by. */
   sortComparator?: (a: VideoBiteStripItem, b: VideoBiteStripItem) => number;
+  /** How many cards the strip's loading state draws (in a `LoadingScope`). Default `VIDEO_BITES_SKELETON_COUNT`, a
+   *  full line; 0 where the host's records usually carry none (nothing is drawn). */
+  skeletonCount?: number;
   className?: string;
 }
 
@@ -97,6 +102,15 @@ export interface VideoBitesStripProps {
 // Component
 // =============================================================================
 
+/** A card's height in px per breakpoint (Figma: 416 desktop), the strip's default and its loading state's. */
+export const VIDEO_BITES_CARD_HEIGHT_DESKTOP_PX = 416;
+export const VIDEO_BITES_CARD_HEIGHT_MOBILE_PX = 300;
+/** The widest line a strip bleeds across: a marquee's loading state fills it, the track clips the rest. */
+export const STRIP_LINE_MAX_PX = 2560;
+/** A marquee's loading state is a FULL line of cards: as many 9:16 cards at the desktop height as fill the widest line. */
+export const VIDEO_BITES_SKELETON_COUNT = Math.ceil(
+  STRIP_LINE_MAX_PX / ((VIDEO_BITES_CARD_HEIGHT_DESKTOP_PX * 9) / 16),
+);
 export function VideoBitesStrip({
   bites,
   title = DEFAULT_VIDEO_BITES_TITLE,
@@ -108,20 +122,36 @@ export function VideoBitesStrip({
   autoScroll = true,
   autoScrollSpeed = 60,
   pauseOnHover = true,
-  cardHeightDesktop = 416,
-  cardHeightMobile = 300,
+  cardHeightDesktop = VIDEO_BITES_CARD_HEIGHT_DESKTOP_PX,
+  cardHeightMobile = VIDEO_BITES_CARD_HEIGHT_MOBILE_PX,
   showChevrons = true,
   onBiteNavigate,
   sortComparator = sortBitesByCreatedAtDesc,
+  skeletonCount,
   className,
 }: VideoBitesStripProps): React.ReactElement | null {
+  const inScope = useLoadingScope();
   const items = useMemo(() => {
     const filtered = filterPublished ? bites.filter(b => b.published) : [...bites];
     return filtered.sort(sortComparator);
   }, [bites, filterPublished, sortComparator]);
 
   // Preconnect Mux/Supabase origins once so first hover starts fast.
-  const warmup = useVideoWarmup<HTMLDivElement>({ videoUrl: items[0]?.url || null });
+  const warmup = useVideoWarmup<HTMLDivElement>({ videoUrl: inScope ? null : items[0]?.url || null });
+
+  if (inScope) {
+    return (
+      <VideoBitesStripSkeleton
+        count={skeletonCount ?? VIDEO_BITES_SKELETON_COUNT}
+        title={title}
+        showTitle={showTitle}
+        headerSlot={headerSlot}
+        cardHeightDesktop={cardHeightDesktop}
+        cardHeightMobile={cardHeightMobile}
+        className={className}
+      />
+    );
+  }
 
   return (
     <CardsStrip
@@ -170,6 +200,107 @@ export function VideoBitesStrip({
 // inline title editing) so the admin sees EXACTLY the public card.
 // =============================================================================
 
+/** The card's layout, read by the card and by its skeleton, so the skeleton is the card's size. */
+const BITE_CARD_FRAME_CLASS = 'relative overflow-hidden rounded-md border border-ods-border bg-ods-card';
+const BITE_MEDIA_CLASS = 'relative w-full';
+const BITE_MEDIA_FIXED_HEIGHT_CLASS = 'h-[var(--bite-height-mobile)] min-[768px]:h-[var(--bite-height)]';
+
+/** The media box's size: its aspect, and with a fixed `height` the strip's heights per breakpoint. */
+function biteMediaStyle(cssAspect: string, height?: number, heightMobile?: number): React.CSSProperties {
+  return {
+    aspectRatio: cssAspect,
+    ...(height !== undefined
+      ? ({
+          '--bite-height': `${height}px`,
+          '--bite-height-mobile': `${heightMobile ?? height}px`,
+          maxWidth: STRIP_CELL_MAX_WIDTH,
+        } as React.CSSProperties)
+      : {}),
+  };
+}
+
+export interface VideoBiteCardSkeletonProps {
+  /** The bite's aspect ratio ('9:16' portrait by default). */
+  aspect?: string;
+  /** Fixed card height (strip); omitted, the card fills its cell and the aspect sets the height. */
+  height?: number;
+  heightMobile?: number;
+  className?: string;
+}
+
+/**
+ * A bite card while it is read: the card's own frame and its media box as the skeleton's surface. The title and
+ * the speaker sit in the hover overlay, unseen at rest, so they are not drawn.
+ */
+export function VideoBiteCardSkeleton({
+  aspect = '9:16',
+  height,
+  heightMobile,
+  className,
+}: VideoBiteCardSkeletonProps) {
+  const cssAspect = RATIO_TO_CSS_ASPECT[ratioToCategory(detectAspectRatio(aspect))];
+  return (
+    <div
+      aria-hidden
+      className={cn(BITE_CARD_FRAME_CLASS, height !== undefined ? 'shrink-0' : 'w-full', className)}
+      style={height !== undefined ? { maxWidth: STRIP_CELL_MAX_WIDTH } : undefined}
+    >
+      <div
+        className={cn(BITE_MEDIA_CLASS, height !== undefined && BITE_MEDIA_FIXED_HEIGHT_CLASS)}
+        style={biteMediaStyle(cssAspect, height, heightMobile)}
+      >
+        <UnifiedSkeleton className="absolute inset-0 h-full rounded-none" />
+      </div>
+    </div>
+  );
+}
+
+export interface VideoBitesStripSkeletonProps {
+  /** How many cards. Default `VIDEO_BITES_SKELETON_COUNT` (a full line); 0 draws nothing. */
+  count?: number;
+  /** The bites' aspect ratio ('9:16' by default). */
+  aspect?: string;
+  /** The strip's heading: static copy, drawn as it is. */
+  title?: string;
+  showTitle?: boolean;
+  headerSlot?: React.ReactNode;
+  cardHeightDesktop?: number;
+  cardHeightMobile?: number;
+  className?: string;
+}
+
+/**
+ * The strip while its bites are read: the same `CardsStrip` (its heading, track, gaps and edge bleed), with no
+ * marquee, each card a `VideoBiteCardSkeleton`. `VideoBitesStrip` draws it in a loading scope.
+ */
+export function VideoBitesStripSkeleton({
+  count = VIDEO_BITES_SKELETON_COUNT,
+  aspect = '9:16',
+  title = DEFAULT_VIDEO_BITES_TITLE,
+  showTitle = true,
+  headerSlot,
+  cardHeightDesktop = VIDEO_BITES_CARD_HEIGHT_DESKTOP_PX,
+  cardHeightMobile = VIDEO_BITES_CARD_HEIGHT_MOBILE_PX,
+  className,
+}: VideoBitesStripSkeletonProps) {
+  const cells = useMemo(() => Array.from({ length: count }, (_, i) => i), [count]);
+  return (
+    <CardsStrip
+      items={cells}
+      itemKey={i => `bite-skeleton-${i}`}
+      title={title}
+      showTitle={showTitle}
+      headerSlot={headerSlot}
+      autoScroll={false}
+      showChevrons={false}
+      className={className}
+      renderCard={() => (
+        <VideoBiteCardSkeleton aspect={aspect} height={cardHeightDesktop} heightMobile={cardHeightMobile} />
+      )}
+    />
+  );
+}
+
 export interface VideoBiteCardProps {
   bite: VideoBiteStripItem;
   index: number;
@@ -363,22 +494,10 @@ export function VideoBiteCard({
 
   const media = (
     <div
-      className={cn(
-        'relative w-full',
-        height !== undefined && 'h-[var(--bite-height-mobile)] min-[768px]:h-[var(--bite-height)]',
-      )}
+      className={cn(BITE_MEDIA_CLASS, height !== undefined && BITE_MEDIA_FIXED_HEIGHT_CLASS)}
       // Strip mode: fixed height + aspect drive the width (capped at 90vw,
       // same as the old single-box layout). Editor mode: width-driven.
-      style={{
-        aspectRatio: cssAspect,
-        ...(height !== undefined
-          ? {
-              '--bite-height': `${height}px`,
-              '--bite-height-mobile': `${heightMobile ?? height}px`,
-              maxWidth: STRIP_CELL_MAX_WIDTH,
-            }
-          : {}),
-      }}
+      style={biteMediaStyle(cssAspect, height, heightMobile)}
     >
       {/* THE shared hover-preview media zone (poster → facade → badge →
           controlled hover playback + near-viewport mount gate). The bite strip
@@ -421,11 +540,7 @@ export function VideoBiteCard({
       // (cards move under a stationary pointer — see cards-strip.tsx). The
       // hover area is exactly this card root: media + overlay + toolbar.
       data-strip-card-key={key}
-      className={cn(
-        'group/card relative overflow-hidden rounded-md border border-ods-border bg-ods-card',
-        height !== undefined ? 'shrink-0' : 'w-full',
-        className,
-      )}
+      className={cn('group/card', BITE_CARD_FRAME_CLASS, height !== undefined ? 'shrink-0' : 'w-full', className)}
       style={height !== undefined ? { maxWidth: STRIP_CELL_MAX_WIDTH } : undefined}
       onPointerEnter={handlePointerEnter}
       onPointerLeave={handlePointerLeave}

package/src/components/features/video-hover-preview.tsx

@@ -27,8 +27,9 @@ import { NEAR_VIEWPORT_ROOT_MARGIN } from '../../hooks/use-near-viewport';
 import { cn } from '../../utils/cn';
 import { useCoverImageFallback } from '../chat/entity-cards/use-cover-image-fallback';
 import { toMuxPreviewUrl } from './mux-origins';
-import { Video, type VideoPlayerHandle, type VideoMutedFallbackState } from './video';
+import { Video } from './video';
 import { VideoPlayBadge } from './video-center-badge';
+import type { VideoPlayerHandle, VideoMutedFallbackState } from './video-shared';
 
 export interface VideoHoverPreviewSurfaceProps {
   /** Source URL (Mux HLS / Supabase mp4). Rendition-capped internally. */

package/src/components/features/video.tsx

@@ -41,7 +41,10 @@ import {
   type ComponentType,
 } from 'react';
 import { useNearViewport } from '../../hooks/use-near-viewport';
+import { cn } from '../../utils/cn';
 import { fetchPriorityProp } from '../../utils/fetch-priority';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 import { VideoPlayBadge } from './video-center-badge';
 import type { FilePlayerProps } from './video-file-player';
 import {
@@ -54,17 +57,6 @@ import {
   type VideoYouTubeFacadeProps,
 } from './video-shared';
 
-export {
-  VIDEO_PLAYBACK_FAILED_EVENT,
-  type VideoFailureKind,
-  type VideoFailureReason,
-  type VideoLayout,
-  type VideoMutedFallbackState,
-  type VideoPlaybackFailureDetail,
-  type VideoPlayerHandle,
-  type VideoProps,
-} from './video-shared';
-
 /**
  * The Mux player, fetched when a file video is drawn and not before: the
  * player and hls.js are the largest script a page can load, and most pages
@@ -205,11 +197,15 @@ export function extractYouTubeId(url: string): string | null {
 export function Video(props: VideoProps): React.ReactElement | null {
   // Hooks run unconditionally; the gate only applies when `lazy` is set.
   const { ref: nearRef, isNear } = useNearViewport<HTMLDivElement>();
+  const loading = useLoadingScope();
   const url = props.url;
+  const layout = props.layout ?? 'native';
+  // ONE switch: in a loading scope with no url yet (it is read) the video is its skeleton and no player is mounted;
+  // a url it is given there is the page's own and plays as it is.
+  if (loading && !url) return <VideoSkeleton layout={layout} className={props.className} />;
   if (!url) return null;
 
   const effectiveKind = resolveKind(props, url);
-  const layout = props.layout ?? 'native';
 
   if (props.lazy && !isNear) {
     // Same box, poster only: the observer target IS the reserved space.
@@ -282,6 +278,14 @@ function resolveKind(props: VideoProps, url: string): 'youtube' | 'file' {
   return isYouTubeUrl(url) ? 'youtube' : 'file';
 }
 
+/**
+ * A video while it is read: the player's box in the player's own layout wrapper (so its size and frame are the
+ * player's), drawn as the skeleton's surface. `Video` draws it in a loading scope.
+ */
+export function VideoSkeleton({ layout = 'native', className }: { layout?: VideoLayout; className?: string }) {
+  return wrapWithLayout(<UnifiedSkeleton variant="rectangular" className={cn('h-full w-full', className)} />, layout);
+}
+
 function wrapWithLayout(inner: React.ReactElement, layout: VideoLayout): React.ReactElement {
   switch (layout) {
     case 'centered':

package/src/components/features/walkthrough-video.tsx

@@ -67,6 +67,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import type React from 'react';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useIsHydrated } from '../../hooks/ui/use-is-hydrated';
+import { MEDIA_ASPECT } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
 import {
   WALKTHROUGH_VIDEO_DISMISS_KEY,
@@ -82,15 +83,17 @@ import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button';
 import { DialogPortal, DialogOverlay } from '../ui/dialog';
+import { useLoadingScope } from '../ui/loading-scope';
 import { SquareAvatar } from '../ui/square-avatar';
 import { CardHitLayer } from './card-hit-layer';
-import { Video, type VideoPlayerHandle, type VideoMutedFallbackState } from './video';
+import { Video } from './video';
 import { VideoPlayBadge, VideoUnmuteGlyph } from './video-center-badge';
 import { VideoHoverPreviewSurface } from './video-hover-preview';
+import type { VideoPlayerHandle, VideoMutedFallbackState } from './video-shared';
 
 /** The inline card's box: 16:9 across the host's width, rounded and bordered. ONE string, read by the card and
  *  its skeleton, so the page keeps the same height before and after the player mounts. */
-const INLINE_CARD_BOX_CLASS = 'aspect-video w-full rounded-md border border-ods-border';
+const INLINE_CARD_BOX_CLASS = `${MEDIA_ASPECT.video} w-full rounded-md border border-ods-border`;
 
 /** Wire-shape data for the widget. Kept as the shared contract the hub DAL
  *  re-exports as `PublicWalkthroughVideo & { id }`. `mainVideoUrl`/`youtubeUrl`
@@ -234,6 +237,7 @@ function WalkthroughVideo({
   className,
 }: WalkthroughVideoProps): React.ReactElement | null {
   const inline = placement === 'inline';
+  const inScope = useLoadingScope();
   const dismissEnabled = dismissal !== false;
   const storageKey = (dismissEnabled && dismissal.storageKey) || WALKTHROUGH_VIDEO_DISMISS_KEY;
   // id-match dismissal key: a new video (new id) re-shows the card. No id
@@ -936,6 +940,9 @@ function WalkthroughVideo({
     cardModeRef.current = cardMode;
   });
 
+  // While the page is read the video is not known: inline, the block is its skeleton (the same box); floating, the
+  // card is an overlay that takes no space, so nothing is drawn.
+  if (inScope) return inline ? <InlineWalkthroughVideoSkeleton className={className} /> : null;
   if (!video || (!video.mainVideoUrl && !video.youtubeUrl)) return null;
 
   // The collapsed card is suppressed by the appear-delay mount gate and by