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

package/src/components/features/os-type-badge.tsx

@@ -10,6 +10,8 @@
 import type React from 'react';
 import { cn } from '../../utils/cn';
 import { getOSIcon, getOSLabel, normalizeOSType } from '../../utils/os-utils';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 
 export interface OSTypeBadgeProps {
   /** OS type string (case-insensitive, handles aliases) */
@@ -47,6 +49,17 @@ export const OSTypeBadge: React.FC<OSTypeBadgeProps> = ({
   labelOnly = false,
   rightIcon = null,
 }) => {
+  // The OS is still being read: its icon (at the loaded size) and its label as bars.
+  if (useLoadingScope() && !osType) {
+    if (iconOnly) return <UnifiedSkeleton className={cn(iconSize, className)} />;
+    if (labelOnly) return <TextLineSkeleton type="inherit" as="span" className={cn('w-16', className)} />;
+    return (
+      <div className={cn('flex items-center gap-1 text-h4', className)}>
+        <UnifiedSkeleton className={iconSize} />
+        <TextLineSkeleton type="h4" className="w-16" />
+      </div>
+    );
+  }
   if (!osType) {
     return labelOnly ? <span className={cn('text-ods-text-secondary', className)}>Unknown</span> : null;
   }

package/src/components/features/paths-display.tsx

@@ -4,7 +4,8 @@ import type React from 'react';
 import { cn } from '../../utils/cn';
 import { Copy02Icon } from '../icons-v2-generated/documents/copy-02-icon';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
-import { useLoadingScope } from '../ui/loading-scope';
+import { Button, buttonVariants } from '../ui/button';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
 
 export interface PathsDisplayProps {
   /**
@@ -56,8 +57,7 @@ const PATHS_TITLE_CLASS = 'text-ods-text-primary text-h4';
 const PATHS_DESCRIPTION_CLASS = 'text-ods-text-secondary text-h6';
 const PATHS_FRAME_CLASS = 'overflow-hidden rounded-[6px] border border-ods-border bg-ods-bg';
 const PATHS_ROW_CLASS = 'flex items-center gap-4 border-b border-ods-border p-4 last:border-b-0';
-const PATHS_COPY_BUTTON_CLASS =
-  'shrink-0 rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus';
+const PATHS_COPY_BUTTON_LAYOUT = 'shrink-0';
 /** How many rows the skeleton draws when the paths are read with the page. */
 export const PATHS_DISPLAY_SKELETON_ROWS = 2;
 const PATH_SKELETON_WIDTHS = ['w-3/5', 'w-2/5', 'w-1/2', 'w-1/3'] as const;
@@ -126,18 +126,20 @@ export function PathsDisplay({
       {description && <div className={PATHS_DESCRIPTION_CLASS}>{description}</div>}
       <div className={PATHS_FRAME_CLASS}>
         {paths.map(path => (
-          <div key={path} className={PATHS_ROW_CLASS}>
+          <div key={path} className={PATHS_ROW_CLASS} data-loading-item>
             {leadingIcon && <span className="shrink-0 text-ods-text-primary">{leadingIcon}</span>}
             <span className="min-w-0 flex-1 truncate text-ods-text-primary text-h4">{path}</span>
             {showCopyButtons && onCopyPath && (
-              <button
+              <Button
+                variant="transparent"
+                size="icon-sm"
                 type="button"
                 onClick={() => onCopyPath(path)}
                 aria-label={`Copy ${path}`}
-                className={PATHS_COPY_BUTTON_CLASS}
+                className={PATHS_COPY_BUTTON_LAYOUT}
               >
                 <Copy02Icon className={copyIconSize} />
-              </button>
+              </Button>
             )}
           </div>
         ))}
@@ -150,7 +152,7 @@ export function PathsDisplay({
  * The paths list while its paths are read: the same frame, its title, description, leading icon and copy glyph for
  * real, and `rows` rows with a bar of a path each.
  */
-export function PathsDisplaySkeleton({
+function PathsDisplaySkeleton({
   rows = PATHS_DISPLAY_SKELETON_ROWS,
   title,
   description,
@@ -169,19 +171,23 @@ export function PathsDisplaySkeleton({
       {title && <div className={PATHS_TITLE_CLASS}>{title}</div>}
       {description && <div className={PATHS_DESCRIPTION_CLASS}>{description}</div>}
       <div className={PATHS_FRAME_CLASS}>
-        {Array.from({ length: rows }, (_, i) => (
-          <div key={i} className={PATHS_ROW_CLASS}>
-            {leadingIcon && <span className="shrink-0 text-ods-text-primary">{leadingIcon}</span>}
-            <div className="min-w-0 flex-1">
-              <TextLineSkeleton type="h4" className={PATH_SKELETON_WIDTHS[i % PATH_SKELETON_WIDTHS.length]} />
+        <LoadingItems count={rows}>
+          {i => (
+            <div className={PATHS_ROW_CLASS} data-loading-item>
+              {leadingIcon && <span className="shrink-0 text-ods-text-primary">{leadingIcon}</span>}
+              <div className="min-w-0 flex-1">
+                <TextLineSkeleton type="h4" className={PATH_SKELETON_WIDTHS[i % PATH_SKELETON_WIDTHS.length]} />
+              </div>
+              {showCopyButtons && (
+                <span
+                  className={cn(buttonVariants({ variant: 'transparent', size: 'icon-sm' }), PATHS_COPY_BUTTON_LAYOUT)}
+                >
+                  <Copy02Icon className={copyIconSize} />
+                </span>
+              )}
             </div>
-            {showCopyButtons && (
-              <span className={PATHS_COPY_BUTTON_CLASS}>
-                <Copy02Icon className={copyIconSize} />
-              </span>
-            )}
-          </div>
-        ))}
+          )}
+        </LoadingItems>
       </div>
     </div>
   );

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

@@ -15,6 +15,9 @@ interface PlatformBadgeProps {
   size?: 'xs' | 'sm' | 'md';
   showLabel?: boolean;
   className?: string;
+  /** The record is still being read: the badge draws its skeleton at its size. A loading scope does the same while
+   *  no platform is given. */
+  loading?: boolean;
 }
 
 const sizeClasses = {
@@ -38,10 +41,11 @@ 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) {
+export function PlatformBadge({ platform, size = 'sm', showLabel = true, className, loading }: 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) {
+  const inScope = useLoadingScope();
+  if (loading || (inScope && !platform)) {
     return <PlatformBadgeSkeleton size={size} showLabel={showLabel} className={className} />;
   }
   if (!platform) {
@@ -82,7 +86,7 @@ const PLATFORM_BADGE_SKELETON_SIZE = {
 } as const;
 
 /** A platform badge while its record is read: one shape of the badge's height at its size. */
-export function PlatformBadgeSkeleton({
+function PlatformBadgeSkeleton({
   size = 'sm',
   showLabel = true,
   className,

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

@@ -3,8 +3,18 @@
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { openInNewTab } from '../../../utils/open-in-new-tab';
 import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button';
-import { type ColumnDef, DataTable, type Row, type SortingState, useDataTable } from '../../ui/data-table';
+import {
+  type ColumnDef,
+  DataTable,
+  dataTableLoadingRows,
+  type Row,
+  type SortingState,
+  useDataTable,
+} from '../../ui/data-table';
+import { DATA_TABLE_SKELETON_ROWS } from '../../ui/data-table/utils';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { MoreActionsMenu } from '../../ui/more-actions-menu';
 import type { NoDataProps } from '../../ui/no-data';
 import { Tag } from '../../ui/tag';
@@ -22,6 +32,40 @@ const EMPTY_COLUMN_FILTERS: never[] = [];
 // full set of OS icons rather than a plain-text "All" label.
 const ALL_PLATFORMS = ['windows', 'darwin', 'linux'];
 
+/** A policy still being read: a row the table keys, every field a cell shows empty (each draws its loading form). */
+const loadingPolicy = (id: string): PolicyTableRow => ({
+  id,
+  name: '',
+  critical: false,
+  severityLabel: '',
+  status: { label: '', variant: 'grey' },
+  href: '',
+});
+
+/** The Severity cell; a bar while the row is read. */
+function PolicySeverity({ label }: { label: string }) {
+  if (useLoadingScope() && !label) return <TextLineSkeleton type="h6" className="w-16" />;
+  return <span className="text-ods-text-primary text-h6">{label}</span>;
+}
+
+/** The row's open button: static chrome, drawn real and inert while the row is read. */
+function OpenPolicyButton({ href, name }: { href: string; name: string }) {
+  const loading = useLoadingScope();
+  return (
+    <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
+      <Button
+        onClick={loading ? undefined : openInNewTab(href)}
+        disabled={loading}
+        variant="outline"
+        size="icon"
+        leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
+        aria-label={`Open ${name}`}
+        className="bg-ods-card"
+      />
+    </div>
+  );
+}
+
 const NOTE_TONE_CLASS = {
   error: 'text-ods-error',
   warning: 'text-ods-warning',
@@ -68,17 +112,20 @@ export function PoliciesTable({
   stickyHeader = false,
   stickyHeaderOffset,
   rightSlot,
-  skeletonRows = 10,
+  skeletonRows,
   hasMore = false,
   onLoadMore,
   isLoadingMore = false,
 }: PoliciesTableProps) {
+  // ONE switch: the host's read (`isLoading`) or a page's loading scope draws the header, the reserved columns and
+  // the body's skeleton rows alike.
+  const loading = useLoadingScope() || isLoading;
   const [sorting, setSorting] = useState<SortingState>([]);
 
   // Reserve the actions column while loading so the column count stays stable across
   // skeleton, loading and loaded (otherwise it appears once rows arrive and shifts every
   // column, the "jitter"). Loaded rows in every caller carry actions.
-  const hasActions = useMemo(() => isLoading || rows.some(r => r.actions && r.actions.length > 0), [isLoading, rows]);
+  const hasActions = useMemo(() => loading || rows.some(r => r.actions && r.actions.length > 0), [loading, rows]);
 
   const columns = useMemo<ColumnDef<PolicyTableRow>[]>(() => {
     const cols: ColumnDef<PolicyTableRow>[] = [
@@ -101,9 +148,7 @@ export function PoliciesTable({
         id: 'severity',
         accessorFn: (row: PolicyTableRow) => (row.critical ? 1 : 0),
         header: 'SEVERITY',
-        cell: ({ row }: { row: Row<PolicyTableRow> }) => (
-          <span className="text-ods-text-primary text-h6">{row.original.severityLabel}</span>
-        ),
+        cell: ({ row }: { row: Row<PolicyTableRow> }) => <PolicySeverity label={row.original.severityLabel} />,
         enableSorting: sortable,
         meta: { width: 'w-[100px]', sortable, hideAt: 'md' },
       },
@@ -158,18 +203,7 @@ export function PoliciesTable({
       id: 'open',
       header: '',
       cell: ({ row }: { row: Row<PolicyTableRow> }) =>
-        row.original.href ? (
-          <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
-            <Button
-              onClick={openInNewTab(row.original.href)}
-              variant="outline"
-              size="icon"
-              leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
-              aria-label={`Open ${row.original.name}`}
-              className="bg-ods-card"
-            />
-          </div>
-        ) : null,
+        row.original.href !== undefined ? <OpenPolicyButton href={row.original.href} name={row.original.name} /> : null,
       enableSorting: false,
       meta: { width: 'w-12 shrink-0 flex-none', hideAt: 'md', align: 'right' },
     });
@@ -177,8 +211,13 @@ export function PoliciesTable({
     return cols;
   }, [showPlatform, sortable, hasActions]);
 
+  // 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, loadingPolicy) : null),
+    [loading, skeletonRows],
+  );
   const table = useDataTable<PolicyTableRow>({
-    data: rows,
+    data: loadingRows ?? rows,
     columns,
     getRowId: (row: PolicyTableRow) => row.id,
     clientSideSorting: sortable,
@@ -201,7 +240,7 @@ export function PoliciesTable({
 
   // Hide the column header on the empty state: only show it while loading (skeleton rows)
   // or when there are real rows.
-  const showHeader = isLoading || rows.length > 0;
+  const showHeader = loading || rows.length > 0;
 
   return (
     <DataTable table={table}>
@@ -215,7 +254,8 @@ export function PoliciesTable({
         />
       )}
       <DataTable.Body
-        loading={isLoading}
+        loading={loading}
+        loadingCells
         skeletonRows={skeletonRows}
         emptyMessage={emptyMessage}
         emptyState={emptyState}
@@ -223,12 +263,7 @@ export function PoliciesTable({
         rowHref={rowHref}
       />
       {hasMore && onLoadMore && (
-        <DataTable.InfiniteFooter
-          hasNextPage
-          isFetchingNextPage={isLoadingMore}
-          onLoadMore={onLoadMore}
-          skeletonRows={2}
-        />
+        <DataTable.InfiniteFooter hasNextPage isFetchingNextPage={isLoadingMore} onLoadMore={onLoadMore} />
       )}
     </DataTable>
   );

package/src/components/features/policy-configuration-panel.tsx

@@ -11,9 +11,11 @@ import type {
 } from '../../types/permissions';
 import { cn } from '../../utils/cn';
 import { useCollapsible } from '../chat/hooks/use-collapsible';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { ToolIcon } from '../tool-icon';
 import { Button } from '../ui/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
+import { loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import { APPROVAL_LEVEL_META, APPROVAL_LEVELS } from './approval-level';
 
 const approvalLevelOptions = APPROVAL_LEVELS.map(value => ({ value, label: APPROVAL_LEVEL_META[value].label }));
@@ -21,6 +23,25 @@ const approvalLevelOptions = APPROVAL_LEVELS.map(value => ({ value, label: APPRO
 const POLICY_LEVEL_WIDTH = 'w-[180px]';
 const CATEGORY_LEVEL_WIDTH = 'w-[256px]';
 
+/** How many collapsed category rows the panel draws while loading when the host passes no categories. */
+export const POLICY_CONFIGURATION_PANEL_SKELETON_CATEGORIES = 4;
+
+/** A category's header row, read by the row and its skeleton (the same box). */
+const CATEGORY_HEADER_CLASS =
+  'flex items-center gap-[var(--spacing-system-m)] border-t border-ods-border bg-ods-card py-[var(--spacing-system-s)] pl-[var(--spacing-system-m)] pr-[var(--spacing-system-xsf)] first:border-t-0';
+/** The square tile a category's (and a policy's) icon sits in. */
+const ICON_TILE_SIZE_CLASS = 'h-8 w-8 shrink-0 rounded-md';
+const ICON_TILE_CLASS = cn(ICON_TILE_SIZE_CLASS, 'flex items-center justify-center border border-ods-border bg-ods-bg');
+/** The category's name and count column. */
+const CATEGORY_TEXT_CLASS = 'flex min-w-0 flex-1 flex-col';
+/** The category's empty "Global Permission" column at `md+` outside edit mode. */
+const CATEGORY_LEVEL_COLUMN_CLASS = cn(
+  'hidden shrink-0 px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] content-md:block',
+  CATEGORY_LEVEL_WIDTH,
+);
+/** The expand / collapse control's chevron. */
+const CHEVRON_CLASS = 'h-6 w-6 text-ods-text-primary transition-transform duration-300';
+
 const getApprovalLevelLabel = (level: ApprovalLevel): string => APPROVAL_LEVEL_META[level]?.label ?? level;
 
 const ApprovalLevelDropdown: FC<{
@@ -30,11 +51,13 @@ const ApprovalLevelDropdown: FC<{
   allowClear?: boolean;
   triggerClassName?: string;
   contentClassName?: string;
-}> = ({ value, onChange, allowClear = false, triggerClassName, contentClassName }) => (
+  disabled?: boolean;
+}> = ({ value, onChange, allowClear = false, triggerClassName, contentClassName, disabled }) => (
   <DropdownMenu>
-    <DropdownMenuTrigger asChild>
+    <DropdownMenuTrigger asChild disabled={disabled}>
       <Button
         variant="outline"
+        disabled={disabled}
         rightIcon={<ChevronDown className="h-6 w-6 text-ods-text-secondary" />}
         className={cn(
           'flex h-auto items-center justify-between gap-[var(--spacing-system-xsf)] rounded-md border border-ods-border bg-ods-card !px-[var(--spacing-system-xsf)] py-[var(--spacing-system-xsf)] transition-colors !text-h6 hover:bg-ods-bg-hover',
@@ -73,7 +96,7 @@ const PolicyRow: FC<{
   return (
     <div className="flex items-start gap-[var(--spacing-system-m)] border-b border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] last:border-b-0 content-md:items-center">
       {/* Tool Icon */}
-      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-bg">
+      <div className={ICON_TILE_CLASS}>
         <ToolIcon toolType={policy.toolName} size={16} />
       </div>
 
@@ -120,6 +143,15 @@ const PolicyRow: FC<{
   );
 };
 
+/** A category before its policies are read: the host's name and icon when it passes them, else nothing yet. */
+const LOADING_CATEGORY: PermissionCategory = { id: '', name: '', policies: [] };
+
+/**
+ * One category, loaded and loading. While its policies are read (`loading`) the header is the same row, collapsed and
+ * inert: the icon static (the host's, else the default shield), the name the host passes drawn for real (a bar when
+ * there is none), the configuration count a bar, and the edit-mode dropdowns with their static "Set Global
+ * Permission" label, disabled.
+ */
 const CategorySection: FC<{
   category: PermissionCategory;
   editMode: boolean;
@@ -129,7 +161,23 @@ const CategorySection: FC<{
   onToggle: (categoryId: string) => void;
   onBulkLevelChange: (categoryId: string, level: ApprovalLevel | undefined) => void;
   onPolicyPermissionChange: (categoryId: string, policyId: string, level: ApprovalLevel) => void;
-}> = ({ category, editMode, isExpanded, bulkLevel, onToggle, onBulkLevelChange, onPolicyPermissionChange }) => {
+  loading?: boolean;
+  /** List markers (`data-loading-item`), set by the panel on each category header. */
+  [key: `data-${string}`]: unknown;
+}> = ({
+  category,
+  editMode,
+  isExpanded: isExpandedProp,
+  bulkLevel,
+  onToggle,
+  onBulkLevelChange,
+  onPolicyPermissionChange,
+  loading: loadingGiven = false,
+  ...props
+}) => {
+  // ONE switch: a page's loading scope, or the panel's read.
+  const loading = useLoadingScope() || loadingGiven;
+  const isExpanded = isExpandedProp && !loading;
   const { innerRef, containerStyle } = useCollapsible({ expanded: isExpanded, durationMs: 300 });
   const handleBulkChange = (level: ApprovalLevel | undefined) => onBulkLevelChange(category.id, level);
 
@@ -137,20 +185,29 @@ const CategorySection: FC<{
     <>
       {/* Category Header */}
       <div
-        className="flex cursor-pointer items-center gap-[var(--spacing-system-m)] border-t border-ods-border bg-ods-card py-[var(--spacing-system-s)] pl-[var(--spacing-system-m)] pr-[var(--spacing-system-xsf)] transition-colors first:border-t-0 hover:bg-ods-bg-hover"
-        onClick={() => onToggle(category.id)}
+        {...loadingItemProps(props)}
+        className={cn(CATEGORY_HEADER_CLASS, !loading && 'cursor-pointer transition-colors hover:bg-ods-bg-hover')}
+        onClick={loading ? undefined : () => onToggle(category.id)}
       >
-        {/* Category Icon */}
-        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-bg">
+        {/* Category Icon (static: the host's, else the default shield) */}
+        <div className={ICON_TILE_CLASS}>
           <div className="text-ods-text-secondary">{category.icon ?? <Shield className="h-4 w-4" />}</div>
         </div>
 
         {/* Category Info — on mobile the bulk dropdown stacks below the count */}
-        <div className="flex min-w-0 flex-1 flex-col">
-          <p className="truncate text-ods-text-primary text-h4" title={category.name}>
-            {category.name}
-          </p>
-          <p className="text-ods-text-secondary text-h6">{category.policies.length} Configurations</p>
+        <div className={CATEGORY_TEXT_CLASS}>
+          {category.name ? (
+            <p className="truncate text-ods-text-primary text-h4" title={category.name}>
+              {category.name}
+            </p>
+          ) : (
+            <TextLineSkeleton type="h4" className="w-40 max-w-full" />
+          )}
+          {loading ? (
+            <TextLineSkeleton type="h6" className="w-24" />
+          ) : (
+            <p className="text-ods-text-secondary text-h6">{category.policies.length} Configurations</p>
+          )}
           {editMode && (
             <div className="mt-[var(--spacing-system-xsf)] content-md:hidden" onClick={e => e.stopPropagation()}>
               <ApprovalLevelDropdown
@@ -159,6 +216,7 @@ const CategorySection: FC<{
                 allowClear
                 triggerClassName="w-full"
                 contentClassName={CATEGORY_LEVEL_WIDTH}
+                disabled={loading}
               />
             </div>
           )}
@@ -173,39 +231,29 @@ const CategorySection: FC<{
               allowClear
               triggerClassName={CATEGORY_LEVEL_WIDTH}
               contentClassName={CATEGORY_LEVEL_WIDTH}
+              disabled={loading}
             />
           </div>
         ) : (
-          <div
-            className={cn(
-              'hidden shrink-0 px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] content-md:block',
-              CATEGORY_LEVEL_WIDTH,
-            )}
-          />
+          <div className={CATEGORY_LEVEL_COLUMN_CLASS} />
         )}
 
         {/* Expand/Collapse Button */}
         <Button
           type="button"
           variant="transparent"
+          disabled={loading}
           onClick={e => {
             e.stopPropagation();
             onToggle(category.id);
           }}
-          leftIcon={
-            <ChevronDown
-              className={cn(
-                'h-6 w-6 text-ods-text-primary transition-transform duration-300',
-                isExpanded && 'rotate-180',
-              )}
-            />
-          }
+          leftIcon={<ChevronDown className={cn(CHEVRON_CLASS, isExpanded && 'rotate-180')} />}
           className="h-auto w-auto shrink-0 rounded-md"
           aria-label={isExpanded ? 'Collapse' : 'Expand'}
         />
       </div>
 
-      {/* Policies List */}
+      {/* Policies List: collapsed while the policies are read (`isExpanded` is false), so it takes no height. */}
       <div
         style={{
           ...containerStyle,
@@ -218,7 +266,8 @@ const CategorySection: FC<{
       >
         <div ref={innerRef} className="px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-0">
           <div className="overflow-hidden rounded-md border border-ods-border">
-            {category.policies.map(policy => (
+            {/* No rows while the policies are read: nothing read is drawn, even collapsed. */}
+            {(loading ? [] : category.policies).map(policy => (
               <PolicyRow
                 key={policy.id}
                 policy={policy}
@@ -248,13 +297,20 @@ const CategorySection: FC<{
 /** One shared empty map, so a reset that changes nothing changes no identity. */
 const NO_BULK_LEVELS: Record<string, ApprovalLevel | undefined> = {};
 
+/** The panel's frame, loaded and loading. */
+const PANEL_CLASS = 'overflow-hidden rounded-md border border-ods-border bg-ods-card';
+
 export const PolicyConfigurationPanel: FC<PolicyConfigurationPanelProps> = ({
   categories,
   editMode,
   onPolicyPermissionChange,
   onCategoryPermissionChange,
+  loading: loadingProp,
+  skeletonCount = POLICY_CONFIGURATION_PANEL_SKELETON_CATEGORIES,
   className,
 }) => {
+  // ONE switch: in a page's loading state (or while the host reads the policies) every category is its skeleton.
+  const loading = useLoadingScope() || !!loadingProp;
   const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(new Set());
   const [bulkLevels, setBulkLevels] = useState<Record<string, ApprovalLevel | undefined>>(NO_BULK_LEVELS);
 
@@ -285,11 +341,16 @@ export const PolicyConfigurationPanel: FC<PolicyConfigurationPanelProps> = ({
     }
   };
 
+  // While loading: the host's categories as they are, else a typical count of categories not read yet.
+  const shown: PermissionCategory[] =
+    loading && categories.length === 0 ? Array.from({ length: skeletonCount }, () => LOADING_CATEGORY) : categories;
+
   return (
-    <div className={cn('overflow-hidden rounded-md border border-ods-border bg-ods-card', className)}>
-      {categories.map(category => (
+    <div className={cn(PANEL_CLASS, className)}>
+      {shown.map((category, index) => (
         <CategorySection
-          key={category.id}
+          key={category.id || index}
+          data-loading-item
           category={category}
           editMode={editMode}
           isExpanded={expandedIds.has(category.id)}
@@ -297,6 +358,7 @@ export const PolicyConfigurationPanel: FC<PolicyConfigurationPanelProps> = ({
           onToggle={handleToggle}
           onBulkLevelChange={handleBulkLevelChange}
           onPolicyPermissionChange={onPolicyPermissionChange}
+          loading={loading}
         />
       ))}
     </div>

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

@@ -8,7 +8,7 @@ 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 { LoadingItems, loadingItemProps, 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. */
@@ -86,6 +86,9 @@ interface PushButtonSelectorProps<Id extends SelectableOptionId = string> {
 }
 
 /** The selector's layout, read by the selector and by its skeleton, so the skeleton is the selector's size. */
+/** The option rows a loading selector draws when the host states none (a typical short list of options). */
+const PUSH_BUTTON_SELECTOR_SKELETON_OPTIONS = 3;
+
 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';
@@ -109,9 +112,15 @@ 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 }) {
+function OptionRowSkeleton({
+  description = true,
+  ...props
+}: {
+  description?: boolean;
+  [key: `data-${string}`]: unknown;
+}) {
   return (
-    <div className={cn(OPTION_FRAME_CLASS, OPTION_IDLE_SURFACE_CLASS)}>
+    <div className={cn(OPTION_FRAME_CLASS, OPTION_IDLE_SURFACE_CLASS)} {...loadingItemProps(props)}>
       <div className={OPTION_ROW_CLASS}>
         <div className={OPTION_LEAD_CLASS}>
           <UnifiedSkeleton className={OPTION_ICON_BOX_CLASS} />
@@ -149,9 +158,9 @@ function OptionListSkeleton({
   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} />);
+  const rows = (n: number) => (
+    <LoadingItems count={n}>{() => <OptionRowSkeleton description={description} data-loading-item />}</LoadingItems>
+  );
   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 (
@@ -166,7 +175,7 @@ function OptionListSkeleton({
   );
 }
 
-export interface PushButtonSelectorSkeletonProps {
+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. */
@@ -185,8 +194,8 @@ export interface PushButtonSelectorSkeletonProps {
  * 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,
+function PushButtonSelectorSkeleton({
+  count = PUSH_BUTTON_SELECTOR_SKELETON_OPTIONS,
   title,
   helpText,
   sections,
@@ -227,7 +236,7 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
   optional = false,
   isLoading = false,
   error = null,
-  skeletonCount = 3,
+  skeletonCount = PUSH_BUTTON_SELECTOR_SKELETON_OPTIONS,
   optionDescriptions = true,
   sections,
   search,
@@ -272,6 +281,7 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
 
   const searchInput = search ? (
     <Input
+      userValue
       value={search.value}
       onChange={e => search.onChange(e.target.value)}
       placeholder={search.placeholder}
@@ -342,6 +352,7 @@ export function PushButtonSelector<Id extends SelectableOptionId = string>({
     const optionEl = (
       <div
         key={option.id}
+        data-loading-item
         className={cn(
           'group transition-all duration-200',
           OPTION_FRAME_CLASS,

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

@@ -13,7 +13,7 @@ export type {
 } from './remote-session-block';
 export { RemoteSessionChatPanel } from './remote-session-chat-panel';
 export type { RemoteSessionChatPanelProps } from './remote-session-chat-panel';
-export { RemoteDesktopChatMessageRow, RemoteDesktopChatMessageRowSkeleton } from './remote-desktop-chat-message-row';
+export { RemoteDesktopChatMessageRow } 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';