@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/features/scripts/script-schedules-table.tsx

@@ -1,7 +1,10 @@
 'use client';
 
 import { type ReactNode, useCallback, useMemo } from 'react';
-import { type ColumnDef, DataTable, type Row, useDataTable } from '../../ui/data-table';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
+import { type ColumnDef, DataTable, dataTableLoadingRows, type Row, useDataTable } from '../../ui/data-table';
+import { DATA_TABLE_SKELETON_ROWS } from '../../ui/data-table/utils';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { TruncateText } from '../../ui/truncate-text';
 import { OSTypeBadgeGroup } from '../os-type-badge-group';
 import { ScheduleDateTimeCell, ScriptNameCell } from './script-cells';
@@ -40,6 +43,23 @@ export interface ScriptSchedulesTableProps {
 
 const VALUE_CLASS = 'text-ods-text-primary text-h4';
 
+/** A value of the row (its repeat, its device count); a bar while the row is read (a loading scope). */
+function ScheduleValueCell({ children }: { children: ReactNode }) {
+  if (useLoadingScope()) return <TextLineSkeleton type="h4" className="w-16" />;
+  return <span className={VALUE_CLASS}>{children}</span>;
+}
+
+/** A schedule still being read: a row the table keys, every field a cell shows empty (each draws its loading form). */
+const loadingSchedule = (id: string): ScriptScheduleTableRow => ({
+  id,
+  name: '',
+  supportedPlatforms: [],
+  startsAt: { date: '', time: '' },
+  repeat: '',
+  deviceCount: 0,
+  href: '',
+});
+
 /**
  * The script schedules as a table: what runs, on which operating systems,
  * when, how often and on how many devices.
@@ -53,8 +73,11 @@ export function ScriptSchedulesTable({
   stickyHeader = false,
   stickyHeaderOffset,
   rightSlot,
-  skeletonRows = 10,
+  skeletonRows,
 }: ScriptSchedulesTableProps) {
+  // ONE switch: the host's read (`isLoading`) or a page's loading scope draws the header and the body's skeleton
+  // rows alike.
+  const loading = useLoadingScope() || isLoading;
   const columns = useMemo<ColumnDef<ScriptScheduleTableRow>[]>(() => {
     const cell = (layout: ScriptsTableColumnLayout, render: (row: ScriptScheduleTableRow) => ReactNode) => ({
       id: layout.id,
@@ -76,25 +99,34 @@ export function ScriptSchedulesTable({
           <TruncateText tone="secondary">{row.trigger}</TruncateText>
         ) : null,
       ),
-      cell(SCHEDULE_COLUMNS.repeat, row => (row.repeat ? <span className={VALUE_CLASS}>{row.repeat}</span> : null)),
-      cell(SCHEDULE_COLUMNS.deviceCount, row => <span className={VALUE_CLASS}>{row.deviceCount}</span>),
+      cell(SCHEDULE_COLUMNS.repeat, row =>
+        row.repeat != null ? <ScheduleValueCell>{row.repeat}</ScheduleValueCell> : null,
+      ),
+      cell(SCHEDULE_COLUMNS.deviceCount, row => <ScheduleValueCell>{row.deviceCount}</ScheduleValueCell>),
     ];
     if (renderActions) {
       all.push(cell(SCHEDULE_COLUMNS.actions, row => <RowActionsCell>{renderActions(row)}</RowActionsCell>));
     }
-    all.push(cell(SCHEDULE_COLUMNS.open, row => (row.href ? <OpenInNewTabCell href={row.href} /> : null)));
+    all.push(
+      cell(SCHEDULE_COLUMNS.open, row => (row.href !== undefined ? <OpenInNewTabCell href={row.href} /> : null)),
+    );
     return hideColumns ? all.filter(column => !hideColumns.includes(column.id ?? '')) : all;
   }, [hideColumns, renderActions]);
 
+  // While loading the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
+  const loadingRows = useMemo(
+    () => (loading ? dataTableLoadingRows(skeletonRows ?? DATA_TABLE_SKELETON_ROWS, loadingSchedule) : null),
+    [loading, skeletonRows],
+  );
   const table = useDataTable<ScriptScheduleTableRow>({
-    data: rows,
+    data: loadingRows ?? rows,
     columns,
     getRowId: (row: ScriptScheduleTableRow) => row.id,
     enableSorting: false,
   });
 
-  const rowHref = useCallback((row: ScriptScheduleTableRow) => row.href, []);
-  const showHeader = isLoading || rows.length > 0;
+  const rowHref = useCallback((row: ScriptScheduleTableRow) => row.href || undefined, []);
+  const showHeader = loading || rows.length > 0;
 
   return (
     <DataTable table={table}>
@@ -102,7 +134,8 @@ export function ScriptSchedulesTable({
         <DataTable.Header stickyHeader={stickyHeader} stickyHeaderOffset={stickyHeaderOffset} rightSlot={rightSlot} />
       )}
       <DataTable.Body
-        loading={isLoading}
+        loading={loading}
+        loadingCells
         skeletonRows={skeletonRows}
         emptyMessage={emptyMessage}
         rowClassName="mb-1"

package/src/components/features/scripts/script-shell-badge.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { cn } from '../../../utils/cn';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { scriptShellType } from './shell-types';
 
 export interface ScriptShellBadgeProps {
@@ -12,6 +14,15 @@ export interface ScriptShellBadgeProps {
 
 /** A script's shell: its icon and label from `SCRIPT_SHELL_TYPES`. */
 export function ScriptShellBadge({ value, className, iconClassName }: ScriptShellBadgeProps) {
+  // The shell is still being read (empty, in a loading scope): its icon box and its label as bars.
+  if (useLoadingScope() && !value) {
+    return (
+      <span className={cn('flex items-center gap-2', className)}>
+        <UnifiedSkeleton className={cn('h-5 w-5', iconClassName)} />
+        <TextLineSkeleton type="inherit" as="span" className="w-20" />
+      </span>
+    );
+  }
   const shell = scriptShellType(value);
   const Icon = shell?.icon;
 

package/src/components/features/scripts/scripts-table-shared.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 import { openInNewTab } from '../../../utils/open-in-new-tab';
 import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
 import { Button } from '../../ui/button';
+import { useLoadingScope } from '../../ui/loading-scope';
 import type { ScriptsTableColumnLayout } from './scripts-table-columns';
 
 /** A column's `meta` from its layout: the fields a live table and its skeleton agree on. */
@@ -26,12 +27,17 @@ export function RowActionsCell({ children }: { children: ReactNode }) {
   );
 }
 
-/** The last cell of a row: its page in a new tab. The row is a link itself, so this opens by script. */
+/**
+ * The last cell of a row: its page in a new tab. The row is a link itself, so this opens by script. While the row is
+ * read (a loading scope) the button is static chrome: drawn real and inert.
+ */
 export function OpenInNewTabCell({ href }: { href: string }) {
+  const loading = useLoadingScope();
   return (
     <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
       <Button
-        onClick={openInNewTab(href)}
+        onClick={loading ? undefined : openInNewTab(href)}
+        disabled={loading}
         variant="outline"
         size="icon"
         leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}

package/src/components/features/scripts/scripts-table.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { type ReactNode, useCallback, useMemo } from 'react';
-import { type ColumnDef, DataTable, type Row, useDataTable } from '../../ui/data-table';
+import { type ColumnDef, DataTable, dataTableLoadingRows, type Row, useDataTable } from '../../ui/data-table';
+import { DATA_TABLE_SKELETON_ROWS } from '../../ui/data-table/utils';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { SquareAvatar } from '../../ui/square-avatar';
 import { TruncateText } from '../../ui/truncate-text';
 import { OSTypeBadgeGroup } from '../os-type-badge-group';
@@ -42,6 +44,16 @@ export interface ScriptsTableProps {
 
 const BADGE_ICON = 'h-4 w-4 content-md:h-6 content-md:w-6';
 
+/** A script still being read: a row the table keys, every field a cell shows empty (each cell draws its loading form). */
+const loadingScript = (id: string): ScriptTableRow => ({
+  id,
+  name: '',
+  shellType: '',
+  supportedPlatforms: [],
+  author: { name: '', initials: '' },
+  href: '',
+});
+
 /**
  * The script library as a table: name and description, shell, the operating
  * systems it runs on and who added it. Rows are a view-model the host maps its
@@ -56,8 +68,11 @@ export function ScriptsTable({
   stickyHeader = false,
   stickyHeaderOffset,
   rightSlot,
-  skeletonRows = 10,
+  skeletonRows,
 }: ScriptsTableProps) {
+  // ONE switch: the host's read (`isLoading`) or a page's loading scope draws the header and the body's skeleton
+  // rows alike.
+  const loading = useLoadingScope() || isLoading;
   const columns = useMemo<ColumnDef<ScriptTableRow>[]>(() => {
     const cell = (layout: ScriptsTableColumnLayout, render: (row: ScriptTableRow) => ReactNode) => ({
       id: layout.id,
@@ -93,19 +108,24 @@ export function ScriptsTable({
     if (renderActions) {
       all.push(cell(SCRIPT_COLUMNS.actions, row => <RowActionsCell>{renderActions(row)}</RowActionsCell>));
     }
-    all.push(cell(SCRIPT_COLUMNS.open, row => (row.href ? <OpenInNewTabCell href={row.href} /> : null)));
+    all.push(cell(SCRIPT_COLUMNS.open, row => (row.href !== undefined ? <OpenInNewTabCell href={row.href} /> : null)));
     return hideColumns ? all.filter(column => !hideColumns.includes(column.id ?? '')) : all;
   }, [hideColumns, renderActions]);
 
+  // While loading the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
+  const loadingRows = useMemo(
+    () => (loading ? dataTableLoadingRows(skeletonRows ?? DATA_TABLE_SKELETON_ROWS, loadingScript) : null),
+    [loading, skeletonRows],
+  );
   const table = useDataTable<ScriptTableRow>({
-    data: rows,
+    data: loadingRows ?? rows,
     columns,
     getRowId: (row: ScriptTableRow) => row.id,
     enableSorting: false,
   });
 
-  const rowHref = useCallback((row: ScriptTableRow) => row.href, []);
-  const showHeader = isLoading || rows.length > 0;
+  const rowHref = useCallback((row: ScriptTableRow) => row.href || undefined, []);
+  const showHeader = loading || rows.length > 0;
 
   return (
     <DataTable table={table}>
@@ -113,7 +133,8 @@ export function ScriptsTable({
         <DataTable.Header stickyHeader={stickyHeader} stickyHeaderOffset={stickyHeaderOffset} rightSlot={rightSlot} />
       )}
       <DataTable.Body
-        loading={isLoading}
+        loading={loading}
+        loadingCells
         skeletonRows={skeletonRows}
         emptyMessage={emptyMessage}
         rowClassName="mb-1"

package/src/components/features/select-button.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import Image from '../../embed-shims/next-image';
 import { cn } from '../../utils/cn';
 import { CheckCircleIcon } from '../icons-v2-generated/signs-and-symbols/check-circle-icon';
+import { Button } from '../ui/button';
 import { Tag, type TagProps } from '../ui/tag';
 
 export interface SelectButtonProps {
@@ -39,26 +40,17 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
     ref,
   ) => {
     return (
-      <button
+      <Button
+        // A selectable option drawn as a field: its accent border marks the picked one.
+        variant="field"
         ref={ref}
         type="button"
         role="option"
         aria-selected={selected}
+        data-state={selected ? 'open' : undefined}
         disabled={disabled}
         onClick={onClick}
-        className={cn(
-          'group flex h-11 items-center gap-1 rounded-[6px] border px-3 py-3 transition-colors duration-200 content-md:h-16 content-md:gap-2 content-md:px-4',
-          'w-full text-left font-body',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
-          'disabled:pointer-events-none disabled:opacity-50',
-          // Hover / active move the BACKGROUND only, like Input — the accent
-          // border is reserved for the selected state, so an unselected button
-          // no longer flashes "selected" under the cursor.
-          selected
-            ? 'border-ods-accent bg-ods-open-yellow-light hover:bg-ods-open-yellow-light-hover active:bg-ods-open-yellow-light-action'
-            : 'border-ods-border bg-ods-card hover:bg-ods-bg-hover active:bg-ods-bg-active',
-          className,
-        )}
+        className={cn('content-md:h-16', className)}
       >
         {icon && (
           <span
@@ -104,7 +96,7 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
         {tag && <Tag variant={tagVariant} className="shrink-0" label={tag} />}
 
         {selected && <CheckCircleIcon className="size-4 shrink-0 text-ods-accent content-md:size-6" />}
-      </button>
+      </Button>
     );
   },
 );

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

@@ -138,7 +138,7 @@ export function StatusFilterComponent({
  * `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({
+function StatusFilterComponentSkeleton({
   label = 'Status',
   options,
   pills = STATUS_FILTER_SKELETON_PILLS,

package/src/components/features/tags-selector.tsx

@@ -122,18 +122,19 @@ export function TagsSelector({
             >
               {tag.name}
               {!disabled && (
-                <button
+                <Button
+                  variant="transparent"
+                  size="icon-inline"
                   type="button"
                   onClick={e => {
                     e.preventDefault();
                     e.stopPropagation();
                     handleTagRemove(tag.id);
                   }}
-                  className="inline-flex h-4 w-4 items-center justify-center rounded-full text-ods-text-secondary transition-colors hover:bg-ods-accent/20 hover:text-ods-text-primary"
                   aria-label={`Remove ${tag.name}`}
                 >
-                  <X className="h-3 w-3" />
-                </button>
+                  <X />
+                </Button>
               )}
             </span>
           ))}

package/src/components/features/ticket-status-config-list/ticket-status-config-list.tsx

@@ -2,6 +2,8 @@
 
 import type { ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
+import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
+import { TicketStatusConfigRow } from '../../ui/ticket-status-config-row';
 import { SortableList } from '../sortable-list/sortable-list';
 import { SortableMoveButtons } from '../sortable-list/sortable-move-buttons';
 import { type SortableDragHandleProps, useSortableItem } from '../sortable-list/use-sortable-item';
@@ -24,9 +26,23 @@ export interface TicketStatusConfigListProps<T extends { id: string }> {
   renderRow: (item: T, args: SortableRowRenderArgs) => ReactNode;
   /** Names a row for the live region and the move buttons, e.g. its status name. */
   getItemLabel?: (index: number) => string | undefined;
+  /**
+   * The rows are being read. With no rows yet the list draws `skeletonRows` row skeletons (a loading scope does the
+   * same); rows it already has draw themselves.
+   */
+  loading?: boolean;
+  /** Row skeletons while loading with no rows. Default `TICKET_STATUS_CONFIG_LIST_SKELETON_ROWS`. */
+  skeletonRows?: number;
   className?: string;
 }
 
+/** Row skeletons a status list draws while it has none: a typical list (the list is not paged). */
+export const TICKET_STATUS_CONFIG_LIST_SKELETON_ROWS = 4;
+
+const noop = () => {};
+
+const LIST_CLASS = 'flex w-full flex-col gap-[var(--spacing-system-xs)]';
+
 /**
  * A reorderable list of config rows (ticket statuses, AI quick actions), built
  * on {@link SortableList} — Pragmatic drag and drop on desktop, an explicit
@@ -40,14 +56,43 @@ export function TicketStatusConfigList<T extends { id: string }>({
   onReorder,
   renderRow,
   getItemLabel,
+  loading: loadingProp,
+  skeletonRows = TICKET_STATUS_CONFIG_LIST_SKELETON_ROWS,
   className,
 }: TicketStatusConfigListProps<T>) {
+  // ONE switch: in a page's loading state (or while the host reads the rows) an empty list is its skeleton.
+  const loading = useLoadingScope() || !!loadingProp;
+  if (loading && items.length === 0) {
+    return (
+      // The SAME sortable list and rows, inert: the reorder controls a row has (the grip, or the touch move pair) are
+      // drawn for real, and nothing in it can be dragged or pressed while it loads.
+      <div inert aria-hidden className="contents">
+        <SortableList onReorder={noop} className={cn(LIST_CLASS, className)}>
+          <LoadingItems count={skeletonRows}>
+            {index => (
+              <SortableRow index={index} count={skeletonRows}>
+                {args => (
+                  // The row's own loading form. A list that knows nothing yet draws `custom` rows (the kind a host can
+                  // recolor, so the Color column is drawn).
+                  <TicketStatusConfigRow
+                    variant="custom"
+                    statusKey=""
+                    name=""
+                    onColorChange={noop}
+                    dragHandleProps={args.dragHandleProps}
+                    moveButtons={args.moveButtons}
+                    loading
+                  />
+                )}
+              </SortableRow>
+            )}
+          </LoadingItems>
+        </SortableList>
+      </div>
+    );
+  }
   return (
-    <SortableList
-      onReorder={onReorder}
-      getItemLabel={getItemLabel}
-      className={cn('flex w-full flex-col gap-[var(--spacing-system-xs)]', className)}
-    >
+    <SortableList onReorder={onReorder} getItemLabel={getItemLabel} className={cn(LIST_CLASS, className)}>
       {items.map((item, index) => (
         <SortableRow key={item.id} index={index} count={items.length} label={getItemLabel?.(index)}>
           {args => renderRow(item, args)}
@@ -77,6 +122,8 @@ function SortableRow({
       // stacking follows DOM order, so a row dragged DOWN slides UNDER the rows
       // below it while a row dragged up correctly renders on top.
       className={isDragging ? 'relative z-10' : undefined}
+      // One row of a read list: how many there are is the record's (the height gate counts them).
+      data-loading-item
     >
       {children({
         dragHandleProps,

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

@@ -219,7 +219,7 @@ function biteMediaStyle(cssAspect: string, height?: number, heightMobile?: numbe
   };
 }
 
-export interface VideoBiteCardSkeletonProps {
+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. */
@@ -232,12 +232,7 @@ export interface VideoBiteCardSkeletonProps {
  * 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) {
+function VideoBiteCardSkeleton({ aspect = '9:16', height, heightMobile, className }: VideoBiteCardSkeletonProps) {
   const cssAspect = RATIO_TO_CSS_ASPECT[ratioToCategory(detectAspectRatio(aspect))];
   return (
     <div
@@ -255,7 +250,7 @@ export function VideoBiteCardSkeleton({
   );
 }
 
-export interface VideoBitesStripSkeletonProps {
+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). */
@@ -273,7 +268,7 @@ export interface VideoBitesStripSkeletonProps {
  * 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({
+function VideoBitesStripSkeleton({
   count = VIDEO_BITES_SKELETON_COUNT,
   aspect = '9:16',
   title = DEFAULT_VIDEO_BITES_TITLE,

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

@@ -125,13 +125,6 @@ export function VideoHoverPreviewSurface({
   }, [gateControlled]);
   // Continuation forces the media + player on regardless of hover/viewport gate.
   const showMedia = continuation || (gateControlled ? playerMounted : isNear);
-  // The hover player (and its script, the Mux player and hls.js: the largest a page can load) mounts on the first
-  // hover, never before: a card that is near the screen but never hovered shows its poster and costs nothing more.
-  // A widget pinned to the screen is always "near", so mounting on proximity loaded that script on every page view
-  // (CU-17tkuw5xp4q). Once mounted it stays, so the next hover plays at once.
-  const [engaged, setEngaged] = useState(false);
-  if ((active || continuation) && !engaged) setEngaged(true);
-  const showPlayer = continuation || engaged;
 
   // Poster resolution — the shared entity-card cover fallback chain: the real
   // thumbnail, dropped on load error. Null → first-frame facade (unless the
@@ -166,45 +159,43 @@ export function VideoHoverPreviewSurface({
 
           {badge === 'play' && !active && !continuation && <VideoPlayBadge className="absolute inset-0 z-10 m-auto" />}
 
-          {showPlayer ? (
-            <div
-              className="absolute inset-0"
-              style={{ '--media-background-color': 'transparent' } as React.CSSProperties}
-            >
-              <Video
-                // Remount between modes: `startTime` + autoplay are LOAD-TIME
-                // props (playback-core binds them to one-shot durationchange /
-                // loadstart handlers), so re-propping an already-loaded element
-                // silently drops the seek. Only a Mux preview rewrite changed
-                // `src` before, which is why HLS resumed and plain MP4 did not.
-                key={continuation ? 'continuation' : 'preview'}
-                kind="file"
-                // Rendition-capped in BOTH modes: the cap was only skipped
-                // because changing `src` used to be the sole trigger for the
-                // seek; the explicit key handles that now, and a 320px mini
-                // player should never pull the uncapped manifest.
-                url={previewUrl}
-                poster={posterUrl}
-                {...(continuation
-                  ? {
-                      startTime,
-                      autoPlay: autoPlay && startMuted,
-                      startMuted,
-                      autoPlayUnmuted: autoPlay && !startMuted,
-                    }
-                  : { playWhenHovered: active })}
-                chromeless
-                layout="fill"
-                fit={fit}
-                preload={preload}
-                mutedIntent={mutedIntent}
-                hideMutedBadge={hideMutedBadge}
-                onMutedFallbackChange={onMutedFallbackChange}
-                onEnded={onEnded}
-                playerHandleRef={previewHandleRef}
-              />
-            </div>
-          ) : null}
+          <div
+            className="absolute inset-0"
+            style={{ '--media-background-color': 'transparent' } as React.CSSProperties}
+          >
+            <Video
+              // Remount between modes: `startTime` + autoplay are LOAD-TIME
+              // props (playback-core binds them to one-shot durationchange /
+              // loadstart handlers), so re-propping an already-loaded element
+              // silently drops the seek. Only a Mux preview rewrite changed
+              // `src` before, which is why HLS resumed and plain MP4 did not.
+              key={continuation ? 'continuation' : 'preview'}
+              kind="file"
+              // Rendition-capped in BOTH modes: the cap was only skipped
+              // because changing `src` used to be the sole trigger for the
+              // seek; the explicit key handles that now, and a 320px mini
+              // player should never pull the uncapped manifest.
+              url={previewUrl}
+              poster={posterUrl}
+              {...(continuation
+                ? {
+                    startTime,
+                    autoPlay: autoPlay && startMuted,
+                    startMuted,
+                    autoPlayUnmuted: autoPlay && !startMuted,
+                  }
+                : { playWhenHovered: active })}
+              chromeless
+              layout="fill"
+              fit={fit}
+              preload={preload}
+              mutedIntent={mutedIntent}
+              hideMutedBadge={hideMutedBadge}
+              onMutedFallbackChange={onMutedFallbackChange}
+              onEnded={onEnded}
+              playerHandleRef={previewHandleRef}
+            />
+          </div>
         </>
       ) : (
         <div className="absolute inset-0 bg-ods-card" />

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

@@ -181,6 +181,9 @@ export interface VideoCommonProps {
    * want a minimal look. No-op for file (MP4/HLS) branches.
    */
   minimalControls?: boolean;
+  /** The record is still being read: the video draws its skeleton (its layout's box) and mounts no player. A loading
+   *  scope does the same while no `url` is given. */
+  loading?: boolean;
 }
 
 /**

package/src/components/features/video-source-selector.tsx

@@ -286,15 +286,17 @@ function DefaultVideoPreview({ videoUrl, onDelete, disabled }: DefaultVideoPrevi
       <div className="aspect-video max-h-[300px] w-full">
         <Video kind="file" url={videoUrl} />
       </div>
-      <button
+      <Button
+        variant="overlay"
+        size="icon-sm"
         type="button"
         onClick={onDelete}
         aria-label="Delete video"
-        className="absolute right-2 top-2 rounded-full bg-black/60 p-1.5 transition-colors hover:bg-black/80"
+        className="absolute right-2 top-2"
         disabled={disabled}
       >
-        <X className="h-4 w-4 text-ods-text-on-dark" />
-      </button>
+        <X />
+      </Button>
     </div>
   );
 }