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

package/src/components/ui/checkbox-block.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import type * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { type ComponentRef, type ReactNode, forwardRef } from 'react';
 import { cn } from '../../utils/cn';
-import { CheckboxCheckmarkIcon } from '../icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon';
-import { booleanCheckedChange } from './checkbox';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { Checkbox } from './checkbox';
+import { Label } from './label';
+import { loadingItemProps, useLoadingScope } from './loading-scope';
 import { RequiredMark } from './required-mark';
 
 interface CheckboxBlockProps {
@@ -12,7 +14,8 @@ interface CheckboxBlockProps {
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
-  /** Primary label (supports rich text / ReactNode for inline links) */
+  /** Primary label (supports rich text / ReactNode for inline links). `null` is a label still being read: while the
+   *  block loads it draws an `h4` bar in the label's own line. */
   label: ReactNode;
   /** Optional secondary description below the label (supports rich text / ReactNode) */
   description?: ReactNode;
@@ -30,9 +33,23 @@ interface CheckboxBlockProps {
   required?: boolean;
   /** Error message displayed below the block (also triggers red border) */
   error?: string;
+  /**
+   * Whether the box is checked is still being read: the label and description are drawn for real and the box is a
+   * skeleton of the box's own size. A loading scope does the same.
+   */
+  loading?: boolean;
   className?: string;
+  /** `data-*` markers (`data-loading-item` on a read list's block), on the block's root in both forms. */
+  [key: `data-${string}`]: unknown;
 }
 
+/** The label's bar while a `null` label is read. */
+const CHECKBOX_BLOCK_LABEL_BAR_CLASS = 'w-40 max-w-full';
+
+/** The block's box over the checkbox's own (`CHECKBOX_BOX_CLASS`): grown at `md`. `Checkbox` reads it for the box and
+ *  for its skeleton. */
+const CHECKBOX_BLOCK_BOX_CLASS = 'rounded-[6px] content-md:size-6';
+
 const CheckboxBlock = forwardRef<ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxBlockProps>(
   (
     {
@@ -47,102 +64,115 @@ const CheckboxBlock = forwardRef<ComponentRef<typeof CheckboxPrimitive.Root>, Ch
       disabled,
       required,
       error,
+      loading: loadingProp,
       className,
+      ...props
     },
     ref,
-  ) => (
-    <div className={cn('relative flex w-full flex-col', className)}>
-      <label
-        htmlFor={id}
-        // Same marker every field exposes — it is how a form finds (and scrolls
-        // to) the first control that failed validation.
-        data-invalid={error ? true : undefined}
-        className={cn(
-          'flex w-full items-center gap-[var(--spacing-system-s)] rounded-md ring-1 ring-inset',
-          // Trailing content stacks full-width below the text on mobile.
-          trailing && 'flex-wrap content-md:flex-nowrap',
-          'p-[var(--spacing-system-sf)]',
-          !description && 'min-h-[44px] content-md:min-h-[48px]',
-          description && 'min-h-[60px] content-md:min-h-[64px]',
-          'bg-ods-card ring-ods-border',
-          'cursor-pointer transition-colors duration-200',
-          // States mirror Input: hover / active move the BACKGROUND, the ring
-          // stays put. Disabled swaps to the flat `ods-bg` fill and greys the
-          // text + the box instead of fading the whole block, so a disabled block
-          // reads the same as a disabled field. The greying itself lives on the
-          // TEXT COLUMN below, not here: as a descendant rule on the label it also
-          // repainted the checked INDICATOR (Radix renders it as a `span`, and the
-          // checkmark svg inherits `currentColor`) and whatever `trailing` renders
-          // — a `Tag`'s label is a span too, and it went invisible against its own
-          // fill in the light theme.
-          !disabled && 'hover:bg-ods-bg-hover active:bg-ods-bg-active',
-          disabled && 'cursor-not-allowed bg-ods-bg',
-          error && 'ring-ods-error',
-        )}
-      >
-        <CheckboxPrimitive.Root
-          ref={ref}
-          id={id}
-          checked={checked}
-          defaultChecked={defaultChecked}
-          onCheckedChange={booleanCheckedChange(onCheckedChange)}
-          disabled={disabled}
-          aria-required={required || undefined}
-          aria-invalid={error ? true : undefined}
-          className={cn(
-            'h-4 w-4 shrink-0 content-md:h-6 content-md:w-6',
-            'rounded-[6px] border-2',
-            error ? 'border-ods-error' : 'border-[var(--color-border-strong)]',
-            'bg-ods-card',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ods-card',
-            // Disabled: the EMPTY box dims with the text instead of the whole
-            // block fading. A checked box keeps its accent fill — greying it too
-            // would bury the checkmark, and "on but locked" has to stay readable.
-            'disabled:cursor-not-allowed',
-            'disabled:data-[state=unchecked]:border-ods-border disabled:data-[state=unchecked]:bg-ods-bg',
-            'data-[state=checked]:border-[var(--color-accent-primary)] data-[state=checked]:bg-[var(--color-accent-primary)]',
-          )}
-        >
-          <CheckboxPrimitive.Indicator className="flex items-center justify-center text-ods-text-on-accent">
-            <CheckboxCheckmarkIcon className="h-2 w-2 content-md:h-2.5 content-md:w-2.5" />
-          </CheckboxPrimitive.Indicator>
-        </CheckboxPrimitive.Root>
-        <div
+  ) => {
+    // ONE switch for the block's own read part: the box is its skeleton through `Checkbox`; a `null` label is a bar.
+    const loading = useLoadingScope() || !!loadingProp;
+    return (
+      <div className={cn('relative flex w-full flex-col', className)} {...loadingItemProps(props)}>
+        <Label
+          variant="surface"
+          htmlFor={id}
+          // Same marker every field exposes — it is how a form finds (and scrolls
+          // to) the first control that failed validation.
+          data-invalid={error ? true : undefined}
           className={cn(
-            'flex min-w-0 flex-1 flex-col justify-center',
-            // Direct children only — these are the two component-owned wrappers.
-            // `label` and `description` are ReactNode (rich text, inline links),
-            // so a descendant rule would repaint content the caller styled itself.
-            disabled && '[&>span]:text-ods-text-disabled',
+            'flex w-full items-center gap-[var(--spacing-system-s)] rounded-md ring-1 ring-inset',
+            // Trailing content stacks full-width below the text on mobile.
+            trailing && 'flex-wrap content-md:flex-nowrap',
+            'p-[var(--spacing-system-sf)]',
+            !description && 'min-h-[44px] content-md:min-h-[48px]',
+            description && 'min-h-[60px] content-md:min-h-[64px]',
+            'bg-ods-card ring-ods-border',
+            'cursor-pointer transition-colors duration-200',
+            // States mirror Input: hover / active move the BACKGROUND, the ring
+            // stays put. Disabled swaps to the flat `ods-bg` fill and greys the
+            // text + the box instead of fading the whole block, so a disabled block
+            // reads the same as a disabled field. The greying itself lives on the
+            // TEXT COLUMN below, not here: as a descendant rule on the label it also
+            // repainted the checked INDICATOR (Radix renders it as a `span`, and the
+            // checkmark svg inherits `currentColor`) and whatever `trailing` renders
+            // — a `Tag`'s label is a span too, and it went invisible against its own
+            // fill in the light theme.
+            !disabled && 'hover:bg-ods-bg-hover active:bg-ods-bg-active',
+            disabled && 'cursor-not-allowed bg-ods-bg',
+            error && 'ring-ods-error',
           )}
         >
-          <span
+          {/* The box switches itself: in a loading scope (or `loading`) it is its skeleton; the copy stays real. */}
+          <Checkbox
+            ref={ref}
+            id={id}
+            checked={checked}
+            defaultChecked={defaultChecked}
+            onCheckedChange={onCheckedChange}
+            disabled={disabled}
+            loading={loadingProp}
+            aria-required={required || undefined}
+            aria-invalid={error ? true : undefined}
+            boxClassName={CHECKBOX_BLOCK_BOX_CLASS}
+            indicatorClassName="h-2 w-2 content-md:h-2.5 content-md:w-2.5"
+            className={cn(
+              'border-2',
+              error ? 'border-ods-error' : 'border-[var(--color-border-strong)]',
+              'bg-ods-card',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ods-card',
+              // Disabled: the EMPTY box dims with the text instead of the whole
+              // block fading. A checked box keeps its accent fill — greying it too
+              // would bury the checkmark, and "on but locked" has to stay readable.
+              'disabled:cursor-not-allowed disabled:opacity-100',
+              'disabled:data-[state=unchecked]:border-ods-border disabled:data-[state=unchecked]:bg-ods-bg',
+              'data-[state=checked]:border-[var(--color-accent-primary)] data-[state=checked]:bg-[var(--color-accent-primary)]',
+            )}
+          />
+          <div
             className={cn(
-              '!leading-5 text-h4 content-md:!leading-6',
-              'select-none text-ods-text-primary',
-              truncateLabel ? 'block truncate' : 'break-words',
+              'flex min-w-0 flex-1 flex-col justify-center',
+              // Direct children only — these are the two component-owned wrappers.
+              // `label` and `description` are ReactNode (rich text, inline links),
+              // so a descendant rule would repaint content the caller styled itself.
+              disabled && '[&>span]:text-ods-text-disabled',
             )}
           >
-            {label}
-            {required && <RequiredMark />}
-          </span>
-          {description && (
-            <span className={cn('!leading-4 text-h6', 'select-none break-words text-ods-text-secondary')}>
-              {description}
+            <span
+              className={cn(
+                '!leading-5 text-h4 content-md:!leading-6',
+                'select-none text-ods-text-primary',
+                truncateLabel ? 'block truncate' : 'break-words',
+              )}
+            >
+              {loading && label === null ? (
+                <TextLineSkeleton type="inherit" as="span" className={CHECKBOX_BLOCK_LABEL_BAR_CLASS} />
+              ) : (
+                label
+              )}
+              {required && <RequiredMark />}
             </span>
+            {description && (
+              <span className={cn('!leading-4 text-h6', 'select-none break-words text-ods-text-secondary')}>
+                {description}
+              </span>
+            )}
+          </div>
+          {trailing && (
+            <div className="flex w-full shrink-0 items-center content-md:ml-auto content-md:w-auto">{trailing}</div>
           )}
-        </div>
-        {trailing && (
-          <div className="flex w-full shrink-0 items-center content-md:ml-auto content-md:w-auto">{trailing}</div>
+        </Label>
+        {error && (
+          <p
+            className="absolute bottom-0 left-0 right-0 translate-y-full truncate text-ods-error text-h6"
+            title={error}
+          >
+            {error}
+          </p>
         )}
-      </label>
-      {error && (
-        <p className="absolute bottom-0 left-0 right-0 translate-y-full truncate text-ods-error text-h6" title={error}>
-          {error}
-        </p>
-      )}
-    </div>
-  ),
+      </div>
+    );
+  },
 );
 CheckboxBlock.displayName = 'CheckboxBlock';
 

package/src/components/ui/checkbox-with-description.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn';
-import { CheckboxCheckmarkIcon } from '../icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon';
-import { booleanCheckedChange } from './checkbox';
+import { Checkbox } from './checkbox';
 import { Label } from './label';
 
 interface CheckboxWithDescriptionProps {
@@ -14,44 +12,52 @@ interface CheckboxWithDescriptionProps {
   title: string;
   description: string;
   disabled?: boolean;
+  /**
+   * Whether the box is checked is still being read: the title and description are drawn for real and the box is a
+   * skeleton of the box's own size. A loading scope does the same.
+   */
+  loading?: boolean;
   className?: string;
 }
 
+/** The box over the checkbox's own (`CHECKBOX_BOX_CLASS`) at this block's size. `Checkbox` reads it for the box and
+ *  for its skeleton. */
+const CHECKBOX_WITH_DESCRIPTION_BOX_CLASS = 'mt-0.5 size-5';
+
 const CheckboxWithDescription = forwardRef<HTMLDivElement, CheckboxWithDescriptionProps>(
-  ({ id, checked, onCheckedChange, title, description, disabled, className }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'flex items-start gap-3 rounded-lg border border-ods-border bg-ods-card p-4',
-        disabled && 'cursor-not-allowed opacity-50',
-        className,
-      )}
-    >
-      <CheckboxPrimitive.Root
-        id={id}
-        checked={checked}
-        onCheckedChange={booleanCheckedChange(onCheckedChange)}
-        disabled={disabled}
+  ({ id, checked, onCheckedChange, title, description, disabled, loading: loadingProp, className }, ref) => {
+    return (
+      <div
+        ref={ref}
         className={cn(
-          'peer mt-0.5 h-5 w-5 shrink-0 rounded-sm border border-ods-border bg-ods-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-ods-accent data-[state=checked]:bg-ods-accent',
+          'flex items-start gap-3 rounded-lg border border-ods-border bg-ods-card p-4',
+          disabled && 'cursor-not-allowed opacity-50',
+          className,
         )}
       >
-        <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-ods-text-on-accent')}>
-          <CheckboxCheckmarkIcon size={10} />
-        </CheckboxPrimitive.Indicator>
-      </CheckboxPrimitive.Root>
-      <div className="flex flex-col gap-1">
-        <Label
-          htmlFor={id}
-          spacing="tight"
-          className={cn('cursor-pointer leading-none', disabled && 'cursor-not-allowed')}
-        >
-          {title}
-        </Label>
-        <span className="text-ods-text-secondary text-h6">{description}</span>
+        {/* The box switches itself: in a loading scope (or `loading`) it is its skeleton; the copy stays real. */}
+        <Checkbox
+          id={id}
+          checked={checked}
+          onCheckedChange={onCheckedChange}
+          disabled={disabled}
+          loading={loadingProp}
+          boxClassName={CHECKBOX_WITH_DESCRIPTION_BOX_CLASS}
+          className="bg-ods-bg"
+        />
+        <div className="flex flex-col gap-1">
+          <Label
+            htmlFor={id}
+            spacing="tight"
+            className={cn('cursor-pointer leading-none', disabled && 'cursor-not-allowed')}
+          >
+            {title}
+          </Label>
+          <span className="text-ods-text-secondary text-h6">{description}</span>
+        </div>
       </div>
-    </div>
-  ),
+    );
+  },
 );
 CheckboxWithDescription.displayName = 'CheckboxWithDescription';
 

package/src/components/ui/checkbox.tsx

@@ -6,6 +6,8 @@ import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'reac
 import { CONTROL_SIZE } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
 import { CheckboxCheckmarkIcon } from '../icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 type CheckboxPrimitiveProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
 
@@ -22,28 +24,44 @@ export function booleanCheckedChange(
 
 export interface CheckboxProps extends Omit<CheckboxPrimitiveProps, 'onCheckedChange'> {
   onCheckedChange?: (checked: boolean) => void;
+  /** The box's size, corners and placement over `CHECKBOX_BOX_CLASS`: read by the box and by its skeleton, so a host
+   *  that sizes the box (`CheckboxBlock`, `CheckboxWithDescription`) gets its skeleton at the same size. */
+  boxClassName?: string;
+  /** The checkmark's classes (its size when the box is sized). */
+  indicatorClassName?: string;
+  /**
+   * Whether the box is checked is still being read: the box is a skeleton of its own size (`boxClassName`). A loading
+   * scope does the same.
+   */
+  loading?: boolean;
 }
 
 /** The checkbox's box (its size and corners): read by the checkbox and by every skeleton that stands for one. */
 export const CHECKBOX_BOX_CLASS = `${CONTROL_SIZE.checkbox} shrink-0 rounded-sm`;
 
 const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
-  ({ className, onCheckedChange, ...props }, ref) => (
-    <CheckboxPrimitive.Root
-      ref={ref}
-      onCheckedChange={booleanCheckedChange(onCheckedChange)}
-      className={cn(
-        CHECKBOX_BOX_CLASS,
-        'peer border border-ods-border bg-ods-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-ods-accent data-[state=checked]:bg-ods-accent',
-        className,
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-ods-text-on-accent')}>
-        <CheckboxCheckmarkIcon size={10} />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  ),
+  ({ className, boxClassName, indicatorClassName, onCheckedChange, loading: loadingProp, ...props }, ref) => {
+    // ONE switch: in a page's loading state (or while the host reads it) the box is a skeleton of its own size.
+    const loading = useLoadingScope() || !!loadingProp;
+    if (loading) return <UnifiedSkeleton className={cn(CHECKBOX_BOX_CLASS, boxClassName)} />;
+    return (
+      <CheckboxPrimitive.Root
+        ref={ref}
+        onCheckedChange={booleanCheckedChange(onCheckedChange)}
+        className={cn(
+          CHECKBOX_BOX_CLASS,
+          boxClassName,
+          'peer border border-ods-border bg-ods-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-ods-accent data-[state=checked]:bg-ods-accent',
+          className,
+        )}
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-ods-text-on-accent')}>
+          <CheckboxCheckmarkIcon size={10} className={indicatorClassName} />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+    );
+  },
 );
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 

package/src/components/ui/chevron-button.tsx

@@ -1,42 +1,35 @@
 'use client';
 
-import { ChevronUp, ChevronDown } from 'lucide-react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import { type ButtonHTMLAttributes, forwardRef } from 'react';
-import { cn } from '../../utils/cn';
+import { Button } from './button';
 
 interface ChevronButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   direction?: 'up' | 'down';
+  /** `sm` and `md` are the 32px icon button, `lg` the 44/48px one. */
   size?: 'sm' | 'md' | 'lg';
   isExpanded?: boolean;
-  backgroundColor?: string;
-  borderColor?: string;
 }
 
+/** An expand / collapse toggle: a quiet icon button whose chevron points the way the section will move. */
 const ChevronButton = forwardRef<HTMLButtonElement, ChevronButtonProps>(
-  ({ className, direction = 'down', size = 'md', isExpanded, backgroundColor, borderColor, ...props }, ref) => {
-    const Icon = (isExpanded ? ChevronUp : ChevronDown) || (direction === 'up' ? ChevronUp : ChevronDown);
-    const sizeClasses = {
-      sm: 'h-4 w-4',
-      md: 'h-5 w-5',
-      lg: 'h-6 w-6',
-    };
+  ({ className, direction = 'down', size = 'md', isExpanded, ...props }, ref) => {
+    const pointsUp = isExpanded ?? direction === 'up';
+    const Icon = pointsUp ? ChevronUp : ChevronDown;
 
     return (
-      <button
-        className={cn(
-          'inline-flex items-center justify-center rounded-md ring-offset-background transition-colors text-h6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-          'h-10 px-4 py-2',
-          className,
-        )}
-        style={{
-          backgroundColor: backgroundColor,
-          borderColor: borderColor,
-        }}
+      <Button
         ref={ref}
+        type="button"
+        variant="transparent"
+        size={size === 'lg' ? 'icon' : 'icon-sm'}
+        aria-expanded={isExpanded}
+        aria-label={isExpanded ? 'Collapse' : 'Expand'}
+        className={className}
         {...props}
       >
-        <Icon className={sizeClasses[size]} />
-      </button>
+        <Icon />
+      </Button>
     );
   },
 );

package/src/components/ui/color-preset-select.tsx

@@ -10,6 +10,7 @@ import { ActionsMenuDropdown, type ActionsMenuGroup } from './actions-menu';
 import { ColorSwatch } from './color-swatch';
 import { Input } from './input';
 import { InputTrigger } from './input-trigger';
+import { LoadingWhen, useLoadingScope } from './loading-scope';
 
 export interface ColorPreset {
   key: string;
@@ -246,9 +247,20 @@ export interface ColorPickerInputProps {
   onChange: (color: string) => void;
   disabled?: boolean;
   className?: string;
+  /** The color is still being read: the field draws its box with a bar for the value and cannot open. A loading
+   *  scope does the same. */
+  loading?: boolean;
 }
 
-export function ColorPickerInput({ value, onChange, disabled, className }: ColorPickerInputProps) {
+export function ColorPickerInput({
+  value,
+  onChange,
+  disabled,
+  className,
+  loading: loadingProp,
+}: ColorPickerInputProps) {
+  // ONE switch: in a page's loading state (or while the host reads the color) the field is its loading form.
+  const loading = useLoadingScope() || !!loadingProp;
   const [open, setOpen] = useState(false);
   const [format, setFormat] = useState<ColorFormat>('HEX');
 
@@ -262,18 +274,29 @@ export function ColorPickerInput({ value, onChange, disabled, className }: Color
     },
   ];
 
+  const trigger = (
+    <InputTrigger
+      disabled={disabled}
+      aria-label="Pick custom color"
+      startIcon={<ColorSwatch color={value} />}
+      selectedLabel={<span className="uppercase">{value}</span>}
+      endIcon={<TriggerChevron />}
+      className={cn('group', className)}
+    />
+  );
+
+  if (loading) {
+    // The field's own box, inert: its swatch and its value draw their loading forms in the scope.
+    return (
+      <span inert aria-hidden className="contents">
+        <LoadingWhen loading>{trigger}</LoadingWhen>
+      </span>
+    );
+  }
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <InputTrigger
-          disabled={disabled}
-          aria-label="Pick custom color"
-          startIcon={<ColorSwatch color={value} />}
-          selectedLabel={<span className="uppercase">{value}</span>}
-          endIcon={<TriggerChevron />}
-          className={cn('group', className)}
-        />
-      </PopoverTrigger>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
       <PopoverContent
         align="start"
         sideOffset={4}

package/src/components/ui/color-swatch.tsx

@@ -1,17 +1,18 @@
 import { cn } from '../../utils/cn';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 export interface ColorSwatchProps {
   color: string;
   className?: string;
 }
 
-/** Square color preview shared across color and status selectors. */
+/** The swatch's box, read by the swatch and its loading form. */
+const SWATCH_CLASS = 'inline-block size-4 shrink-0 rounded-sm';
+
+/** Square color preview shared across color and status selectors. In a loading scope the color is read data not here
+ *  yet: the swatch draws its box as a skeleton. */
 export function ColorSwatch({ color, className }: ColorSwatchProps) {
-  return (
-    <span
-      aria-hidden
-      className={cn('inline-block size-4 shrink-0 rounded-sm', className)}
-      style={{ backgroundColor: color }}
-    />
-  );
+  if (useLoadingScope()) return <UnifiedSkeleton aria-hidden className={cn(SWATCH_CLASS, className)} />;
+  return <span aria-hidden className={cn(SWATCH_CLASS, className)} style={{ backgroundColor: color }} />;
 }