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

package/src/components/features/devices/device-selector/device-selector.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CheckCircleIcon, MonitorIcon, PlusCircleIcon, TrashIcon } from '../../../icons-v2-generated';
 import {
   Button,
@@ -16,6 +16,8 @@ import {
   TruncateText,
   useDataTable,
 } from '../../../ui';
+import { DATA_TABLE_SKELETON_ROWS } from '../../../ui/data-table/utils';
+import { InertWhileLoading, useLoadingScope } from '../../../ui/loading-scope';
 import { OSTypeBadge } from '../../os-type-badge';
 import { formatLastOnline } from '../device-last-online';
 import { getDeviceName } from '../device-name';
@@ -37,6 +39,8 @@ const DEFAULT_GET_DEVICE_KEY = (d: DeviceRow): string | undefined => d.machineId
 
 /** The CUSTOMER cell: the customer's image, name and primary contact. */
 function CustomerCell({ device }: { device: DeviceRow }) {
+  // While the device is read (a loading scope) the contact line is drawn too: its loading form is a bar.
+  const loading = useLoadingScope();
   const fullImageUrl = useDeviceImageUrl(device.organizationImageUrl, device.organizationImageHash);
   return (
     <div className="flex min-w-0 items-center gap-3">
@@ -47,9 +51,9 @@ function CustomerCell({ device }: { device: DeviceRow }) {
       />
       <div className="flex min-w-0 flex-col justify-center">
         <TruncateText>{device.organization || ''}</TruncateText>
-        {device.organizationEmail && (
+        {(device.organizationEmail || loading) && (
           <TruncateText variant="h6" tone="secondary">
-            {device.organizationEmail}
+            {device.organizationEmail ?? ''}
           </TruncateText>
         )}
       </div>
@@ -57,6 +61,43 @@ function CustomerCell({ device }: { device: DeviceRow }) {
   );
 }
 
+/** The DEVICE cell: its type, its name and when it was last online; bars while the device is read. */
+function DeviceCell({ device }: { device: DeviceRow }) {
+  const loading = useLoadingScope();
+  return (
+    <div className="flex h-20 items-center gap-3">
+      <DeviceTypeTile type={device.type} />
+      <div className="flex min-w-0 flex-col">
+        <TruncateText>{getDeviceName(device)}</TruncateText>
+        <TruncateText variant="h6" tone="secondary" loading={loading}>
+          {formatLastOnline(device.last_seen || device.lastSeen)}
+        </TruncateText>
+      </div>
+    </div>
+  );
+}
+
+/** The STATUS cell: the device's status as its tag; the tag's loading form while the device is read. */
+function StatusCell({ status }: { status: string | null | undefined }) {
+  if (useLoadingScope()) return <Tag loading label="" className="w-min" />;
+  const config = getDeviceStatusConfig(status);
+  return <Tag label={config.label} variant={config.variant} className="w-min" />;
+}
+
+/** The add / remove control: static chrome, drawn real and inert while the device is read. */
+function InertInScope({ children }: { children: ReactNode }) {
+  return (
+    <InertWhileLoading loading={useLoadingScope()} className="contents">
+      {children}
+    </InertWhileLoading>
+  );
+}
+
+/** A device still being read: a row the table keys, nothing a cell can show (every cell draws its loading form). */
+function loadingDevices<T extends DeviceRow>(count: number): T[] {
+  return Array.from({ length: count }, (_, index) => ({ id: `loading-${index}`, machineId: '', status: '' }) as T);
+}
+
 /**
  * Selection-oriented devices list. Sits next to `DevicesPanel` (the listing
  * page), but the data model is different and intentional:
@@ -93,8 +134,9 @@ function CustomerCell({ device }: { device: DeviceRow }) {
  */
 export function DeviceSelector<T extends DeviceRow = DeviceRow>({
   devices,
-  loading,
+  loading: loadingProp,
   loadingRegion,
+  skeletonRows,
   selectedIds: selectedIdsProp,
   onSelectionChange: onSelectionChangeProp,
   getDeviceKey: getDeviceKeyProp,
@@ -113,6 +155,9 @@ export function DeviceSelector<T extends DeviceRow = DeviceRow>({
   onSelectionModeChange,
   criteriaContent,
 }: DeviceSelectorProps<T>) {
+  // ONE switch: in a page's loading state (or while the host reads the devices) the header, its row count and the
+  // table draw as their loading state.
+  const loading = useLoadingScope() || loadingProp;
   const selectedIds = (selectedIdsProp ?? EMPTY_SET) as Set<string>;
   const onSelectionChange = onSelectionChangeProp ?? NOOP;
   const getDeviceKey = getDeviceKeyProp ?? DEFAULT_GET_DEVICE_KEY;
@@ -470,21 +515,7 @@ export function DeviceSelector<T extends DeviceRow = DeviceRow>({
         id: 'device',
         accessorKey: 'device',
         header: 'DEVICE',
-        cell: ({ row }: { row: Row<T> }) => {
-          const device = row.original;
-          const lastSeen = device.last_seen || device.lastSeen;
-          return (
-            <div className="flex h-20 items-center gap-3">
-              <DeviceTypeTile type={device.type} />
-              <div className="flex min-w-0 flex-col">
-                <TruncateText>{getDeviceName(device)}</TruncateText>
-                <TruncateText variant="h6" tone="secondary">
-                  {formatLastOnline(lastSeen)}
-                </TruncateText>
-              </div>
-            </div>
-          );
-        },
+        cell: ({ row }: { row: Row<T> }) => <DeviceCell device={row.original} />,
         enableSorting: false,
       },
       {
@@ -516,10 +547,7 @@ export function DeviceSelector<T extends DeviceRow = DeviceRow>({
         id: 'status',
         accessorKey: 'status',
         header: 'STATUS',
-        cell: ({ row }: { row: Row<T> }) => {
-          const config = getDeviceStatusConfig(row.original.status);
-          return <Tag label={config.label} variant={config.variant} className="w-min" />;
-        },
+        cell: ({ row }: { row: Row<T> }) => <StatusCell status={row.original.status} />,
         enableSorting: false,
         meta: {
           width: 'w-auto shrink-0 content-md:w-[160px]',
@@ -528,71 +556,75 @@ export function DeviceSelector<T extends DeviceRow = DeviceRow>({
       },
       {
         id: 'actions',
-        cell: ({ row }: { row: Row<T> }) => {
-          const device = row.original;
-          const disabledReason = isDeviceDisabled?.(device);
-
-          if (disabledReason) {
-            return (
-              <div data-no-row-click className="pointer-events-auto flex w-full items-center justify-end gap-2">
-                <span className="whitespace-pre-line text-right text-ods-text-secondary text-h6 content-max-md:hidden">
-                  {disabledReason}
-                </span>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  leftIcon={<PlusCircleIcon size={24} />}
-                  className="shrink-0 text-ods-text-secondary"
-                  disabled
-                />
-              </div>
-            );
-          }
-
-          const key = getDeviceKey(device);
-          if (key === undefined) return null;
-          // Server mode fills `selectedIds` from the connection's own
-          // per-row flag, so "already in?" is answered by the backend rather
-          // than by whichever page the client happens to hold.
-          const isSelected = selectedIds.has(key);
-
-          if (activeSubTab === 'selected') {
-            return (
-              <div data-no-row-click className="pointer-events-auto flex w-full items-center justify-end">
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() => toggleDevice(device)}
-                  leftIcon={<TrashIcon size={24} />}
-                  className="text-ods-error hover:opacity-80"
-                  disabled={disabled}
-                />
-              </div>
-            );
-          }
-
-          return (
-            <div data-no-row-click className="pointer-events-auto flex w-full items-center justify-end">
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={() => toggleDevice(device)}
-                leftIcon={isSelected ? <CheckCircleIcon size={24} /> : <PlusCircleIcon size={24} />}
-                // Selected is a STATE, not an affordance: the yellow fill already
-                // says "this one is in", so it holds still under the cursor. The
-                // hover repeats on both bg and border because `variant="outline"`
-                // ships its own `hover:bg-ods-bg-hover` / `hover:border-ods-border-hover`
-                //, restating them at the same value is what neutralizes them.
-                className={
-                  isSelected
-                    ? 'border-ods-accent bg-ods-open-yellow-secondary text-ods-accent hover:border-ods-accent hover:bg-ods-open-yellow-secondary'
-                    : 'text-ods-text-secondary hover:text-ods-text-primary'
-                }
-                disabled={disabled}
-              />
-            </div>
-          );
-        },
+        cell: ({ row }: { row: Row<T> }) => (
+          <InertInScope>
+            {((): ReactNode => {
+              const device = row.original;
+              const disabledReason = isDeviceDisabled?.(device);
+
+              if (disabledReason) {
+                return (
+                  <div data-no-row-click className="pointer-events-auto flex w-full items-center justify-end gap-2">
+                    <span className="whitespace-pre-line text-right text-ods-text-secondary text-h6 content-max-md:hidden">
+                      {disabledReason}
+                    </span>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      leftIcon={<PlusCircleIcon size={24} />}
+                      className="shrink-0 text-ods-text-secondary"
+                      disabled
+                    />
+                  </div>
+                );
+              }
+
+              const key = getDeviceKey(device);
+              if (key === undefined) return null;
+              // Server mode fills `selectedIds` from the connection's own
+              // per-row flag, so "already in?" is answered by the backend rather
+              // than by whichever page the client happens to hold.
+              const isSelected = selectedIds.has(key);
+
+              if (activeSubTab === 'selected') {
+                return (
+                  <div data-no-row-click className="pointer-events-auto flex w-full items-center justify-end">
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={() => toggleDevice(device)}
+                      leftIcon={<TrashIcon size={24} />}
+                      className="text-ods-error hover:opacity-80"
+                      disabled={disabled}
+                    />
+                  </div>
+                );
+              }
+
+              return (
+                <div data-no-row-click className="pointer-events-auto flex w-full items-center justify-end">
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={() => toggleDevice(device)}
+                    leftIcon={isSelected ? <CheckCircleIcon size={24} /> : <PlusCircleIcon size={24} />}
+                    // Selected is a STATE, not an affordance: the yellow fill already
+                    // says "this one is in", so it holds still under the cursor. The
+                    // hover repeats on both bg and border because `variant="outline"`
+                    // ships its own `hover:bg-ods-bg-hover` / `hover:border-ods-border-hover`
+                    //, restating them at the same value is what neutralizes them.
+                    className={
+                      isSelected
+                        ? 'border-ods-accent bg-ods-open-yellow-secondary text-ods-accent hover:border-ods-accent hover:bg-ods-open-yellow-secondary'
+                        : 'text-ods-text-secondary hover:text-ods-text-primary'
+                    }
+                    disabled={disabled}
+                  />
+                </div>
+              );
+            })()}
+          </InertInScope>
+        ),
         enableSorting: false,
         meta: { width: 'w-12 content-md:w-auto content-md:min-w-[130px] shrink-0 flex-none', align: 'right' },
       },
@@ -617,8 +649,13 @@ export function DeviceSelector<T extends DeviceRow = DeviceRow>({
     return columns.filter(c => !c.id || !hidden.has(c.id));
   }, [columns, hideColumns, isCriteria]);
 
+  // While loading the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
+  const loadingRows = useMemo(
+    () => (loading ? loadingDevices<T>(skeletonRows ?? DATA_TABLE_SKELETON_ROWS) : null),
+    [loading, skeletonRows],
+  );
   const table = useDataTable<T>({
-    data: devicesForTable,
+    data: loadingRows ?? devicesForTable,
     columns: visibleColumns,
     getRowId: row => String(getDeviceKey(row) ?? row.id),
     enableSorting: false,
@@ -674,23 +711,13 @@ export function DeviceSelector<T extends DeviceRow = DeviceRow>({
   // until there is something to remove; the row count takes the slot back then.
   const bulkAction =
     singleSelect || isCriteria ? null : activeSubTab === 'available' ? (
-      <button
-        type="button"
-        onClick={addAllDevices}
-        disabled={disabled}
-        className="cursor-pointer border-0 bg-transparent text-ods-accent underline text-h6 hover:text-ods-accent-hover disabled:cursor-not-allowed disabled:opacity-50"
-      >
+      <Button variant="link" size="compact" noPaddingX type="button" onClick={addAllDevices} disabled={disabled}>
         Add All Devices
-      </button>
+      </Button>
     ) : selectedCount > 0 ? (
-      <button
-        type="button"
-        onClick={removeAllSelected}
-        disabled={disabled}
-        className="cursor-pointer border-0 bg-transparent text-ods-error underline text-h6 hover:text-ods-error-hover disabled:cursor-not-allowed disabled:opacity-50"
-      >
+      <Button variant="link" size="compact" noPaddingX type="button" onClick={removeAllSelected} disabled={disabled}>
         Remove {server ? (server.totalCount ?? devicesForTable.length) : selectedIds.size} Devices
-      </button>
+      </Button>
     ) : null;
 
   const hasActiveFilter = columnFilters.length > 0 || selectedTags.length > 0 || searchTerm.trim().length > 0;
@@ -703,14 +730,17 @@ export function DeviceSelector<T extends DeviceRow = DeviceRow>({
       {showHeader && (
         <DataTable.Header
           rightSlot={
-            bulkAction ?? <DataTable.RowCount itemName="device" totalCount={totalCount ?? server?.totalCount} />
+            bulkAction ?? (
+              <DataTable.RowCount itemName="device" totalCount={totalCount ?? server?.totalCount} loading={loading} />
+            )
           }
         />
       )}
       <DataTable.Body
         loading={loading}
+        loadingCells
         loadingRegion={loadingRegion}
-        skeletonRows={8}
+        skeletonRows={skeletonRows}
         emptyMessage={
           isCriteria
             ? 'No devices match these criteria'

package/src/components/features/devices/device-selector/device-selector.types.ts

@@ -70,6 +70,11 @@ export interface DeviceSelectorProps<T extends DeviceRow = DeviceRow> {
   loading: boolean;
   /** The loading state announces itself ("Loading results"). `false` inside another loading region. Default `true`. */
   loadingRegion?: boolean;
+  /**
+   * How many rows the loading table draws: the host's page size when the list is paged or limited (infinite
+   * scroll's first page). Omitted, the table's own page size, else the table's default.
+   */
+  skeletonRows?: number;
   /**
    * Currently selected device keys. Optional so a skeleton can render the real
    * picker with nothing selected, the component falls back to an empty set and

package/src/components/features/devices/device-type-tile.tsx

@@ -1,4 +1,8 @@
+'use client';
+
 import { MonitorIcon } from '../../icons-v2-generated';
+import { MediaSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { renderDeviceTypeIcon } from './device-type-icon';
 
 const ICON_CLASS = 'size-4 text-ods-text-secondary';
@@ -9,9 +13,15 @@ const ICON_CLASS = 'size-4 text-ods-text-secondary';
  * unknown type draws the monitor rather than an empty tile.
  */
 export function DeviceTypeTile({ type }: { type: string | null | undefined }) {
+  // While the device is read the tile keeps its frame and its icon is a bar.
+  const loading = useLoadingScope();
   return (
     <span className="flex size-8 shrink-0 items-center justify-center rounded-[6px] border border-ods-border bg-ods-card">
-      {renderDeviceTypeIcon(type ?? undefined, ICON_CLASS) ?? <MonitorIcon className={ICON_CLASS} />}
+      {loading ? (
+        <MediaSkeleton.Icon size="sm" />
+      ) : (
+        (renderDeviceTypeIcon(type ?? undefined, ICON_CLASS) ?? <MonitorIcon className={ICON_CLASS} />)
+      )}
     </span>
   );
 }

package/src/components/features/devices/devices-grid-filters.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '../../../utils/cn';
 import { Filter02Icon } from '../../icons-v2-generated';
+import { Button } from '../../ui/button';
 import { FiltersDropdown } from '../filters-dropdown';
 import type { DeviceFilterColumn } from './devices-table-columns';
 
@@ -53,21 +54,10 @@ export function DevicesGridFilters({
           <FiltersDropdown
             key={column.key}
             triggerElement={
-              <button
-                type="button"
-                className="group inline-flex cursor-pointer select-none items-center gap-[var(--spacing-system-xsf)] py-[var(--spacing-system-sf)]"
-                aria-label={`Filter by ${column.label}`}
-              >
-                <span className="whitespace-nowrap uppercase text-ods-text-secondary transition-colors text-h5 group-hover:text-ods-text-primary">
-                  {column.label}
-                </span>
-                <Filter02Icon
-                  className={cn(
-                    'h-4 w-4 transition-colors',
-                    active ? 'text-ods-accent' : 'text-ods-text-secondary group-hover:text-ods-text-primary',
-                  )}
-                />
-              </button>
+              <Button variant="link" size="compact" noPaddingX type="button" aria-label={`Filter by ${column.label}`}>
+                <span className="select-none whitespace-nowrap uppercase text-h5">{column.label}</span>
+                <Filter02Icon className={cn(active && 'text-ods-accent')} />
+              </Button>
             }
             sections={[
               {

package/src/components/features/devices/devices-grid.tsx

@@ -2,8 +2,9 @@
 
 import type React from 'react';
 import { useRouter } from '../../../embed-shims/next-navigation';
-import { DeviceCardSkeleton, DeviceCardSkeletonGrid } from '../../loading/device-card-skeleton';
+import { LoadingRegion } from '../../loading/loading-region';
 import { DeviceCard } from '../../ui';
+import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
 import { getDeviceName } from './device-name';
 import { getDeviceOperatingSystem, getDeviceStatusConfig } from './device-status';
 import { useDevicesViewConfig } from './devices-view-config';
@@ -18,17 +19,45 @@ export interface DevicesGridProps<T extends DeviceRow = DeviceRow> {
   emptyMessage?: string;
   /** The loading state announces itself ("Loading devices"). `false` inside another loading region. Default `true`. */
   loadingRegion?: boolean;
+  /**
+   * The host's page size: the loading grid draws one full page of cards, and the next page's skeleton the same.
+   * Omitted, it falls back to {@link DEVICES_GRID_SKELETON_CARDS}.
+   */
+  pageSize?: number;
+}
+
+/** The devices grid: one column, two from `content-md`, three from `content-lg` (its cards and its next page). */
+const DEVICES_GRID_CLASS = 'grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-3';
+
+/** The cards a loading grid draws when the host states no page size. */
+export const DEVICES_GRID_SKELETON_CARDS = 12;
+
+/** The grid's cards carry no "more" button (the card opens the device), loaded and loading alike. */
+const GRID_CARD_ACTIONS = { moreButton: { visible: false } };
+
+/** A page of the grid's own cards while they are read (the first page and the next one alike), each a list item. */
+function DeviceCardLoadingPage({ count }: { count: number }) {
+  return (
+    <LoadingItems count={count}>
+      {() => (
+        <DeviceCard loading device={{ name: '' }} actions={GRID_CARD_ACTIONS} className="h-full" data-loading-item />
+      )}
+    </LoadingItems>
+  );
 }
 
 export function DevicesGrid<T extends DeviceRow = DeviceRow>({
   devices,
-  isLoading,
+  isLoading: isLoadingProp,
   hasNextPage,
   isFetchingNextPage,
   sentinelRef,
   emptyMessage = 'No devices found. Try adjusting your search or filters.',
   loadingRegion = true,
+  pageSize = DEVICES_GRID_SKELETON_CARDS,
 }: DevicesGridProps<T>) {
+  // ONE switch: in a page's loading state (or while the host reads the devices) the grid is its skeleton.
+  const isLoading = useLoadingScope() || isLoadingProp;
   const router = useRouter();
   const { getDeviceHref } = useDevicesViewConfig();
 
@@ -40,14 +69,17 @@ export function DevicesGrid<T extends DeviceRow = DeviceRow>({
   return (
     <div className="space-y-4">
       {isLoading && devices.length === 0 ? (
-        <DeviceCardSkeletonGrid count={12} region={loadingRegion} />
+        // A full page of the grid's own cards, each its own skeleton (no "more" button, as the loaded cards).
+        <LoadingRegion label="Loading devices" announce={loadingRegion} className={DEVICES_GRID_CLASS}>
+          <DeviceCardLoadingPage count={pageSize} />
+        </LoadingRegion>
       ) : devices.length === 0 ? (
         <div className="flex h-64 items-center justify-center rounded-[6px] border border-ods-border bg-ods-card">
           <p className="text-ods-text-secondary">{emptyMessage}</p>
         </div>
       ) : (
         <>
-          <div className="grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-3">
+          <div className={DEVICES_GRID_CLASS}>
             {devices.map(device => {
               const statusConfig = getDeviceStatusConfig(device.status);
               return (
@@ -70,16 +102,14 @@ export function DevicesGrid<T extends DeviceRow = DeviceRow>({
                       : undefined
                   }
                   onDeviceClick={() => handleDeviceClick(device)}
-                  actions={{
-                    moreButton: {
-                      visible: false,
-                    },
-                  }}
+                  actions={GRID_CARD_ACTIONS}
                   className="h-full"
+                  // One card of a read list: how many there are is the record's (the height gate counts them).
+                  data-loading-item
                 />
               );
             })}
-            {isFetchingNextPage && Array.from({ length: 4 }, (_, i) => <DeviceCardSkeleton key={`skeleton-${i}`} />)}
+            {isFetchingNextPage && <DeviceCardLoadingPage count={pageSize} />}
           </div>
           {hasNextPage && <div ref={sentinelRef} className="h-1" aria-hidden="true" />}
         </>

package/src/components/features/devices/devices-list.tsx

@@ -3,6 +3,7 @@
 import { type ReactNode, useCallback, useMemo } from 'react';
 import { useStickyToolbar } from '../../../hooks/ui/use-sticky-toolbar';
 import { type ColumnFiltersState, DataTable, type NoDataProps, type OnChangeFn } from '../../ui';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { DevicesFilterToolbar } from './devices-filter-toolbar';
 import { DevicesTableBody, getDeviceActionsColumn, getDeviceFilterColumns } from './devices-table-columns';
 import type { DeviceFilters, DeviceRow } from './types';
@@ -139,6 +140,9 @@ export interface DevicesListProps<T extends DeviceRow = DeviceRow> {
 
 const NOOP = () => {};
 
+/** The rows a loading list draws when the host states none (a typical page of devices). */
+const DEVICES_LIST_SKELETON_ROWS = 8;
+
 /**
  * The devices list, search + tag chips + column funnels over the shared devices
  * table, identical on every surface that shows devices.
@@ -164,7 +168,7 @@ const NOOP = () => {};
  */
 export function DevicesList<T extends DeviceRow = DeviceRow>({
   devices,
-  isLoading,
+  isLoading: isLoadingProp,
   deviceFilters = null,
   filtersPending,
   isPending,
@@ -176,12 +180,15 @@ export function DevicesList<T extends DeviceRow = DeviceRow>({
   rowActions,
   emptyState,
   narrowedEmptyState,
-  skeletonRows = 8,
+  skeletonRows = DEVICES_LIST_SKELETON_ROWS,
   infiniteScroll,
   stickyToolbar = true,
   stickyHeaderOffset,
   className,
 }: DevicesListProps<T>) {
+  // ONE switch: in a page's loading state (or while the host reads the rows) the list is loading: its toolbar and
+  // column header stay, its body draws the row skeletons, never the empty state.
+  const isLoading = useLoadingScope() || !!isLoadingProp;
   const patch = useCallback(
     (next: Partial<DevicesListNarrowing>) => onNarrowingChange({ ...narrowing, ...next }),
     [narrowing, onNarrowingChange],

package/src/components/features/devices/devices-panel-view.tsx

@@ -13,6 +13,7 @@ import {
   PageLayout,
   TabSelector,
 } from '../../ui';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { DevicesFilterToolbar, type DevicesFilterToolbarProps } from './devices-filter-toolbar';
 import { DevicesGrid } from './devices-grid';
 import { DevicesGridFilters } from './devices-grid-filters';
@@ -111,6 +112,12 @@ export interface DevicesPanelViewProps<T extends DeviceRow = DeviceRow> {
   onLoadMore?: () => void;
   /** The grid's infinite-scroll sentinel. */
   gridSentinelRef?: RefObject<HTMLDivElement | null>;
+  /**
+   * The host query's page size: a loading table or grid draws one full page, and the next page's skeleton the same.
+   * Omitted, the table falls back to its own page size (`DataTable.Body`, `InfiniteFooter`) and the grid to its
+   * declared default.
+   */
+  pageSize?: number;
 }
 
 /**
@@ -131,7 +138,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
   onViewModeChange,
   actions,
   devices,
-  loading = false,
+  loading: loadingGiven = false,
   loadingRegion = true,
   isNarrowing = false,
   totalCount,
@@ -152,7 +159,11 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
   isFetchingNextPage = false,
   onLoadMore = noop,
   gridSentinelRef,
+  pageSize,
 }: DevicesPanelViewProps<T>) {
+  // One switch: a page's loading scope, or the host's request.
+  const scoped = useLoadingScope();
+  const loading = scoped || loadingGiven;
   const gridColumns =
     filterColumns ?? getDeviceFilterColumns(deviceFilters).filter(column => !hideFilters?.includes(column.key));
 
@@ -165,7 +176,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
           isLoading={loading}
           loadingRegion={false}
           emptyMessage={loading ? '' : emptyMessage}
-          skeletonRows={10}
+          skeletonRows={pageSize}
           stickyHeaderOffset="top-[96px]"
           deviceFilters={deviceFilters}
           // Loading: the facets have not answered, which is not "this list has
@@ -185,7 +196,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
                 hasNextPage={hasNextPage}
                 isFetchingNextPage={isFetchingNextPage}
                 onLoadMore={onLoadMore}
-                skeletonRows={2}
+                skeletonRows={pageSize}
               />
             )
           }
@@ -210,6 +221,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
             isFetchingNextPage={isFetchingNextPage}
             sentinelRef={gridSentinelRef}
             emptyMessage={loading ? '' : emptyMessage}
+            pageSize={pageSize}
           />
         </>
       )}
@@ -235,7 +247,8 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
       contentClassName="flex flex-col"
     >
       {headerSlot}
-      {loading && loadingRegion && (
+      {/* Inside a page's loading scope the page has announced it already. */}
+      {loading && loadingRegion && !scoped && (
         <span role="status" className="sr-only">
           Loading devices
         </span>