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

package/src/components/features/platform-badge.tsx

@@ -3,6 +3,8 @@
 import { cn } from '../../utils/cn';
 import { getPlatformBrandClasses } from '../../utils/platform-identity';
 import { PlatformMark } from '../chat/utils/icon-loading';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 
 interface PlatformBadgeProps {
   platform?: {
@@ -33,7 +35,15 @@ const sizeClasses = {
   },
 };
 
+/** The chip's frame, read by the badge and by its skeleton, so the skeleton is the badge's size. */
+const PLATFORM_BADGE_FRAME_CLASS = 'inline-flex items-center rounded-full border';
+
 export function PlatformBadge({ platform, size = 'sm', showLabel = true, className }: PlatformBadgeProps) {
+  // ONE switch: while the record is read its platform is not known and the badge is its skeleton; a platform it is
+  // given in a loading scope is the page's own and is drawn as it is.
+  if (useLoadingScope() && !platform) {
+    return <PlatformBadgeSkeleton size={size} showLabel={showLabel} className={className} />;
+  }
   if (!platform) {
     return null;
   }
@@ -46,7 +56,7 @@ export function PlatformBadge({ platform, size = 'sm', showLabel = true, classNa
   return (
     <div
       className={cn(
-        'inline-flex items-center rounded-full border',
+        PLATFORM_BADGE_FRAME_CLASS,
         sizes.container,
         colors.accentBgSoft,
         colors.accentBorderSoft,
@@ -60,3 +70,33 @@ export function PlatformBadge({ platform, size = 'sm', showLabel = true, classNa
     </div>
   );
 }
+
+/**
+ * The badge's box per size, for its skeleton: border + vertical padding + the taller of the mark and the label's
+ * line (the label is `text-h6`, so `lh` is its line height at every width).
+ */
+const PLATFORM_BADGE_SKELETON_SIZE = {
+  xs: { height: 'h-[calc(max(1lh,0.75rem)+0.25rem+2px)]', width: 'w-20', iconOnly: 'w-[calc(0.75rem+0.75rem+2px)]' },
+  sm: { height: 'h-[calc(max(1lh,1rem)+0.5rem+2px)]', width: 'w-24', iconOnly: 'w-[calc(1rem+1rem+2px)]' },
+  md: { height: 'h-[calc(max(1lh,1.25rem)+0.75rem+2px)]', width: 'w-28', iconOnly: 'w-[calc(1.25rem+1.25rem+2px)]' },
+} as const;
+
+/** A platform badge while its record is read: one shape of the badge's height at its size. */
+export function PlatformBadgeSkeleton({
+  size = 'sm',
+  showLabel = true,
+  className,
+}: Pick<PlatformBadgeProps, 'size' | 'showLabel' | 'className'>) {
+  const box = PLATFORM_BADGE_SKELETON_SIZE[size];
+  return (
+    <UnifiedSkeleton
+      as="span"
+      className={cn(
+        'inline-block rounded-full align-middle text-h6',
+        box.height,
+        showLabel ? box.width : box.iconOnly,
+        className,
+      )}
+    />
+  );
+}

package/src/components/features/push-button-selector.tsx

@@ -3,9 +3,12 @@
 import { Check } from 'lucide-react';
 import type React from 'react';
 import { useEffect, useRef } from 'react';
-import { UnifiedSkeleton } from '../loading';
+import { CONTROL_SIZE, TILE_SIZE } from '../../styles/component-sizes';
+import { cn } from '../../utils/cn';
 import { LoadingRegion } from '../loading/loading-region';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Badge, Input } from '../ui';
+import { useLoadingScope } from '../ui/loading-scope';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 
 /** Option ids are whatever the consumer keys its rows by — string (UUID / enum value) or numeric row id. */
@@ -68,6 +71,9 @@ interface PushButtonSelectorProps<Id extends SelectableOptionId = string> {
   isLoading?: boolean;
   error?: string | null;
   skeletonCount?: number;
+  /** Whether the option rows carry a description line, for the skeleton drawn before the rows arrive (default
+   *  true; with rows given, the rows decide). */
+  optionDescriptions?: boolean;
   sections?: SectionDefinition[]; // Optional sections for grouping options
   /** Built-in server-side search input (see PushButtonSelectorSearch). */
   search?: PushButtonSelectorSearch;
@@ -79,39 +85,120 @@ interface PushButtonSelectorProps<Id extends SelectableOptionId = string> {
   footer?: React.ReactNode;
 }
 
-// Composed from the app-wide UnifiedSkeleton system (components/loading),
-// announced once by its LoadingRegion. Each skeleton row
-// mirrors a LOADED option row exactly (bg-ods-bg card, p-4, icon + two
-// 20px-tall text lines + selection box) so the list never jumps on load.
-function PushButtonSelectorSkeleton({
-  region = true,
-  count = 3,
-  hasTitle,
+/** The selector's layout, read by the selector and by its skeleton, so the skeleton is the selector's size. */
+const SELECTOR_STACK_CLASS = 'space-y-4';
+const SELECTOR_TITLE_CLASS = 'text-ods-text-primary text-h5';
+const SELECTOR_HELP_CLASS = 'text-ods-text-secondary text-h6';
+const OPTION_LIST_CLASS = 'space-y-3';
+const SECTIONED_LIST_CLASS = 'space-y-4';
+const SECTION_CLASS = 'space-y-2';
+const SECTION_HEADER_CLASS = 'flex items-center gap-2 px-1';
+const SECTION_LABEL_CLASS = 'font-semibold text-ods-text-primary text-h6';
+const SECTION_DESCRIPTION_CLASS = 'text-ods-text-tertiary text-h6';
+const OPTION_FRAME_CLASS = 'rounded-lg border p-4';
+const OPTION_ROW_CLASS = 'flex items-center justify-between gap-4';
+/** The row's lead: its icon, then its name and description. */
+const OPTION_LEAD_CLASS = 'flex min-w-0 flex-1 items-center gap-3';
+/** The selection box's frame; the box itself is static chrome, so the skeleton draws it for real (unchecked). */
+const SELECTION_BOX_CLASS = `flex ${CONTROL_SIZE.selection} flex-shrink-0 items-center justify-center rounded border-2`;
+const SELECTION_BOX_IDLE_CLASS = 'border-ods-border';
+/** The box an option's icon sits in, read by the row and by its skeleton, so the skeleton's icon is the row's. */
+const OPTION_ICON_BOX_CLASS = `flex ${TILE_SIZE.sm} shrink-0 items-center justify-center`;
+/** An option row's resting surface (not selected, not disabled). */
+const OPTION_IDLE_SURFACE_CLASS = 'border-ods-border bg-ods-bg';
+
+/** One option row while it is read: the row's own frame, an icon box, its name (and description) lines and the
+ *  selection box. */
+function OptionRowSkeleton({ description = true }: { description?: boolean }) {
+  return (
+    <div className={cn(OPTION_FRAME_CLASS, OPTION_IDLE_SURFACE_CLASS)}>
+      <div className={OPTION_ROW_CLASS}>
+        <div className={OPTION_LEAD_CLASS}>
+          <UnifiedSkeleton className={OPTION_ICON_BOX_CLASS} />
+          <div className="min-w-0 flex-1">
+            <TextLineSkeleton type="h6" className="w-24" />
+            {description && <TextLineSkeleton type="h6" className="w-36" />}
+          </div>
+        </div>
+        <div className={cn(SELECTION_BOX_CLASS, SELECTION_BOX_IDLE_CLASS)} aria-hidden />
+      </div>
+    </div>
+  );
+}
+
+/** A section's header, drawn for real: its label and description are the page's own words. */
+function SectionHeader({ section }: { section: SectionDefinition }) {
+  return (
+    <div className={SECTION_HEADER_CLASS}>
+      {section.icon && <div className="text-ods-text-secondary">{section.icon}</div>}
+      <div>
+        <div className={SECTION_LABEL_CLASS}>{section.label}</div>
+        {section.description && <div className={SECTION_DESCRIPTION_CLASS}>{section.description}</div>}
+      </div>
+    </div>
+  );
+}
+
+/** Option rows while they are read, grouped under the real section headers when there are sections. */
+function OptionListSkeleton({
+  count,
+  sections,
+  description,
 }: {
+  count: number;
+  sections?: SectionDefinition[];
+  description?: boolean;
+}) {
+  const rows = (n: number) =>
+    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+    Array.from({ length: n }, (_, i) => <OptionRowSkeleton key={i} description={description} />);
+  if (!sections || sections.length === 0) return <div className={OPTION_LIST_CLASS}>{rows(count)}</div>;
+  const perSection = Math.max(1, Math.round(count / sections.length));
+  return (
+    <div className={SECTIONED_LIST_CLASS}>
+      {sections.map(section => (
+        <div key={section.id} className={SECTION_CLASS}>
+          <SectionHeader section={section} />
+          <div className={SECTION_CLASS}>{rows(perSection)}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export interface PushButtonSelectorSkeletonProps {
+  /** How many option rows to draw (the selector's `skeletonCount`). */
+  count?: number;
+  /** The selector's title and help text: static copy, drawn as they are. */
+  title?: string;
+  helpText?: string;
+  /** Sections, whose headers are drawn as they are, each over its share of the rows. */
+  sections?: SectionDefinition[];
+  /** Whether the rows carry a description line under the name (default true). */
+  description?: boolean;
   /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
   region?: boolean;
-  count?: number;
-  hasTitle?: boolean;
-}) {
+  className?: string;
+}
+
+/**
+ * The selector while its options are read: its title, section headers and help text drawn for real, every option
+ * row a skeleton of the row. `PushButtonSelector` draws it while `isLoading` and in a loading scope.
+ */
+export function PushButtonSelectorSkeleton({
+  count = 3,
+  title,
+  helpText,
+  sections,
+  description,
+  region = true,
+  className,
+}: PushButtonSelectorSkeletonProps) {
   return (
-    <LoadingRegion label="Loading options" announce={region} className="space-y-3">
-      {hasTitle && <UnifiedSkeleton className="h-5 w-20" />}
-      <div className="space-y-3">
-        {Array.from({ length: count }, (_, i) => (
-          <div key={i} className="rounded-lg border border-ods-border bg-ods-bg p-4">
-            <div className="flex items-center justify-between gap-4">
-              <div className="flex items-center gap-3">
-                <UnifiedSkeleton className="h-8 w-8" />
-                <div>
-                  <UnifiedSkeleton variant="text" className="mb-2 h-4 w-24" />
-                  <UnifiedSkeleton variant="text" className="h-4 w-36" />
-                </div>
-              </div>
-              <UnifiedSkeleton className="h-6 w-6" />
-            </div>
-          </div>
-        ))}
-      </div>
+    <LoadingRegion label="Loading options" announce={region} className={cn(SELECTOR_STACK_CLASS, className)}>
+      {title && <h3 className={SELECTOR_TITLE_CLASS}>{title}</h3>}
+      <OptionListSkeleton count={count} sections={sections} description={description} />
+      {helpText && <div className={SELECTOR_HELP_CLASS}>{helpText}</div>}
     </LoadingRegion>
   );
 }
@@ -141,6 +228,7 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
   isLoading = false,
   error = null,
   skeletonCount = 3,
+  optionDescriptions = true,
   sections,
   search,
   lazyLoad,
@@ -152,6 +240,11 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
   // (before the early returns) per the rules of hooks. Pass a STABLE
   // onLoadMore (react-query's fetchNextPage is) — an inline arrow re-arms
   // the observer each render (harmless, just wasteful).
+  // A loading scope is a loading state of its own: the selector draws its skeleton, whatever `isLoading` says.
+  const inScope = useLoadingScope();
+  const loading = isLoading || inScope;
+  // The rows' skeleton takes the given rows' shape (a name only, or a name and a description) when there are rows.
+  const skeletonDescription = options.length > 0 ? options.some(option => !!option.description) : optionDescriptions;
   const scrollRef = useRef<HTMLDivElement | null>(null);
   const sentinelRef = useRef<HTMLDivElement | null>(null);
   const lazyHasMore = lazyLoad?.hasMore ?? false;
@@ -196,11 +289,16 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
 
   // LOADING / ERROR STATES — legacy (unframed) consumers keep the historical
   // whole-component swap, byte-identical.
-  if (isLoading && !framed) {
+  if (loading && !framed) {
     return (
-      <div className={className}>
-        <PushButtonSelectorSkeleton count={skeletonCount} hasTitle={!!title} />
-      </div>
+      <PushButtonSelectorSkeleton
+        count={inScope && options.length > 0 ? options.length : skeletonCount}
+        title={title}
+        helpText={helpText}
+        sections={sections}
+        description={skeletonDescription}
+        className={className}
+      />
     );
   }
   if (error && !framed) {
@@ -244,22 +342,28 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
     const optionEl = (
       <div
         key={option.id}
-        className={`group rounded-lg border p-4 transition-all duration-200 ${
+        className={cn(
+          'group transition-all duration-200',
+          OPTION_FRAME_CLASS,
           option.disabled
             ? `${isSelected ? 'cursor-pointer' : 'cursor-not-allowed'} border-ods-border bg-ods-card opacity-40`
             : isSelected
               ? 'cursor-pointer border-ods-accent bg-ods-bg-surface shadow-sm'
-              : 'cursor-pointer border-ods-border bg-ods-bg hover:border-ods-border-hover hover:bg-ods-bg-hover'
-        } `}
+              : cn('cursor-pointer hover:border-ods-border-hover hover:bg-ods-bg-hover', OPTION_IDLE_SURFACE_CLASS),
+        )}
         // Disabled options can't be newly SELECTED, but an already-selected one
         // (e.g. it later became unavailable) must still be removable.
         onClick={() => (!option.disabled || isSelected) && toggleSelection(option.id)}
       >
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex min-w-0 flex-1 items-center gap-3">
+        <div className={OPTION_ROW_CLASS}>
+          <div className={OPTION_LEAD_CLASS}>
             {option.icon && (
               <div
-                className={`flex-shrink-0 transition-transform duration-200 ${isSelected ? 'scale-110' : 'group-hover:scale-105'}`}
+                className={cn(
+                  OPTION_ICON_BOX_CLASS,
+                  'transition-transform duration-200',
+                  isSelected ? 'scale-110' : 'group-hover:scale-105',
+                )}
               >
                 {option.icon}
               </div>
@@ -276,11 +380,13 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
 
           {/* Selection Indicator */}
           <div
-            className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded border-2 transition-all duration-200 ${
+            className={cn(
+              SELECTION_BOX_CLASS,
+              'transition-all duration-200',
               isSelected
                 ? 'scale-110 border-ods-accent bg-ods-accent'
-                : 'border-ods-border group-hover:border-ods-border-hover'
-            } `}
+                : cn(SELECTION_BOX_IDLE_CLASS, 'group-hover:border-ods-border-hover'),
+            )}
           >
             {isSelected && <Check className="h-4 w-4 font-bold text-ods-text-primary" strokeWidth={3} />}
           </div>
@@ -305,7 +411,7 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
   const renderOptionsContent = () => {
     if (!sections || sections.length === 0) {
       // No sections - render flat list
-      return <div className="space-y-3">{options.map(renderOption)}</div>;
+      return <div className={OPTION_LIST_CLASS}>{options.map(renderOption)}</div>;
     }
 
     // Group options by section
@@ -322,24 +428,16 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
     });
 
     return (
-      <div className="space-y-4">
+      <div className={SECTIONED_LIST_CLASS}>
         {/* Render sections in order */}
         {sections.map(section => {
           const sectionOptions = optionsBySection.get(section.id) || [];
           if (sectionOptions.length === 0) return null;
 
           return (
-            <div key={section.id} className="space-y-2">
-              {/* Section Header */}
-              <div className="flex items-center gap-2 px-1">
-                {section.icon && <div className="text-ods-text-secondary">{section.icon}</div>}
-                <div>
-                  <div className="font-semibold text-ods-text-primary text-h6">{section.label}</div>
-                  {section.description && <div className="text-ods-text-tertiary text-h6">{section.description}</div>}
-                </div>
-              </div>
-              {/* Section Options */}
-              <div className="space-y-2">{sectionOptions.map(renderOption)}</div>
+            <div key={section.id} className={SECTION_CLASS}>
+              <SectionHeader section={section} />
+              <div className={SECTION_CLASS}>{sectionOptions.map(renderOption)}</div>
             </div>
           );
         })}
@@ -353,8 +451,10 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
   // ~82px per row: enough skeleton rows to fill the fixed viewport, so the
   // loading state occupies the SAME height as the loaded list.
   const framedSkeletonCount = lazyLoad ? Math.max(skeletonCount, 4) : skeletonCount;
-  const listContent = isLoading ? (
-    <PushButtonSelectorSkeleton count={framedSkeletonCount} />
+  const listContent = loading ? (
+    <LoadingRegion label="Loading options" announce={!inScope}>
+      <OptionListSkeleton count={framedSkeletonCount} sections={sections} description={skeletonDescription} />
+    </LoadingRegion>
   ) : error ? (
     <PushButtonSelectorError message={error} />
   ) : (
@@ -367,8 +467,11 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
       {lazyLoad ? (
         <>
           <div ref={sentinelRef} />
+          {/* The next page while it is read: one more option row's skeleton under the list. */}
           {lazyLoad.isFetchingMore ? (
-            <div className="py-2 text-center text-ods-text-secondary text-h6">Loading more…</div>
+            <LoadingRegion label="Loading more options">
+              <OptionRowSkeleton />
+            </LoadingRegion>
           ) : null}
         </>
       ) : null}
@@ -377,8 +480,8 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
 
   return (
     <TooltipProvider delayDuration={150}>
-      <div className={`space-y-4 ${className}`}>
-        {title && <h3 className="text-ods-text-primary text-h5">{title}</h3>}
+      <div className={cn(SELECTOR_STACK_CLASS, className)}>
+        {title && <h3 className={SELECTOR_TITLE_CLASS}>{title}</h3>}
 
         {searchInput}
 
@@ -397,7 +500,7 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
         {footer}
 
         {/* Selection Summary */}
-        {!isLoading && !error && selectionSummary && validSelectedIds.length > 0 && (
+        {!loading && !error && selectionSummary && validSelectedIds.length > 0 && (
           <div className="rounded-lg border border-ods-success bg-ods-success-secondary p-4">
             <div className="mb-2 flex items-center gap-2">
               <div className="h-2 w-2 rounded-full bg-ods-success"></div>
@@ -417,10 +520,10 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
         )}
 
         {/* Help Text */}
-        {helpText && <div className="text-ods-text-secondary text-h6">{helpText}</div>}
+        {helpText && <div className={SELECTOR_HELP_CLASS}>{helpText}</div>}
 
         {/* Empty State Warning */}
-        {validSelectedIds.length === 0 && title && !optional && (
+        {!loading && validSelectedIds.length === 0 && title && !optional && (
           <div className="rounded-lg border border-ods-error bg-ods-error-secondary p-3">
             <div className="text-ods-error text-h6">⚠️ Please select at least one option</div>
           </div>

package/src/components/features/remote-session/index.ts

@@ -13,13 +13,13 @@ export type {
 } from './remote-session-block';
 export { RemoteSessionChatPanel } from './remote-session-chat-panel';
 export type { RemoteSessionChatPanelProps } from './remote-session-chat-panel';
-export { RemoteDesktopChatMessageRow } from './remote-desktop-chat-message-row';
+export { RemoteDesktopChatMessageRow, RemoteDesktopChatMessageRowSkeleton } from './remote-desktop-chat-message-row';
 export type { RemoteDesktopChatMessageRowProps } from './remote-desktop-chat-message-row';
 export { REMOTE_DESKTOP_CHAT_END_USER_NAME, RemoteDesktopChatPanel } from './remote-desktop-chat-panel';
 export type { RemoteDesktopChatPanelProps, RemoteDesktopChatTechnician } from './remote-desktop-chat-panel';
 export { RemoteDesktopFullscreenToolbar } from './remote-desktop-fullscreen-toolbar';
 export type { RemoteDesktopFullscreenToolbarProps } from './remote-desktop-fullscreen-toolbar';
-export { RemoteDesktopView, RemoteDesktopViewSkeleton } from './remote-desktop-view';
+export { RemoteDesktopView } from './remote-desktop-view';
 export type { RemoteDesktopViewProps } from './remote-desktop-view';
 export { RemoteSessionDialog } from './remote-session-dialog';
 export type { RemoteSessionDialogProps } from './remote-session-dialog';

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

@@ -2,8 +2,14 @@
 
 import { cn } from '../../../utils/cn';
 import { formatTime } from '../../../utils/format-date';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 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. */
+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)]';
+const MESSAGE_NAME_CLASS = 'min-w-0 flex-1 truncate text-h4 [font-family:var(--font-family-heading)]';
+
 export interface RemoteDesktopChatMessageRowProps {
   authorName: string;
   /** The technician's rows carry the avatar and the accent-colored name. */
@@ -32,14 +38,14 @@ export function RemoteDesktopChatMessageRow({
   body,
 }: RemoteDesktopChatMessageRowProps) {
   return (
-    <div className="grid grid-cols-1 gap-[var(--spacing-system-xxs)]">
-      <div className="flex items-center gap-[var(--spacing-system-xxs)]">
+    <div className={MESSAGE_ROW_CLASS}>
+      <div className={MESSAGE_HEAD_CLASS}>
         {isTechnician && (
           <SquareAvatar variant="round" sizePx={24} src={avatarUrl} alt={authorName} className="shrink-0" />
         )}
         <span
           className={cn(
-            'min-w-0 flex-1 truncate text-h4 [font-family:var(--font-family-heading)]',
+            MESSAGE_NAME_CLASS,
             isTechnician ? 'text-ods-accent' : 'text-ods-text-secondary',
           )}
         >
@@ -54,3 +60,18 @@ export function RemoteDesktopChatMessageRow({
     </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" />
+    </div>
+  );
+}

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

@@ -3,9 +3,16 @@
 import { useEffect, useRef } from 'react';
 import { cn } from '../../../utils/cn';
 import { ChatInput } from '../../chat/chat-input';
-import { RemoteDesktopChatMessageRow } from './remote-desktop-chat-message-row';
+import { LoadingRegion } from '../../loading/loading-region';
+import { RemoteDesktopChatMessageRow, RemoteDesktopChatMessageRowSkeleton } from './remote-desktop-chat-message-row';
 import type { RemoteSessionChatMessage } from './types';
 
+/**
+ * Message rows the panel's loading state draws: the panel spans the view's height (about 750px on a 900px screen,
+ * less the input), and a one-line message is about 60px with its gap.
+ */
+const CHAT_PANEL_FOLD = 10;
+
 /** Who is typing on the technician's side of the chat: shown on the technician's rows. */
 export interface RemoteDesktopChatTechnician {
   name: string;
@@ -67,10 +74,17 @@ 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 ? (
-            <p className="text-center text-ods-text-muted text-h6">
-              {loading ? 'Loading the chat...' : 'No messages yet - say hello to the user.'}
-            </p>
+          {rows.length === 0 && 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_FOLD }, (_, i) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+                <RemoteDesktopChatMessageRowSkeleton key={i} />
+              ))}
+            </LoadingRegion>
+          ) : rows.length === 0 ? (
+            <p className="text-center text-ods-text-muted text-h6">No messages yet - say hello to the user.</p>
           ) : (
             rows.map(message => (
               <RemoteDesktopChatMessageRow

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

@@ -12,13 +12,14 @@ import {
 } from '../../icons-v2-generated';
 import { PageLayout } from '../../layout/page-layout';
 import { LoadingRegion } from '../../loading/loading-region';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { InteractiveSkeleton, TextLineSkeleton } from '../../loading/unified-skeleton';
 import { ActionsMenuDropdown, type ActionsMenuGroup } from '../../ui/actions-menu';
 import { Button } from '../../ui/button/button';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { TruncateText } from '../../ui/truncate-text';
 import { RemoteDesktopFullscreenToolbar } from './remote-desktop-fullscreen-toolbar';
 
-/** The page chrome both the view and its skeleton render in. */
+/** The page chrome the view renders in, loaded and loading. */
 const PAGE_CLASS = 'h-full overflow-hidden px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]';
 
 /** The header card: the device row, and under it the display row when there is one to pick. */
@@ -70,6 +71,11 @@ export interface RemoteDesktopViewProps {
   chat?: ReactNode;
   /** Dialogs the page owns (settings, shortcuts), rendered after the session. */
   children?: ReactNode;
+  /**
+   * The device is still being read: the view draws itself with its header's text and controls as skeletons over an
+   * empty screen (also in a page's loading scope). `screen`, `chat` and `children` are not drawn while loading.
+   */
+  loading?: boolean;
 }
 
 /**
@@ -93,8 +99,33 @@ export function RemoteDesktopView({
   screen,
   chat,
   children,
+  loading: loadingProp = false,
 }: RemoteDesktopViewProps) {
-  const controlsBar = (
+  const inScope = useLoadingScope();
+  // One switch: while the device is read (a prop, or a page's loading scope) the view draws its own loading state.
+  const loading = inScope || loadingProp;
+  const controlsBar = loading ? (
+    <div className={CONTROLS_BAR_CLASS} aria-hidden>
+      <div className={CONTROLS_ROW_CLASS}>
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
+          <div className="flex-shrink-0 rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)]">
+            <MonitorIcon className="h-4 w-4 text-ods-text-primary" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            {/* A typical device name and customer line, at the header's own type steps (h4, h6). */}
+            <TextLineSkeleton type="h4" className="w-48 max-w-full" />
+            <TextLineSkeleton type="h6" className="w-36 max-w-full" />
+          </div>
+        </div>
+        <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
+          {/* The actions menu, settings and fullscreen controls: three icon buttons. */}
+          <InteractiveSkeleton.Button size="icon" />
+          <InteractiveSkeleton.Button size="icon" />
+          <InteractiveSkeleton.Button size="icon" />
+        </div>
+      </div>
+    </div>
+  ) : (
     <div className={CONTROLS_BAR_CLASS}>
       <div className={CONTROLS_ROW_CLASS}>
         <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
@@ -166,6 +197,19 @@ export function RemoteDesktopView({
     </div>
   );
 
+  if (loading) {
+    return (
+      <PageLayout className={PAGE_CLASS} backButton={onBack ? { label: 'Back', onClick: onBack } : undefined}>
+        {/* `contents`: the page's own children stay its layout items; the region adds the one announcement (a page's
+            loading scope already announces for it). */}
+        <LoadingRegion label="Loading the remote session" announce={!inScope} className="contents">
+          {controlsBar}
+          <div className="min-h-0 min-w-0 flex-1 rounded-lg bg-black" />
+        </LoadingRegion>
+      </PageLayout>
+    );
+  }
+
   return (
     <PageLayout
       className={PAGE_CLASS}
@@ -205,38 +249,3 @@ export function RemoteDesktopView({
     </PageLayout>
   );
 }
-
-/** The page while the device is still loading: the header bar as placeholders over an empty screen. */
-export function RemoteDesktopViewSkeleton({
-  onBack,
-  region = true,
-}: Pick<RemoteDesktopViewProps, 'onBack'> & {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-}) {
-  return (
-    <PageLayout className={PAGE_CLASS} backButton={onBack ? { label: 'Back', onClick: onBack } : undefined}>
-      {/* `contents`: the page's own children stay its layout items; the region adds the one announcement. */}
-      <LoadingRegion label="Loading the remote session" announce={region} className="contents">
-        <div className={CONTROLS_BAR_CLASS}>
-          <div className={CONTROLS_ROW_CLASS}>
-            <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
-              <UnifiedSkeleton className="h-9 w-9 flex-shrink-0 rounded-md" />
-              <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-                <UnifiedSkeleton className="h-5 w-48" />
-                <UnifiedSkeleton className="h-4 w-36" />
-              </div>
-            </div>
-            <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
-              <UnifiedSkeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
-              <UnifiedSkeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
-              <UnifiedSkeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
-            </div>
-          </div>
-        </div>
-
-        <div className="min-h-0 min-w-0 flex-1 rounded-lg bg-black" />
-      </LoadingRegion>
-    </PageLayout>
-  );
-}