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

package/src/components/features/remote-session/remote-desktop-chat-message-row.tsx

@@ -3,11 +3,14 @@
 import { cn } from '../../../utils/cn';
 import { formatTime } from '../../../utils/format-date';
 import { TextLineSkeleton } from '../../loading/unified-skeleton';
+import { loadingItemProps, useLoadingScope } from '../../ui/loading-scope';
 import { SquareAvatar } from '../../ui/square-avatar';
 
-/** The row's layout, read by the row and by its skeleton, so the skeleton is the row's size. */
+/** The row's layout. */
 const MESSAGE_ROW_CLASS = 'grid grid-cols-1 gap-[var(--spacing-system-xxs)]';
 const MESSAGE_HEAD_CLASS = 'flex items-center gap-[var(--spacing-system-xxs)]';
+/** The technician's avatar, in px. */
+const TECHNICIAN_AVATAR_PX = 24;
 const MESSAGE_NAME_CLASS = 'min-w-0 flex-1 truncate text-h4 [font-family:var(--font-family-heading)]';
 
 export interface RemoteDesktopChatMessageRowProps {
@@ -18,6 +21,11 @@ export interface RemoteDesktopChatMessageRowProps {
   /** When the message was sent: an ISO timestamp or a `Date`. */
   sentAt: string | Date;
   body: string;
+  /** The message is still being read: the SAME row draws its name, time and body as bars (and the technician's avatar
+   *  in its loading form on a technician's row). A loading scope does the same. */
+  loading?: boolean;
+  /** List markers (`data-loading-item`), set by the list on its rows in both forms. */
+  [key: `data-${string}`]: unknown;
 }
 
 /**
@@ -29,6 +37,9 @@ export interface RemoteDesktopChatMessageRowProps {
  * Names are Azeret Mono 18/24 medium in the mockup - a combination the ODS
  * composite utilities don't carry (`text-h5` is the 14px uppercase caption),
  * so the heading family is applied over `text-h4` via the ODS font variable.
+ *
+ * ONE switch (`useLoadingScope() || loading`): while the chat is read the row keeps its structure and draws its read
+ * text as bars.
  */
 export function RemoteDesktopChatMessageRow({
   authorName,
@@ -36,37 +47,42 @@ export function RemoteDesktopChatMessageRow({
   avatarUrl,
   sentAt,
   body,
+  loading: loadingProp = false,
+  ...props
 }: RemoteDesktopChatMessageRowProps) {
+  const loading = useLoadingScope() || loadingProp;
   return (
-    <div className={MESSAGE_ROW_CLASS}>
+    <div className={MESSAGE_ROW_CLASS} aria-hidden={loading || undefined} {...loadingItemProps(props)}>
       <div className={MESSAGE_HEAD_CLASS}>
         {isTechnician && (
-          <SquareAvatar variant="round" sizePx={24} src={avatarUrl} alt={authorName} className="shrink-0" />
+          <SquareAvatar
+            loading={loading}
+            variant="round"
+            sizePx={TECHNICIAN_AVATAR_PX}
+            src={avatarUrl}
+            alt={authorName}
+            className="shrink-0"
+          />
         )}
-        <span className={cn(MESSAGE_NAME_CLASS, isTechnician ? 'text-ods-accent' : 'text-ods-text-secondary')}>
-          {authorName}
-        </span>
-        {/* The time is in the viewer's zone, which a server render cannot know. */}
-        <span suppressHydrationWarning className="shrink-0 text-ods-text-secondary text-h6">
-          {formatTime(sentAt)}
+        <span
+          className={cn(MESSAGE_NAME_CLASS, !loading && (isTechnician ? 'text-ods-accent' : 'text-ods-text-secondary'))}
+        >
+          {loading ? <TextLineSkeleton type="inherit" as="span" className="w-24" /> : authorName}
         </span>
+        {loading ? (
+          <TextLineSkeleton type="h6" as="span" className="w-12 shrink-0" />
+        ) : (
+          // The time is in the viewer's zone, which a server render cannot know.
+          <span suppressHydrationWarning className="shrink-0 text-ods-text-secondary text-h6">
+            {formatTime(sentAt)}
+          </span>
+        )}
       </div>
-      <p className="whitespace-pre-wrap text-ods-text-primary text-h4">{body}</p>
-    </div>
-  );
-}
-
-/** A message row while the chat is read: the name and the time as bars on the name row, one line of the body. */
-export function RemoteDesktopChatMessageRowSkeleton() {
-  return (
-    <div className={MESSAGE_ROW_CLASS} aria-hidden>
-      <div className={MESSAGE_HEAD_CLASS}>
-        <span className={MESSAGE_NAME_CLASS}>
-          <TextLineSkeleton type="inherit" as="span" className="w-24" />
-        </span>
-        <TextLineSkeleton type="h6" as="span" className="w-12 shrink-0" />
-      </div>
-      <TextLineSkeleton type="h4" className="w-3/4" />
+      {loading ? (
+        <TextLineSkeleton type="h4" className="w-3/4" />
+      ) : (
+        <p className="whitespace-pre-wrap text-ods-text-primary text-h4">{body}</p>
+      )}
     </div>
   );
 }

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

@@ -4,7 +4,8 @@ import { useEffect, useRef } from 'react';
 import { cn } from '../../../utils/cn';
 import { ChatInput } from '../../chat/chat-input';
 import { LoadingRegion } from '../../loading/loading-region';
-import { RemoteDesktopChatMessageRow, RemoteDesktopChatMessageRowSkeleton } from './remote-desktop-chat-message-row';
+import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
+import { RemoteDesktopChatMessageRow } from './remote-desktop-chat-message-row';
 import type { RemoteSessionChatMessage } from './types';
 
 /**
@@ -46,7 +47,7 @@ export interface RemoteDesktopChatPanelProps {
  */
 export function RemoteDesktopChatPanel({
   messages,
-  loading,
+  loading: loadingProp,
   technician,
   sending,
   onSend,
@@ -55,6 +56,9 @@ export function RemoteDesktopChatPanel({
   const scrollRef = useRef<HTMLDivElement>(null);
   // System notices (the "joined the chat" line) are the end user's indication only.
   const rows = messages.filter(message => message.author !== 'system');
+  // ONE switch: in a page's loading state (or while the host reads a history it has none of yet) the stream is its
+  // skeleton.
+  const loading = useLoadingScope() || (rows.length === 0 && !!loadingProp);
 
   // Keep the newest message in view as the stream grows.
   useEffect(() => {
@@ -74,14 +78,23 @@ export function RemoteDesktopChatPanel({
     >
       <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto">
         <div className="flex min-h-full flex-col justify-end gap-[var(--spacing-system-xsf)]">
-          {rows.length === 0 && loading ? (
+          {loading ? (
             // The chat while it is read: a screen of the panel's own message rows, stacked by a one-column grid
             // (the thread above is already the column flexbox: WEBVIEW-001).
             <LoadingRegion label="Loading the chat" className="grid grid-cols-1 gap-[var(--spacing-system-xsf)]">
-              {Array.from({ length: CHAT_PANEL_SKELETON_ROWS }, (_, i) => (
-                // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-                <RemoteDesktopChatMessageRowSkeleton key={i} />
-              ))}
+              <LoadingItems count={CHAT_PANEL_SKELETON_ROWS}>
+                {i => (
+                  // A conversation: the technician and the user take turns.
+                  <RemoteDesktopChatMessageRow
+                    loading
+                    data-loading-item
+                    isTechnician={i % 2 === 1}
+                    authorName=""
+                    sentAt=""
+                    body=""
+                  />
+                )}
+              </LoadingItems>
             </LoadingRegion>
           ) : rows.length === 0 ? (
             <p className="text-center text-ods-text-muted text-h6">No messages yet - say hello to the user.</p>
@@ -89,6 +102,7 @@ export function RemoteDesktopChatPanel({
             rows.map(message => (
               <RemoteDesktopChatMessageRow
                 key={message.id}
+                data-loading-item
                 authorName={
                   message.name ||
                   (message.author === 'technician' ? technician.name : REMOTE_DESKTOP_CHAT_END_USER_NAME)

package/src/components/features/remote-session/remote-desktop-fullscreen-toolbar.tsx

@@ -63,19 +63,11 @@ export function RemoteDesktopFullscreenToolbar({
             <ActionsMenuDropdown
               groups={displayMenuGroups}
               customTrigger={
-                <button
-                  type="button"
-                  aria-label="Switch display"
-                  className={
-                    'flex h-8 flex-shrink-0 items-center gap-[var(--spacing-system-xs)] rounded-[6px] ' +
-                    'border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)] ' +
-                    'text-ods-text-primary hover:border-ods-border-hover'
-                  }
-                >
-                  <MonitorIcon className="h-4 w-4" />
-                  <span className="whitespace-nowrap text-h5">{currentDisplayLabel}</span>
-                  <Chevron02DownIcon className="h-4 w-4" />
-                </button>
+                <Button variant="outline" size="small" type="button" aria-label="Switch display" className="shrink-0">
+                  <MonitorIcon />
+                  <span className="whitespace-nowrap">{currentDisplayLabel}</span>
+                  <Chevron02DownIcon />
+                </Button>
               }
             />
           )}

package/src/components/features/remote-session/remote-desktop-view.tsx

@@ -178,21 +178,19 @@ export function RemoteDesktopView({
           width of the card (Figma 2155:109503): the label never competes with the
           device's name for the header's width. Hidden with one display or none. */}
       {displayMenuGroups.length > 0 && (
-        <ActionsMenuDropdown
-          groups={displayMenuGroups}
-          align="start"
-          customTrigger={
-            <button
-              type="button"
-              aria-label="Switch display"
-              className="flex w-full items-center gap-[var(--spacing-system-xs)] border-t border-ods-border p-[var(--spacing-system-sf)] text-left text-ods-text-primary outline-none transition-colors hover:bg-ods-bg-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus"
-            >
-              <MonitorIcon className="h-6 w-6 shrink-0" />
-              <span className="min-w-0 flex-1 truncate text-h4">{currentDisplayLabel}</span>
-              <Chevron02DownIcon className="h-6 w-6 shrink-0" />
-            </button>
-          }
-        />
+        <div className="border-t border-ods-border">
+          <ActionsMenuDropdown
+            groups={displayMenuGroups}
+            align="start"
+            customTrigger={
+              <Button variant="row" type="button" aria-label="Switch display">
+                <MonitorIcon className="h-6 w-6" />
+                <span className="min-w-0 flex-1 truncate">{currentDisplayLabel}</span>
+                <Chevron02DownIcon className="h-6 w-6" />
+              </Button>
+            }
+          />
+        </div>
       )}
     </div>
   );

package/src/components/features/remote-session/remote-session-block.tsx

@@ -40,19 +40,17 @@ export const RemoteSessionBlockFrame = forwardRef<HTMLDivElement, RemoteSessionB
         )}
       >
         {children}
-        <button
-          type="button"
-          className="flex h-12 w-full shrink-0 items-center gap-[var(--spacing-system-xs)] border-t border-ods-border bg-ods-card px-[var(--spacing-system-m)]"
-          onClick={onHide}
-        >
-          <Chevrons03RightIcon size={24} />
-          <span className="min-w-0 flex-1 truncate text-left text-ods-text-secondary text-h4">Hide this Block</span>
-          <OpenframeLogoIcon
-            color="var(--color-text-on-accent)"
-            secondaryColor="var(--color-text-primary)"
-            className="size-6 shrink-0"
-          />
-        </button>
+        <div className="shrink-0 border-t border-ods-border bg-ods-card">
+          <Button variant="row" type="button" className="h-12" onClick={onHide}>
+            <Chevrons03RightIcon size={24} />
+            <span className="min-w-0 flex-1 truncate text-ods-text-secondary">Hide this Block</span>
+            <OpenframeLogoIcon
+              color="var(--color-text-on-accent)"
+              secondaryColor="var(--color-text-primary)"
+              className="size-6"
+            />
+          </Button>
+        </div>
       </div>
     );
   },
@@ -153,36 +151,36 @@ export const RemoteSessionMinimizedChip = forwardRef<HTMLButtonElement, RemoteSe
   ({ party, onExpand, dragHandlers }, ref) => {
     const technician = party.technicianName;
     return (
-      <button
+      <Button
+        variant="card"
         ref={ref}
         type="button"
         aria-label="Show session block"
-        className={cn(
-          'flex shrink-0 flex-col overflow-hidden rounded-md border border-ods-border',
-          dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS,
-        )}
+        className={cn('w-auto shrink-0', dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS)}
         onClick={onExpand}
         {...dragHandlers}
       >
-        {technician ? (
-          <SquareAvatar
-            sizePx={48}
-            src={party.technicianAvatarUrl ?? undefined}
-            fallback={technician}
-            className="rounded-none"
-          />
-        ) : (
-          <RemoteSessionOrgLogo
-            name={party.organizationName}
-            logoUrl={party.organizationLogoUrl}
-            sizePx={48}
-            className="rounded-none border-0"
-          />
-        )}
-        <span className="flex h-9 w-12 items-center justify-center border-t border-ods-border bg-ods-card">
-          <Chevrons03LeftIcon size={24} />
+        <span className="flex flex-col overflow-hidden rounded-md border border-ods-border">
+          {technician ? (
+            <SquareAvatar
+              sizePx={48}
+              src={party.technicianAvatarUrl ?? undefined}
+              fallback={technician}
+              className="rounded-none"
+            />
+          ) : (
+            <RemoteSessionOrgLogo
+              name={party.organizationName}
+              logoUrl={party.organizationLogoUrl}
+              sizePx={48}
+              className="rounded-none border-0"
+            />
+          )}
+          <span className="flex h-9 w-12 items-center justify-center border-t border-ods-border bg-ods-card">
+            <Chevrons03LeftIcon size={24} />
+          </span>
         </span>
-      </button>
+      </Button>
     );
   },
 );

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

@@ -133,14 +133,16 @@ export function RemoteSessionChatPanel({
           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"
         />
-        <button
+        <Button
+          variant="transparent"
+          size="icon"
           type="submit"
           aria-label="Send message"
           disabled={!ready}
-          className="flex size-12 shrink-0 items-center justify-center"
+          className="shrink-0"
         >
-          <Send03Icon size={24} color="currentColor" className="text-ods-text-primary" />
-        </button>
+          <Send03Icon size={24} color="currentColor" />
+        </Button>
       </form>
     </div>
   );

package/src/components/features/remote-session/remote-session-events.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { cn } from '../../../utils/cn';
+import { Button } from '../../ui/button';
 import type { RemoteSessionEvent } from './types';
 
 /** `mm:ss` from the start of a recording; `h:mm:ss` from the first hour on. */
@@ -29,15 +30,13 @@ export function RemoteSessionEventList({ events, activeEventId, onSelect, classN
       <ol className="flex w-full flex-col gap-[var(--spacing-system-xxs)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-m)]">
         {events.map(event => (
           <li key={event.id}>
-            <button
+            <Button
+              variant="row"
               type="button"
               aria-current={event.id === activeEventId || undefined}
+              data-state={event.id === activeEventId ? 'active' : undefined}
               onClick={() => onSelect?.(event)}
-              className={cn(
-                'flex w-full items-start gap-[var(--spacing-system-xxs)] rounded-md p-[var(--spacing-system-xxs)] text-left outline-none transition-colors',
-                'hover:bg-ods-bg-hover focus-visible:ring-2 focus-visible:ring-ods-focus',
-                event.id === activeEventId && 'bg-ods-border hover:bg-ods-border',
-              )}
+              className="items-start"
             >
               <span className="w-[84px] shrink-0 text-ods-text-secondary text-h4">
                 {formatRemoteSessionOffset(event.offsetMs)}
@@ -46,7 +45,7 @@ export function RemoteSessionEventList({ events, activeEventId, onSelect, classN
                 <span className="text-ods-text-primary text-h4">{event.title}</span>
                 {event.detail && <span className="text-ods-text-secondary text-h6">{event.detail}</span>}
               </span>
-            </button>
+            </Button>
           </li>
         ))}
       </ol>
@@ -77,15 +76,18 @@ export function RemoteSessionTimelineMarkers({
         const share = Math.min(1, Math.max(0, event.offsetMs / durationMs));
         const label = `${event.title} at ${formatRemoteSessionOffset(event.offsetMs)}`;
         return (
-          <button
+          <Button
+            variant="card"
             key={event.id}
             type="button"
             aria-label={label}
             title={label}
             onClick={() => onSelect?.(event)}
             style={{ left: `${share * 100}%` }}
-            className="absolute top-0 h-4 w-1 -translate-x-1/2 rounded-md bg-ods-text-secondary outline-none transition-colors hover:bg-ods-text-primary focus-visible:ring-2 focus-visible:ring-ods-focus"
-          />
+            className="absolute top-0 h-4 w-1 -translate-x-1/2"
+          >
+            <span className="block size-full rounded-md bg-ods-text-secondary" />
+          </Button>
         );
       })}
     </div>

package/src/components/features/remote-session/remote-session-overlay.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '../../../utils/cn';
 import { MonitorOffIcon } from '../../icons-v2-generated';
+import { Button } from '../../ui/button';
 
 /*
  * The always-visible "your screen is being controlled" indicator: a border
@@ -21,13 +22,9 @@ export function RemoteSessionBorder({ className }: { className?: string }) {
  */
 export function RemoteSessionPill({ onEndSession }: { onEndSession: () => void }) {
   return (
-    <button
-      type="button"
-      className="flex items-center gap-[var(--spacing-system-xsf)] rounded-b-md bg-ods-warning px-[var(--spacing-system-m)] py-[var(--spacing-system-xs)] text-ods-text-on-accent"
-      onClick={onEndSession}
-    >
+    <Button variant="warning" type="button" onClick={onEndSession}>
       <MonitorOffIcon size={24} color="currentColor" />
-      <span className="whitespace-nowrap text-h3">End Session</span>
-    </button>
+      <span className="whitespace-nowrap">End Session</span>
+    </Button>
   );
 }

package/src/components/features/scripts/execution-cells.tsx

@@ -4,6 +4,8 @@ import type { ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
 import { AgentMark } from '../../agent-mark';
 import { MonitorIcon } from '../../icons-v2-generated/devices/monitor-icon';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { Tag } from '../../ui/tag';
 import { TruncateText } from '../../ui/truncate-text';
 import { scriptExecutionStatus } from './execution-status';
@@ -61,6 +63,8 @@ export function ExecutionStatusCell({ status }: { status: string | null | undefi
  * has it. `name` is a node so a host can draw its own empty mark.
  */
 export function ExecutionDeviceCell({ name, organization }: { name: ReactNode; organization?: string | null }) {
+  // While the row is read (a loading scope) the customer line is drawn too: its loading form is a bar.
+  const loading = useLoadingScope();
   return (
     <div className="flex min-w-0 flex-col justify-center gap-1">
       <div className="flex min-w-0 items-center gap-1">
@@ -68,9 +72,9 @@ export function ExecutionDeviceCell({ name, organization }: { name: ReactNode; o
         {/* So the name shrinks and ellipsizes next to the icon. */}
         <div className="min-w-0 flex-1">{typeof name === 'string' ? <TruncateText>{name}</TruncateText> : name}</div>
       </div>
-      {organization && (
+      {(organization || loading) && (
         <TruncateText variant="h6" tone="secondary">
-          {organization}
+          {organization ?? ''}
         </TruncateText>
       )}
     </div>
@@ -116,7 +120,9 @@ export function ExecutionInitiatorCell({
 
 /** The Result column: the first two lines of what the run printed, or the host's empty mark. */
 export function ExecutionResultCell({ result, empty = null }: { result?: string | null; empty?: ReactNode }) {
-  return result ? <TruncateText lines={2}>{result}</TruncateText> : <>{empty}</>;
+  // While the row is read (a loading scope) the output is two bars (`TruncateText`'s own loading form).
+  const loading = useLoadingScope();
+  return result || loading ? <TruncateText lines={2}>{result ?? ''}</TruncateText> : <>{empty}</>;
 }
 
 /**
@@ -129,16 +135,24 @@ export function ScriptExecutionResult({
   result,
   inFlight = false,
   empty,
+  loading: loadingProp = false,
   className,
 }: {
   result?: string | null;
   inFlight?: boolean;
   empty: ReactNode;
+  /** The execution is still being read: the output is one `text-h4` line, the "Result" caption real. A loading
+   *  scope does the same. */
+  loading?: boolean;
   className?: string;
 }) {
+  // ONE switch: while the execution is read the output line is its skeleton; the caption is copy.
+  const loading = useLoadingScope() || loadingProp;
   return (
     <div className={cn('flex flex-col gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]', className)}>
-      {result ? (
+      {loading ? (
+        <TextLineSkeleton type="h4" className="w-3/4 max-w-full" />
+      ) : result ? (
         <div className="whitespace-pre-wrap break-words text-ods-text-primary text-h4">{result}</div>
       ) : (
         <div className="text-ods-text-secondary text-h4">{inFlight ? 'Waiting for output…' : empty}</div>

package/src/components/features/scripts/schedule-form/schedule-script-picker-card.tsx

@@ -131,17 +131,17 @@ export function ScheduleScriptPickerCard({
           }`}
         >
           {dragAndDropEnabled && (
-            <button
+            <Button
+              variant="transparent"
+              size="icon"
               type="button"
               {...dragHandleProps}
               disabled={disabled}
               aria-label={`Reorder ${selected?.name || `script ${index + 1}`}`}
-              className={`flex size-12 shrink-0 items-center justify-center rounded-[6px] text-ods-text-secondary hover:text-ods-text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-ods-border-focus disabled:cursor-not-allowed disabled:opacity-30 ${
-                isDragging ? 'cursor-grabbing text-ods-text-primary' : 'cursor-grab'
-              }`}
+              className={`shrink-0 ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}
             >
               <DraggerIcon size={24} />
-            </button>
+            </Button>
           )}
 
           <Controller

package/src/components/features/scripts/schedule-form/schedule-timing-fields.tsx

@@ -5,6 +5,7 @@ import { useCallback, useMemo } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { cn } from '../../../../utils/cn';
 import { XmarkCircleIcon } from '../../../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
+import { Button } from '../../../ui/button';
 import { CheckboxBlock } from '../../../ui/checkbox-block';
 import { DatePickerInputSimple } from '../../../ui/date-picker';
 import { Label } from '../../../ui/label';
@@ -304,14 +305,16 @@ export function ScheduleTimingFields({
                     invalid={!!dateError || (showErrors && !!fieldState.error)}
                   />
                   {field.value && !fieldsDisabled && (
-                    <button
+                    <Button
+                      variant="transparent"
+                      size="icon-sm"
                       type="button"
                       onClick={() => field.onChange(null)}
                       aria-label="Clear date"
-                      className="absolute right-3 top-6 -translate-y-1/2 text-ods-text-secondary hover:text-ods-text-primary"
+                      className="absolute right-2 top-6 -translate-y-1/2"
                     >
                       <XmarkCircleIcon size={24} />
-                    </button>
+                    </Button>
                   )}
                 </div>
               )}

package/src/components/features/scripts/script-executions-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 {
   ExecutionDeviceCell,
@@ -36,6 +38,17 @@ export interface ScriptExecutionTableRow {
   href?: string;
 }
 
+/** An execution still being read: a row the table keys, every field a cell shows empty (each draws its loading form). */
+const loadingExecution = (id: string): ScriptExecutionTableRow => ({
+  id,
+  executionId: '',
+  timestamp: '',
+  status: '',
+  machineName: '',
+  initiator: { name: '', initials: '' },
+  href: '',
+});
+
 export interface ScriptExecutionsTableProps {
   rows: ScriptExecutionTableRow[];
   /**
@@ -75,8 +88,11 @@ export function ScriptExecutionsTable({
   emptyMessage = 'No executions found.',
   showHeader: withHeader = true,
   rightSlot,
-  skeletonRows = 10,
+  skeletonRows,
 }: ScriptExecutionsTableProps) {
+  // 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<ScriptExecutionTableRow>[]>(() => {
     const renderers: Record<string, (row: ScriptExecutionTableRow) => ReactNode> = {
       [EXECUTION_COLUMNS.executionId.id]: row => (
@@ -104,7 +120,7 @@ export function ScriptExecutionsTable({
         />
       ),
       [EXECUTION_COLUMNS.result.id]: row => <ExecutionResultCell result={row.result} />,
-      [EXECUTION_COLUMNS.open.id]: row => (row.href ? <OpenInNewTabCell href={row.href} /> : null),
+      [EXECUTION_COLUMNS.open.id]: row => (row.href !== undefined ? <OpenInNewTabCell href={row.href} /> : null),
     };
     // No row menu here: its one action (copy the id) is the product's, so the actions column is left out.
     return layout
@@ -118,21 +134,27 @@ export function ScriptExecutionsTable({
       }));
   }, [layout, hideColumns]);
 
+  // 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, loadingExecution) : null),
+    [loading, skeletonRows],
+  );
   const table = useDataTable<ScriptExecutionTableRow>({
-    data: rows,
+    data: loadingRows ?? rows,
     columns,
     getRowId: (row: ScriptExecutionTableRow) => row.id,
     enableSorting: false,
   });
 
-  const rowHref = useCallback((row: ScriptExecutionTableRow) => row.href, []);
-  const showHeader = withHeader && (isLoading || rows.length > 0);
+  const rowHref = useCallback((row: ScriptExecutionTableRow) => row.href || undefined, []);
+  const showHeader = withHeader && (loading || rows.length > 0);
 
   return (
     <DataTable table={table}>
       {showHeader && <DataTable.Header rightSlot={rightSlot} />}
       <DataTable.Body
-        loading={isLoading}
+        loading={loading}
+        loadingCells
         skeletonRows={skeletonRows}
         emptyMessage={emptyMessage}
         rowClassName="mb-1"