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

package/src/components/pagination.tsx

@@ -5,7 +5,9 @@ import { type ButtonHTMLAttributes, type HTMLAttributes, type MouseEvent, type R
 import Link from '../embed-shims/next-link';
 import { cn } from '../utils/cn';
 import { isModifierClick } from './chat/utils/chat-nav-resolution';
+import { InteractiveSkeleton } from './loading/unified-skeleton';
 import { Button } from './ui/button';
+import { useLoadingScope } from './ui/loading-scope';
 
 interface PaginationProps {
   currentPage: number;
@@ -20,6 +22,11 @@ interface PaginationProps {
    * are buttons.
    */
   getPageHref?: (page: number) => string;
+  /**
+   * The list is still being read: the pager draws its own skeleton, for `totalPages` on `currentPage` when the count
+   * is known (more than one page), else for a list of many pages. Also drawn in a page's loading scope.
+   */
+  loading?: boolean;
 }
 
 interface PaginationControlProps {
@@ -103,61 +110,79 @@ function PaginationControl({
 const NEIGHBOUR_CLASS = '!h-10 !w-10 content-md:!h-10 content-md:!w-10';
 const PAGE_CLASS = '!h-9 !w-9 content-md:!h-9 content-md:!w-9';
 
-const Pagination = ({ currentPage, totalPages, onPageChange, className, getPageHref }: PaginationProps) => {
-  // Generate page numbers to display
-  const getPageNumbers = () => {
-    const pages = [];
-    const maxPagesToShow = 5;
+/**
+ * The controls the pager draws between previous and next: page numbers, and `-1` / `-2` for an ellipsis. Read by
+ * the pager and by its skeleton, so the skeleton draws the same controls.
+ */
+export function paginationSlots(currentPage: number, totalPages: number): number[] {
+  const pages: number[] = [];
+  const maxPagesToShow = 5;
 
-    if (totalPages <= maxPagesToShow) {
-      // Show all pages if there are fewer than maxPagesToShow
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      // Always show first page
-      pages.push(1);
+  if (totalPages <= maxPagesToShow) {
+    for (let i = 1; i <= totalPages; i++) pages.push(i);
+    return pages;
+  }
 
-      // Calculate start and end of page range
-      let start = Math.max(2, currentPage - 1);
-      let end = Math.min(totalPages - 1, currentPage + 1);
+  // Always show first page
+  pages.push(1);
 
-      // Adjust if at the beginning or end
-      if (currentPage <= 2) {
-        end = Math.min(totalPages - 1, 4);
-      } else if (currentPage >= totalPages - 1) {
-        start = Math.max(2, totalPages - 3);
-      }
+  // Calculate start and end of page range
+  let start = Math.max(2, currentPage - 1);
+  let end = Math.min(totalPages - 1, currentPage + 1);
 
-      // Add ellipsis if needed
-      if (start > 2) {
-        pages.push(-1); // -1 represents ellipsis
-      }
+  // Adjust if at the beginning or end
+  if (currentPage <= 2) {
+    end = Math.min(totalPages - 1, 4);
+  } else if (currentPage >= totalPages - 1) {
+    start = Math.max(2, totalPages - 3);
+  }
 
-      // Add middle pages
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
+  if (start > 2) pages.push(-1); // -1 represents ellipsis
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (end < totalPages - 1) pages.push(-2); // -2 represents ellipsis
+  if (totalPages > 1) pages.push(totalPages);
 
-      // Add ellipsis if needed
-      if (end < totalPages - 1) {
-        pages.push(-2); // -2 represents ellipsis
-      }
+  return pages;
+}
 
-      // Always show last page
-      if (totalPages > 1) {
-        pages.push(totalPages);
-      }
-    }
+/** The ellipsis between page numbers, read by the pager and by its skeleton. */
+function PaginationEllipsisSlot() {
+  return (
+    <span className="flex h-9 w-9 items-center justify-center text-muted-foreground text-h6">
+      <MoreHorizontal className="h-4 w-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
 
-    return pages;
-  };
+/** The pager's row and its list, read by the pager and by its skeleton, so the skeleton is the pager's size. */
+const PAGINATION_NAV_CLASS = 'mx-auto flex w-full justify-center';
+const PAGINATION_LIST_CLASS = 'flex flex-row items-center gap-1';
+/**
+ * The page count the skeleton draws the pager for when the count is read with the list: a list of many pages, on
+ * its first page (prev, pages 1-4, the ellipsis, the last page, next), the pager's widest first-page shape.
+ */
+export const PAGINATION_SKELETON_TOTAL_PAGES = 10;
+
+const Pagination = ({ currentPage, totalPages, onPageChange, className, getPageHref, loading }: PaginationProps) => {
+  // One switch: while the list is read (a prop, or a page's loading scope) the pager is drawn as its skeleton, for
+  // the page count when it is already known.
+  if (useLoadingScope() || loading) {
+    const known = totalPages > 1;
+    return (
+      <PaginationSkeleton
+        className={className}
+        totalPages={known ? totalPages : undefined}
+        currentPage={known ? currentPage : undefined}
+      />
+    );
+  }
 
-  const pageNumbers = getPageNumbers();
+  const pageNumbers = paginationSlots(currentPage, totalPages);
 
   return (
-    <nav role="navigation" aria-label="pagination" className={cn('mx-auto flex w-full justify-center', className)}>
-      <ul className="flex flex-row items-center gap-1">
+    <nav role="navigation" aria-label="pagination" className={cn(PAGINATION_NAV_CLASS, className)}>
+      <ul className={PAGINATION_LIST_CLASS}>
         <li>
           <PaginationControl
             page={currentPage - 1}
@@ -178,10 +203,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange, className, getPageH
             // Render ellipsis
             return (
               <li key={`ellipsis-${index}`}>
-                <span className="flex h-9 w-9 items-center justify-center text-muted-foreground text-h6">
-                  <MoreHorizontal className="h-4 w-4" />
-                  <span className="sr-only">More pages</span>
-                </span>
+                <PaginationEllipsisSlot />
               </li>
             );
           }
@@ -223,6 +245,38 @@ const Pagination = ({ currentPage, totalPages, onPageChange, className, getPageH
   );
 };
 
+/**
+ * The pager while its list is read: the same row and the controls the pager draws for `totalPages` on
+ * `currentPage` (`paginationSlots`), each page control a box of its size and the ellipsis as it is.
+ */
+function PaginationSkeleton({
+  totalPages = PAGINATION_SKELETON_TOTAL_PAGES,
+  currentPage = 1,
+  className,
+}: {
+  totalPages?: number;
+  currentPage?: number;
+  className?: string;
+}) {
+  return (
+    <div className={cn(PAGINATION_NAV_CLASS, className)} aria-hidden inert>
+      <ul className={PAGINATION_LIST_CLASS}>
+        <li>
+          <InteractiveSkeleton.Button className={NEIGHBOUR_CLASS} />
+        </li>
+        {paginationSlots(currentPage, Math.max(totalPages, 1)).map((page, index) => (
+          <li key={page < 0 ? `ellipsis-${index}` : page}>
+            {page < 0 ? <PaginationEllipsisSlot /> : <InteractiveSkeleton.Button className={PAGE_CLASS} />}
+          </li>
+        ))}
+        <li>
+          <InteractiveSkeleton.Button className={NEIGHBOUR_CLASS} />
+        </li>
+      </ul>
+    </div>
+  );
+}
+
 const PaginationContent = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(
   ({ className, ...props }, ref) => {
     return <ul ref={ref} className={cn('flex items-center justify-center', className)} {...props} />;
@@ -299,4 +353,5 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  PaginationSkeleton,
 };

package/src/components/persistent-filter-controls.tsx

@@ -92,13 +92,6 @@ export function PersistentFilterControls({
       >
         {children}
       </div>
-
-      {/* Visual loading indicator */}
-      {isLoading && (
-        <div className="absolute right-2 top-2 z-10" role="status" aria-label="Loading filters">
-          <div className="h-4 w-4 animate-spin rounded-full border-2 border-ods-border border-t-ods-accent" />
-        </div>
-      )}
     </div>
   );
 }

package/src/components/persistent-pagination.tsx

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from 'react';
 import { cn } from '../utils/cn';
+import { useLoadingScope } from './ui/loading-scope';
 import { UnifiedPagination } from './unified-pagination';
 
 interface PersistentPaginationProps {
@@ -161,6 +162,10 @@ export function PersistentPaginationWrapper({
   onPageChange,
   className,
 }: PersistentPaginationWrapperProps) {
+  // In a page's loading state the pager inside draws its skeleton (UnifiedPagination), at full strength: a dimmed
+  // pulse would be a second rhythm.
+  const inScope = useLoadingScope();
+
   // ALWAYS show pagination for predictable layout
   // For no results (totalPages = 0), show grayed out pagination
   const hasResults = totalPages > 0;
@@ -178,7 +183,7 @@ export function PersistentPaginationWrapper({
         className,
       )}
       style={{
-        opacity: isPaginationDisabled ? 0.3 : hasNoResults ? 0.5 : 1,
+        opacity: inScope ? 1 : isPaginationDisabled ? 0.3 : hasNoResults ? 0.5 : 1,
         transitionDuration: '300ms',
       }}
       role="navigation"

package/src/components/platform/ToolBadge.tsx

@@ -11,9 +11,10 @@ import type { ToolType } from '../../types/tool.types';
 import { cn } from '../../utils/cn';
 import { getToolLabel } from '../../utils/tool-utils';
 import { NavLinkAnchorViaRuntime } from '../chat/nav-link-anchor-via-runtime';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { ToolIcon } from '../tool-icon';
-
-export type { ToolType } from '../../types/tool.types';
+import { useLoadingScope } from '../ui/loading-scope';
+import { TOOL_MARK_CLASS } from './tool-badge-mark';
 
 export interface ToolBadgeProps {
   /** A built-in tool: its label and grey mark come from the tool registry. */
@@ -44,6 +45,48 @@ export interface ToolBadgeProps {
   iconClassName?: string;
 }
 
+/** The badge's layout, read by the badge and by its skeleton, so the skeleton is the badge's size. */
+// The house tag (Figma `tag`): 32px (`TOOL_CHIP_HEIGHT`), on the card surface, the caption face.
+const CHIP_CLASS =
+  'inline-flex items-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)] text-ods-text-primary text-h5';
+/**
+ * A chip's height, as a CSS length: the chip and its skeleton take it, and a host that keeps room for N lines of chips
+ * (a card's footer that stays one height) sizes that room from it.
+ */
+export const TOOL_CHIP_HEIGHT = '2rem';
+const CHIP_STYLE = { height: TOOL_CHIP_HEIGHT } as const;
+const INLINE_CLASS = 'flex items-center gap-1 text-ods-text-secondary';
+/**
+ * A tool's name while it loads, in characters of its own face (the chip's caption face is monospaced, so `ch` is one
+ * character): a typical tool name ("MeshCentral", "Tactical RMM") is 11 to 13.
+ */
+const CHIP_NAME_TYPICAL_CH = '11ch';
+
+export interface ToolBadgeSkeletonProps {
+  variant?: 'inline' | 'chip';
+  /** Whether the badge leads with its mark (default true). */
+  icon?: boolean;
+  className?: string;
+}
+
+/** A badge while its tool is read: the chip's own frame (or the inline row), a mark box and a bar for the name. */
+export function ToolBadgeSkeleton({ variant = 'inline', icon = true, className }: ToolBadgeSkeletonProps) {
+  if (variant === 'chip') {
+    return (
+      <span className={cn(CHIP_CLASS, className)} style={CHIP_STYLE} aria-hidden>
+        {icon && <UnifiedSkeleton as="span" className={cn(TOOL_MARK_CLASS, 'rounded-sm')} />}
+        <TextLineSkeleton type="h5" width={CHIP_NAME_TYPICAL_CH} />
+      </span>
+    );
+  }
+  return (
+    <div className={cn(INLINE_CLASS, className)} aria-hidden>
+      {icon && <UnifiedSkeleton className={cn(TOOL_MARK_CLASS, 'rounded-sm')} />}
+      <TextLineSkeleton type="h4" className="w-20" />
+    </div>
+  );
+}
+
 /**
  * One tool, named: a mark and a label. Pass a `toolType` for a tool the
  * registry knows, or `label` + `icon` for one it does not (a connector or a
@@ -59,9 +102,12 @@ export const ToolBadge: React.FC<ToolBadgeProps> = ({
   className,
   iconClassName,
 }) => {
+  const loading = useLoadingScope();
   const text = label ?? (toolType ? getToolLabel(toolType) : '');
   const mark = icon ?? (toolType ? <ToolIcon toolType={toolType} className={iconClassName} size={16} /> : null);
 
+  if (loading) return <ToolBadgeSkeleton variant={variant} icon={!!mark} className={className} />;
+
   // One rule for both variants: with an `href` the badge is a link.
   const linked = (node: React.ReactElement, linkClassName: string) =>
     href && targetPlatform ? (
@@ -84,15 +130,16 @@ export const ToolBadge: React.FC<ToolBadgeProps> = ({
   if (variant === 'chip') {
     return linked(
       <span
-        className={cn(
-          // The house tag (Figma `tag`): 32px, on the card surface, the caption face.
-          'inline-flex h-8 items-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)] text-ods-text-primary text-h5',
-          href && 'transition-colors hover:border-ods-border-hover',
-          className,
-        )}
+        className={cn(CHIP_CLASS, href && 'transition-colors hover:border-ods-border-hover', className)}
+        style={CHIP_STYLE}
       >
         {mark && (
-          <span className="flex h-4 w-4 shrink-0 items-center justify-center [&_img]:h-full [&_img]:w-full [&_img]:rounded-sm [&_img]:object-contain [&_svg]:h-full [&_svg]:w-full">
+          <span
+            className={cn(
+              TOOL_MARK_CLASS,
+              '[&_img]:h-full [&_img]:w-full [&_img]:rounded-sm [&_img]:object-contain [&_svg]:h-full [&_svg]:w-full',
+            )}
+          >
             {mark}
           </span>
         )}
@@ -103,7 +150,7 @@ export const ToolBadge: React.FC<ToolBadgeProps> = ({
   }
 
   return linked(
-    <div className={cn('flex items-center gap-1 text-ods-text-secondary', className)}>
+    <div className={cn(INLINE_CLASS, className)}>
       {mark}
       <span className="text-ods-text-primary text-h4">{text}</span>
     </div>,

package/src/components/platform/index.ts

@@ -16,8 +16,8 @@ export type { SoftwareSourceBadgeProps, SoftwareSource } from './SoftwareSourceB
 export { CveLink } from './CveLink';
 export type { CveLinkProps } from './CveLink';
 
-export { ToolBadge } from './ToolBadge';
-export type { ToolBadgeProps } from './ToolBadge';
+export { TOOL_CHIP_HEIGHT, ToolBadge, ToolBadgeSkeleton } from './ToolBadge';
+export type { ToolBadgeProps, ToolBadgeSkeletonProps } from './ToolBadge';
 export type { ToolType } from '../../types/tool.types';
 
 export { ShellTypeBadge } from './ShellTypeBadge';

package/src/components/platform/tool-badge-mark.ts

@@ -0,0 +1,6 @@
+import { ICON_SIZE } from '../../styles/component-sizes';
+/**
+ * A tool or source mark's 16px box (`ToolBadge`'s mark, the "Data synced from" line's source glyph): read by the marks
+ * and by every skeleton that stands for one. A leaf, so a `ui` component can read it without loading the badge.
+ */
+export const TOOL_MARK_CLASS = `flex ${ICON_SIZE.sm} shrink-0 items-center justify-center`;

package/src/components/product-demo/fixtures/devices.ts

@@ -72,9 +72,6 @@ export function buildDevicesFixture(cast: DemoCast): DevicesFixture {
   return { devices, deviceFilters, totalCount: devices.length };
 }
 
-/** What the Devices page shows for a search: the query in the field and the rows that answer it. */
-export const DEVICES_SEARCH_QUERY = 'Windows';
-
 /** The fleet narrowed to its Windows devices, the way the list answers that search. */
 export function buildWindowsDevicesFixture(cast: DemoCast): DevicesFixture {
   const fleet = buildDevicesFixture(cast);

package/src/components/product-demo/product-screen.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import { lazy, type LazyExoticComponent, Suspense } from 'react';
+import { lazy, type LazyExoticComponent, type ReactNode, Suspense } from 'react';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 import { ProductScreenFrame, type ProductScreenFrameProps } from '../ui/product-screen-frame';
 import { PRODUCT_SCREEN_LOADERS } from './registry';
 import { PRODUCT_SCREEN_KEYS, PRODUCT_SCREEN_LABELS, type ProductScreenKey } from './screen-keys';
+import { PRODUCT_SCREEN_LOADING } from './screen-loading';
 import type { ProductScreenComponent } from './types';
 
 /** One lazy component per screen, made once: a screen's code is fetched the first time it renders. */
@@ -12,7 +14,7 @@ const LAZY_SCREENS = Object.fromEntries(
   PRODUCT_SCREEN_KEYS.map(key => [key, lazy(PRODUCT_SCREEN_LOADERS[key])]),
 ) as Record<ProductScreenKey, LazyExoticComponent<ProductScreenComponent>>;
 
-/** Frame heights of the two renderings: constants, so a skeleton and the loaded screen are one box. */
+/** Frame heights of the two renderings: constants, so the loading state and the loaded screen are one box. */
 export const PRODUCT_SCREEN_HEIGHT = 440;
 export const PRODUCT_SCREEN_COMPACT_HEIGHT = 300;
 
@@ -52,26 +54,16 @@ export interface ProductScreenProps extends Omit<ProductScreenFrameProps, 'child
   height?: number | string;
 }
 
-/** The box a product screen occupies while it loads. */
-export function ProductScreenSkeleton({
+/** A screen's frame: its label, height and layout width, shared by the screen and by its loading state. */
+function ProductScreenShell({
+  screen,
   compact = false,
+  label,
   height,
-  className,
-}: Pick<ProductScreenProps, 'compact' | 'height' | 'className'>) {
-  return (
-    <UnifiedSkeleton
-      className={className}
-      height={height ?? (compact ? PRODUCT_SCREEN_COMPACT_HEIGHT : PRODUCT_SCREEN_HEIGHT)}
-    />
-  );
-}
-
-/**
- * One product screen of the registry, in its frame. The screen's code is
- * downloaded when this mounts; until then the frame holds its box.
- */
-export function ProductScreen({ screen, compact = false, label, height, designWidth, ...frame }: ProductScreenProps) {
-  const Screen = LAZY_SCREENS[screen];
+  designWidth,
+  children,
+  ...frame
+}: ProductScreenProps & { children: ReactNode }) {
   const frameHeight = height ?? (compact ? PRODUCT_SCREEN_COMPACT_HEIGHT : PRODUCT_SCREEN_HEIGHT);
   const minWidth = compact ? undefined : MIN_LAYOUT_WIDTH[screen];
   const compactWidth = compact ? COMPACT_LAYOUT_WIDTH[screen] : undefined;
@@ -88,9 +80,36 @@ export function ProductScreen({ screen, compact = false, label, height, designWi
       label={label ?? PRODUCT_SCREEN_LABELS[screen]}
       height={frameHeight}
     >
-      <Suspense fallback={<UnifiedSkeleton className="h-full w-full" />}>
-        <Screen compact={compact} />
-      </Suspense>
+      {children}
     </ProductScreenFrame>
   );
 }
+
+/** What a screen draws while its code loads: its own view in its loading state (`PRODUCT_SCREEN_LOADING`), else the
+ *  frame's box. */
+function ScreenLoading({ screen, compact }: { screen: ProductScreenKey; compact: boolean }) {
+  const Loading = PRODUCT_SCREEN_LOADING[screen];
+  return Loading ? <Loading compact={compact} /> : <UnifiedSkeleton className="h-full w-full" />;
+}
+
+/**
+ * One product screen of the registry, in its frame. The screen's code is
+ * downloaded when this mounts; until then the frame draws the screen in its
+ * loading state. In a page's loading scope it stays in that state and fetches
+ * nothing.
+ */
+export function ProductScreen({ screen, compact = false, ...frame }: ProductScreenProps) {
+  const Screen = LAZY_SCREENS[screen];
+  const loading = useLoadingScope();
+  return (
+    <ProductScreenShell screen={screen} compact={compact} {...frame}>
+      {loading ? (
+        <ScreenLoading screen={screen} compact={compact} />
+      ) : (
+        <Suspense fallback={<ScreenLoading screen={screen} compact={compact} />}>
+          <Screen compact={compact} />
+        </Suspense>
+      )}
+    </ProductScreenShell>
+  );
+}

package/src/components/product-demo/screen-loading.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import type { ProductScreenKey } from './screen-keys';
+import { DevicesScreenView } from './screens/devices-view';
+import type { ProductScreenComponent } from './types';
+
+/** The Devices screen while its code loads: the same view in its own loading state. */
+function DevicesScreenLoading({ compact = false }: { compact?: boolean }) {
+  return <DevicesScreenView compact={compact} loading />;
+}
+
+/**
+ * Each screen's loading state, drawn in its frame while the screen's code (and its fixture) loads: the screen's own
+ * VIEW rendered with `loading`, never a separate skeleton. Kept apart from `PRODUCT_SCREEN_LOADERS`: this module
+ * imports the screen's view, never the screen module or its fixture, so the lazy chunk stays the screen's. A screen
+ * with no entry yet holds its frame's box.
+ */
+export const PRODUCT_SCREEN_LOADING: Partial<Record<ProductScreenKey, ProductScreenComponent>> = {
+  devices: DevicesScreenLoading,
+};

package/src/components/product-demo/screens/devices-view.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { DevicesPanelView, type DeviceFilters, type DeviceRow, IDLE_DEVICES_TOOLBAR } from '../../features/devices';
+
+/** What the Devices page shows for a search: the query in the field and the rows that answer it. */
+export const DEVICES_SEARCH_QUERY = 'Windows';
+
+/** The toolbar with the search the rows answer: chrome that shows state. */
+const TOOLBAR = { ...IDLE_DEVICES_TOOLBAR, searchValue: DEVICES_SEARCH_QUERY };
+
+/** Stands in for the page header (title, view switch, buttons): the job is named above the picture. */
+const NO_HEADER = <></>;
+
+const HIDDEN_WHEN_COMPACT = ['organization'];
+const NO_DEVICES: DeviceRow[] = [];
+
+export interface DevicesScreenViewProps {
+  compact?: boolean;
+  /** The rows, from the screen's fixture. */
+  devices?: DeviceRow[];
+  deviceFilters?: DeviceFilters | null;
+  totalCount?: number;
+  /** The screen's code is still being fetched: the same panel in its own loading state. */
+  loading?: boolean;
+}
+
+/**
+ * The product's Devices page in its table view, answering a search: the query in the toolbar, the rows that
+ * match. No title row (the job is named above the picture) and no row menu (a closed menu carries nothing and
+ * the customer needs the room). The narrow rendering drops the customer column and keeps device, status and OS.
+ *
+ * Read by the screen (with its fixture) and by its skeleton (`loading`: the panel's own loading state, the real
+ * toolbar locked and the rows skeletons), so the two are one layout.
+ */
+export function DevicesScreenView({
+  compact = false,
+  devices = NO_DEVICES,
+  deviceFilters,
+  totalCount,
+  loading = false,
+}: DevicesScreenViewProps) {
+  return (
+    <div className="h-full bg-ods-bg">
+      <DevicesPanelView
+        className="p-[var(--spacing-system-l)]"
+        headerSlot={NO_HEADER}
+        toolbar={TOOLBAR}
+        viewMode="table"
+        devices={devices}
+        deviceFilters={deviceFilters}
+        totalCount={totalCount}
+        hideColumns={compact ? HIDDEN_WHEN_COMPACT : undefined}
+        loading={loading}
+        loadingRegion={false}
+      />
+    </div>
+  );
+}

package/src/components/product-demo/screens/devices.tsx

@@ -1,41 +1,21 @@
 'use client';
 
 import { useMemo } from 'react';
-import { DevicesPanelView, IDLE_DEVICES_TOOLBAR } from '../../features/devices';
 import { useProductDemoCast } from '../cast';
-import { buildWindowsDevicesFixture, DEVICES_SEARCH_QUERY } from '../fixtures/devices';
+import { buildWindowsDevicesFixture } from '../fixtures/devices';
 import type { ProductScreenViewProps } from '../types';
+import { DevicesScreenView } from './devices-view';
 
-/** The toolbar with the search the rows answer: chrome that shows state. */
-const TOOLBAR = { ...IDLE_DEVICES_TOOLBAR, searchValue: DEVICES_SEARCH_QUERY };
-
-/** Stands in for the page header (title, view switch, buttons): the job is named above the picture. */
-const NO_HEADER = <></>;
-
-const HIDDEN_WHEN_COMPACT = ['organization'];
-
-/**
- * The product's Devices page in its table view, answering a search: the query
- * in the toolbar, the rows that match. No title row (the job is named above the
- * picture) and no row menu (a closed menu carries nothing and the customer
- * needs the room). The narrow rendering drops the customer column and keeps
- * device, status and OS.
- */
+/** The product's Devices page answering a search (`DevicesScreenView`), fed by its fixture. */
 export default function DevicesScreen({ compact = false }: ProductScreenViewProps) {
   const cast = useProductDemoCast();
   const fixture = useMemo(() => buildWindowsDevicesFixture(cast), [cast]);
   return (
-    <div className="h-full bg-ods-bg">
-      <DevicesPanelView
-        className="p-[var(--spacing-system-l)]"
-        headerSlot={NO_HEADER}
-        toolbar={TOOLBAR}
-        viewMode="table"
-        devices={fixture.devices}
-        deviceFilters={fixture.deviceFilters}
-        totalCount={fixture.totalCount}
-        hideColumns={compact ? HIDDEN_WHEN_COMPACT : undefined}
-      />
-    </div>
+    <DevicesScreenView
+      compact={compact}
+      devices={fixture.devices}
+      deviceFilters={fixture.deviceFilters}
+      totalCount={fixture.totalCount}
+    />
   );
 }