@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

package/src/components/tickets/ticket-row.tsx

@@ -23,11 +23,18 @@ import { formatRelativeTime } from '../../utils/date-utils';
 import { scrollElementIntoView } from '../../utils/scroll-into-view';
 import { ChatTicketItem, type ChatTicketItemData } from '../chat/entity-cards/chat-ticket-item';
 import { Collapsible, CollapsibleContent } from '../collapsible';
+import { loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import { TicketDetailDrawer, type TicketDetailDrawerProps } from './ticket-detail-drawer';
 import type { AnyTicket } from './types';
 import { isOptimistic } from './types';
 
-export interface TicketRowProps {
+/** The row's frame (its bottom rule), read by the loaded row and its loading form. */
+const TICKET_ROW_FRAME_CLASS = 'border-b border-ods-border last:border-b-0';
+/** The row's outer element: the deep-link target, offset under a sticky header. */
+const TICKET_ROW_OUTER_CLASS = 'scroll-mt-24';
+
+/** A read ticket's row. */
+export interface TicketRowLoadedProps {
   ticket: AnyTicket;
   expanded: boolean;
   onToggle: (ticketId: string) => void;
@@ -44,9 +51,38 @@ export interface TicketRowProps {
    *  resolves it. `scroll-mt-24` is already baked into the outer
    *  element regardless. */
   id?: string;
+  loading?: false;
+}
+
+/** A row while its ticket is read: the same frame with the summary tile's loading form, and no drawer. */
+export interface TicketRowLoadingProps {
+  loading: true;
+  id?: string;
+}
+
+/** A ticket row, or (`loading`) its loading form. List markers (`data-loading-item`) are forwarded in both forms. */
+export type TicketRowProps = (TicketRowLoadedProps | TicketRowLoadingProps) & {
+  [key: `data-${string}`]: unknown;
+};
+
+/**
+ * A ticket row. ONE switch (`useLoadingScope() || loading`): while the ticket is read the row draws the same frame
+ * with `ChatTicketItem loading` (its own loading form), else the summary tile and its drawer.
+ */
+export function TicketRow(props: TicketRowProps) {
+  if (useLoadingScope() || props.loading) {
+    return (
+      <div id={props.id} className={TICKET_ROW_OUTER_CLASS} {...loadingItemProps(props)}>
+        <div className={TICKET_ROW_FRAME_CLASS}>
+          <ChatTicketItem loading />
+        </div>
+      </div>
+    );
+  }
+  return <TicketRowLoaded {...props} />;
 }
 
-export function TicketRow({
+function TicketRowLoaded({
   ticket,
   expanded,
   onToggle,
@@ -57,7 +93,8 @@ export function TicketRow({
   onReopen,
   onActionCollapsed,
   id,
-}: TicketRowProps) {
+  ...markers
+}: TicketRowLoadedProps & { [key: `data-${string}`]: unknown }) {
   // Optimistic placeholders have no drawer — the real id hasn't
   // arrived yet, so action targets would be undefined.
   const optimistic = isOptimistic(ticket);
@@ -116,8 +153,8 @@ export function TicketRow({
   };
 
   return (
-    <div ref={rowRef} id={id} className="scroll-mt-24">
-      <Collapsible open={expanded && !optimistic} className="border-b border-ods-border last:border-b-0">
+    <div ref={rowRef} id={id} className={TICKET_ROW_OUTER_CLASS} {...loadingItemProps(markers)}>
+      <Collapsible open={expanded && !optimistic} className={TICKET_ROW_FRAME_CLASS}>
         <ChatTicketItem
           ticket={tileData}
           onClick={optimistic ? undefined : handleClick}

package/src/components/ui/actions-menu.tsx

@@ -10,6 +10,7 @@ import { Chevron02RightIcon, Ellipsis01Icon } from '../icons-v2-generated';
 import { ActionsMenuHeaderContext } from './actions-menu-header-context';
 import { Button } from './button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from './dropdown-menu';
+import { InertWhileLoading, useLoadingScope } from './loading-scope';
 import { useReportOverlayOpen } from './overlay-open-registry';
 import { COLLISION_PADDING_PX, useCollisionBoundary, usePortalContainer } from './portal-container';
 
@@ -84,9 +85,8 @@ const ROW_CLASSES =
   'flex flex-1 min-w-0 items-center gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-s)] cursor-pointer transition-colors bg-ods-bg outline-none';
 const WRAPPER_CLASSES = 'relative flex items-stretch border-b border-ods-border last:border-b-0';
 
-const SECONDARY_ACTION_CLASSES =
-  'flex p-[var(--spacing-system-s)] shrink-0 items-center justify-center self-stretch border-l border-ods-border transition-colors hover:bg-ods-bg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus [&_svg]:w-4 [&_svg]:h-4 md:[&_svg]:w-6 md:[&_svg]:h-6';
-
+// The row's trailing icon action: a cell of the row (its full height, an icon, secondary until hovered), after a
+// hairline divider. One Button for both forms, a link and an action.
 const SecondaryAction: React.FC<{ action: ActionsMenuItemIconAction }> = ({ action }) => {
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
@@ -100,40 +100,26 @@ const SecondaryAction: React.FC<{ action: ActionsMenuItemIconAction }> = ({ acti
     [action],
   );
 
-  const classes = cn(
-    SECONDARY_ACTION_CLASSES,
-    action.openInNewTab && 'max-md:hidden',
-    action.disabled && 'pointer-events-none cursor-not-allowed opacity-60',
-  );
-
-  if (action.href) {
-    return (
-      <Link
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        className={cn('w-px shrink-0 self-stretch bg-ods-border', action.openInNewTab && 'max-md:hidden')}
+      />
+      <Button
+        variant="cell"
+        type="button"
         href={action.href}
-        prefetch={false}
-        target={action.openInNewTab ? '_blank' : undefined}
-        rel={action.openInNewTab ? 'noopener noreferrer' : undefined}
+        prefetch={action.href ? false : undefined}
+        openInNewTab={action.openInNewTab}
         aria-label={action['aria-label']}
-        aria-disabled={action.disabled || undefined}
-        tabIndex={action.disabled ? -1 : undefined}
-        className={classes}
+        disabled={action.disabled}
+        className={cn('h-auto self-stretch', action.openInNewTab && 'max-md:hidden')}
         onClick={handleClick}
       >
         {action.icon}
-      </Link>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      aria-label={action['aria-label']}
-      disabled={action.disabled}
-      className={classes}
-      onClick={handleClick}
-    >
-      {action.icon}
-    </button>
+      </Button>
+    </>
   );
 };
 
@@ -351,6 +337,9 @@ export interface ActionsMenuDropdownProps extends ActionsMenuProps {
   /** Forwarded to the dropdown content — e.g. `e.preventDefault()` to stop
    *  Radix returning focus (and its focus ring) to the trigger on close. */
   onCloseAutoFocus?: (event: Event) => void;
+  /** The menu's subject is still being read: the trigger (default or custom) is drawn for real and inert, and the menu
+   *  cannot open. A loading scope does the same. */
+  loading?: boolean;
 }
 
 export const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps> = ({
@@ -369,7 +358,10 @@ export const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps> = ({
   open: openProp,
   onOpenChange,
   onCloseAutoFocus,
+  loading: loadingProp = false,
 }) => {
+  // ONE switch: in a page's loading state (or while the host reads the menu's subject) the menu is its trigger's box.
+  const loading = useLoadingScope() || loadingProp;
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: false,
@@ -427,21 +419,30 @@ export const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps> = ({
     [onItemClick, setOpen],
   );
 
+  // The trigger is a static control: drawn for real in both forms, inert while the menu's subject loads.
+  const triggerNode = customTrigger ?? (
+    <Button
+      variant="outline"
+      size="icon"
+      aria-label={triggerAriaLabel}
+      className={
+        triggerClassName ||
+        'flex items-center justify-center border-ods-border bg-ods-card hover:bg-ods-bg-hover focus-visible:ring-0'
+      }
+      leftIcon={trigger ?? <Ellipsis01Icon size={24} className="text-ods-text-primary" />}
+    />
+  );
+
+  if (loading) {
+    // A custom trigger is the host's control (it switches itself in the scope, e.g. a field trigger). Either trigger is
+    // drawn as it is, inert: it cannot open while the subject is read.
+    return <InertWhileLoading>{triggerNode}</InertWhileLoading>;
+  }
+
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
       <DropdownMenuTrigger asChild ref={triggerRef}>
-        {customTrigger ?? (
-          <Button
-            variant="outline"
-            size="icon"
-            aria-label={triggerAriaLabel}
-            className={
-              triggerClassName ||
-              'flex items-center justify-center border-ods-border bg-ods-card hover:bg-ods-bg-hover focus-visible:ring-0'
-            }
-            leftIcon={trigger ?? <Ellipsis01Icon size={24} className="text-ods-text-primary" />}
-          />
-        )}
+        {triggerNode}
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align={align}

package/src/components/ui/allowed-domains-input.tsx

@@ -115,18 +115,18 @@ const AllowedDomainsInput = forwardRef<HTMLDivElement, AllowedDomainsInputProps>
         </div>
 
         {/* Add Domain button */}
-        <button
+        <Button
+          variant="link"
+          size="compact"
+          noPaddingX
           type="button"
-          className={cn(
-            'flex items-center gap-2 py-2 text-ods-text-primary transition-colors hover:text-ods-accent',
-            disabled && 'cursor-not-allowed opacity-50',
-          )}
+          data-tone="primary"
           onClick={addDomain}
           disabled={disabled}
+          leftIcon={<PlusCircle />}
         >
-          <PlusCircle className="h-5 w-5 text-ods-text-secondary" />
-          <span className="font-bold text-h6">Add Domain</span>
-        </button>
+          Add Domain
+        </Button>
 
         {/* Error message */}
         {displayError && <p className="text-ods-error text-h6">{displayError}</p>}

package/src/components/ui/assignee-dropdown.tsx

@@ -4,6 +4,7 @@ import { type MouseEvent, useCallback, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { PenEditIcon, UserIcon, UserPlusIcon } from '../icons-v2-generated';
 import { Autocomplete, type AutocompleteOption } from './autocomplete';
+import { Button } from './button';
 import { DeletedUserAvatar } from './deleted-user-avatar';
 import { SearchableSelect, type SearchableSelectOption } from './searchable-select';
 import { SquareAvatar } from './square-avatar';
@@ -90,14 +91,12 @@ function CompactAssigneeDropdown({
     : undefined;
 
   const trigger = hasAssignee ? (
-    <button
+    <Button
+      variant="card"
       type="button"
       onClick={handleTriggerClick}
       aria-label="Change assignee"
-      className={cn(
-        'shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
-        className,
-      )}
+      className={cn('w-auto shrink-0', className)}
     >
       {currentAssignee.deleted ? (
         <DeletedUserAvatar size="sm" accessibleLabel={`Deleted user: ${currentAssignee.name || currentAssignee.id}`} />
@@ -110,21 +109,18 @@ function CompactAssigneeDropdown({
           variant="round"
         />
       )}
-    </button>
+    </Button>
   ) : (
-    <button
+    <Button
+      variant="transparent"
+      size="icon-sm"
       type="button"
       onClick={handleTriggerClick}
       aria-label="Assign user"
-      className={cn(
-        'flex size-8 shrink-0 items-center justify-center rounded-full border border-ods-border',
-        'text-ods-text-secondary transition-colors hover:border-ods-accent hover:text-ods-accent',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
-        className,
-      )}
+      className={cn('shrink-0', className)}
     >
-      <UserPlusIcon className="size-4" />
-    </button>
+      <UserPlusIcon />
+    </Button>
   );
 
   // Intercepted trigger: render the plain button — no dropdown to open.
@@ -231,12 +227,15 @@ function DefaultAssigneeDropdown({ currentAssignee, options, isLoading, onAssign
         <div className="min-w-0 flex-1 overflow-hidden">
           <div className="flex flex-col justify-center">
             <div className="flex w-full min-w-0 items-center gap-[var(--spacing-system-xxs)]">
-              <button
+              <Button
+                variant="link"
+                size="compact"
+                noPaddingX
                 type="button"
                 onClick={() => setIsEditing(true)}
-                className="group flex cursor-pointer items-center gap-[var(--spacing-system-xxs)] text-left"
+                className="min-w-0"
               >
-                <PenEditIcon className="size-4 shrink-0 text-ods-text-secondary transition-colors group-hover:text-ods-accent" />
+                <PenEditIcon />
                 <span
                   className={cn(
                     'truncate text-h4',
@@ -246,7 +245,7 @@ function DefaultAssigneeDropdown({ currentAssignee, options, isLoading, onAssign
                 >
                   {currentAssignee.name}
                 </span>
-              </button>
+              </Button>
             </div>
             <span className="truncate text-ods-text-secondary text-h6">Assigned</span>
           </div>
@@ -257,14 +256,17 @@ function DefaultAssigneeDropdown({ currentAssignee, options, isLoading, onAssign
 
   return (
     <div className={cn('min-w-0', className)}>
-      <button
+      <Button
+        variant="link"
+        size="compact"
+        noPaddingX
         type="button"
         onClick={() => setIsEditing(true)}
-        className="flex cursor-pointer items-center gap-[var(--spacing-system-xxs)] truncate text-left text-ods-accent underline transition-opacity text-h4 hover:opacity-80"
+        className="max-w-full"
+        leftIcon={<UserIcon />}
       >
-        <UserIcon className="size-4 shrink-0" />
-        <span>Assign User</span>
-      </button>
+        Assign User
+      </Button>
       <span className="block truncate text-ods-text-secondary text-h6">Assigned</span>
     </div>
   );

package/src/components/ui/autocomplete.tsx

@@ -26,9 +26,10 @@ import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
 import { LoadingRegion } from '../loading/loading-region';
 import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { Button } from './button';
 import { FieldWrapper } from './field-wrapper';
 import { HiddenTagsPopup } from './hidden-tags-popup';
-import { useLoadingScope } from './loading-scope';
+import { LoadingItems, useLoadingScope } from './loading-scope';
 import { Tag } from './tag';
 import { TruncateText } from './truncate-text';
 
@@ -184,7 +185,7 @@ const AUTOCOMPLETE_OPTION_ROW_CLASS =
 const AUTOCOMPLETE_LOADING_ROWS = 5;
 const AUTOCOMPLETE_ANCHOR_SHAPE_CLASS = 'rounded-[6px]';
 
-export interface AutocompleteSkeletonProps {
+interface AutocompleteSkeletonProps {
   /** The field's label: the page's own words, drawn as they are. */
   label?: string;
   labelVariant?: 'default' | 'large';
@@ -192,7 +193,7 @@ export interface AutocompleteSkeletonProps {
 }
 
 /** A field while its options are read: its label for real, its control a box of the control's height. */
-export function AutocompleteSkeleton({ label, labelVariant, className }: AutocompleteSkeletonProps) {
+function AutocompleteSkeleton({ label, labelVariant, className }: AutocompleteSkeletonProps) {
   return (
     <FieldWrapper label={label} labelVariant={labelVariant} className={className}>
       <UnifiedSkeleton className={cn('w-full', AUTOCOMPLETE_ANCHOR_SHAPE_CLASS, AUTOCOMPLETE_ANCHOR_HEIGHT_CLASS)} />
@@ -590,9 +591,11 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
             {/* Overflow indicator button (multiple mode only) */}
             {multiple && hiddenTagsCount > 0 && (
               <div ref={hiddenTagsRef} className="shrink-0">
-                <button
+                <Button
+                  variant="chip"
                   ref={badgeRef}
                   type="button"
+                  aria-expanded={showHiddenTags}
                   onClick={e => {
                     e.stopPropagation();
                     setShowHiddenTags(prev => {
@@ -600,15 +603,9 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
                       return !prev;
                     });
                   }}
-                  className={cn(
-                    'flex h-8 items-center px-2',
-                    'rounded-[6px] border border-ods-border bg-ods-card',
-                    'text-ods-text-secondary text-h5',
-                    'cursor-pointer transition-colors hover:bg-ods-bg-hover',
-                  )}
                 >
                   {getLimitTagsText(hiddenTagsCount)}
-                </button>
+                </Button>
               </div>
             )}
 
@@ -631,14 +628,15 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
           {/* Clear / Chevron — pinned right */}
           <div className="flex shrink-0 items-center gap-1 pr-3">
             {showClearAll && (hasValue || inputValue.length > 0) && !disabled && isOpen && (
-              <button
+              <Button
+                variant="transparent"
+                size="icon-sm"
                 type="button"
                 onClick={handleClearAll}
-                className="flex items-center justify-center transition-opacity hover:opacity-70"
                 aria-label="Clear all"
               >
-                <XmarkCircleIcon className="size-4 text-ods-text-secondary md:size-6" />
-              </button>
+                <XmarkCircleIcon className="text-ods-text-secondary" />
+              </Button>
             )}
             {loading ? (
               <Loader2
@@ -699,12 +697,13 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
                 // The options while they are read: the list's own rows, a label bar each (`loadingText` is what a
                 // screen reader hears).
                 <LoadingRegion label={loadingText}>
-                  {Array.from({ length: loadingRows }, (_, i) => (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-                    <div key={i} className={AUTOCOMPLETE_OPTION_ROW_CLASS} aria-hidden>
-                      <TextLineSkeleton type="inherit" className="w-2/3" />
-                    </div>
-                  ))}
+                  <LoadingItems count={loadingRows}>
+                    {() => (
+                      <div className={AUTOCOMPLETE_OPTION_ROW_CLASS} aria-hidden data-loading-item>
+                        <TextLineSkeleton type="inherit" className="w-2/3" />
+                      </div>
+                    )}
+                  </LoadingItems>
                 </LoadingRegion>
               ) : filteredOptions.length === 0 ? (
                 showCreateOption ? (
@@ -744,6 +743,7 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
                   return (
                     <div
                       key={String(option.value)}
+                      data-loading-item
                       role="option"
                       aria-selected={isSelected}
                       className={cn(
@@ -783,7 +783,9 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
                           <div className="flex shrink-0 items-center gap-[var(--spacing-system-xsf)]">
                             {isSelected && <CheckIcon className="text-ods-accent" size={20} />}
                             {onDeleteOption && !isSelected && (
-                              <button
+                              <Button
+                                variant="transparent"
+                                size="icon-sm"
                                 type="button"
                                 aria-label={`Delete ${option.label}`}
                                 onClick={e => {
@@ -791,10 +793,9 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
                                   onDeleteOption(option.value);
                                 }}
                                 disabled={isDeletingOption}
-                                className="opacity-0 transition-opacity focus-visible:opacity-100 disabled:pointer-events-none disabled:opacity-50 group-hover/item:opacity-100"
                               >
-                                <TrashIcon className="size-4 text-ods-error" />
-                              </button>
+                                <TrashIcon className="text-ods-error" />
+                              </Button>
                             )}
                           </div>
                         </div>

package/src/components/ui/avatar-stack.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from '../../utils/cn';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
-import { useLoadingScope } from './loading-scope';
+import { LoadingItems, useLoadingScope } from './loading-scope';
 import { SquareAvatar } from './square-avatar';
 
 /**
@@ -51,6 +51,9 @@ export interface AvatarStackProps {
    *  Default "Assignees". */
   label?: string;
   className?: string;
+  /** The people are still being read: the stack draws its skeleton, `slots ?? max` faces of its size. A loading scope
+   *  does the same. */
+  loading?: boolean;
 }
 
 /** Face diameter and how far each later face tucks under the previous one — the
@@ -72,9 +75,12 @@ const overlapClass = (size: AvatarStackSize) => (size === 'xs' ? '-ml-2' : '-ml-
 const slotsWidthStyle = (size: AvatarStackSize, slots?: number) =>
   slots ? { width: SIZE_PX[size] + (slots - 1) * (SIZE_PX[size] - OVERLAP_PX[size]) } : undefined;
 
+/** Faces a stack shows when the host states no `max`, and so the faces it draws while its people are read. */
+const AVATAR_STACK_MAX_FACES = 3;
+
 /** A stack while its people are read: `count` overlapped circles of the faces' size. */
-export function AvatarStackSkeleton({
-  count = 3,
+function AvatarStackSkeleton({
+  count = AVATAR_STACK_MAX_FACES,
   size = 'md',
   slots,
   className,
@@ -90,31 +96,33 @@ export function AvatarStackSkeleton({
       className={cn(STACK_ROW_CLASS, slots && 'shrink-0', className)}
       style={slotsWidthStyle(size, slots)}
     >
-      {Array.from({ length: count }, (_, i) => (
-        <UnifiedSkeleton
-          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton faces never reorder
-          key={i}
-          variant="circular"
-          className={cn('relative shrink-0 ring-2 ring-ods-card', i > 0 && overlapClass(size))}
-          width={SIZE_PX[size]}
-          height={SIZE_PX[size]}
-        />
-      ))}
+      <LoadingItems count={count}>
+        {i => (
+          <UnifiedSkeleton
+            data-loading-item
+            variant="circular"
+            className={cn('relative shrink-0 ring-2 ring-ods-card', i > 0 && overlapClass(size))}
+            width={SIZE_PX[size]}
+            height={SIZE_PX[size]}
+          />
+        )}
+      </LoadingItems>
     </div>
   );
 }
 
 export function AvatarStack({
   people,
-  max = 3,
+  max = AVATAR_STACK_MAX_FACES,
   slots,
   total,
   size = 'md',
   ringClassName = 'ring-ods-card',
   label = 'Assignees',
   className,
+  loading: loadingProp,
 }: AvatarStackProps) {
-  const loading = useLoadingScope();
+  const loading = useLoadingScope() || !!loadingProp;
   if (loading) return <AvatarStackSkeleton count={slots ?? max} size={size} slots={slots} className={className} />;
   if (people.length === 0) return null;
   const groupSize = Math.max(total ?? people.length, people.length);
@@ -136,6 +144,7 @@ export function AvatarStack({
       {visible.map((person, i) => (
         <SquareAvatar
           key={person.key ?? `${person.name}-${i}`}
+          data-loading-item
           variant="round"
           size={size}
           src={person.avatarUrl ?? undefined}

package/src/components/ui/badge.tsx

@@ -5,6 +5,7 @@ import type { HTMLAttributes } from 'react';
 
 import { cn } from '../../utils/cn';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 const badgeVariants = cva(
   // Weight from the ODS token. Scale stays at 12px rather than the `text-h6`
@@ -27,9 +28,14 @@ const badgeVariants = cva(
   },
 );
 
-export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+  /** The badge's text is still being read: it draws its loading form (also inside a loading scope). */
+  loading?: boolean;
+}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
+/** A badge; while its text is read (`loading`, or a loading scope) its own loading form, the badge's box. */
+function Badge({ className, variant, loading, ...props }: BadgeProps) {
+  if (useLoadingScope() || loading) return <BadgeSkeleton className={className} />;
   return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
@@ -47,4 +53,4 @@ function BadgeSkeleton({ className }: { className?: string }) {
   );
 }
 
-export { Badge, BadgeSkeleton, badgeVariants };
+export { Badge, badgeVariants };

package/src/components/ui/breadcrumb.tsx

@@ -5,6 +5,8 @@ import { ChevronRight, MoreHorizontal } from 'lucide-react';
 import { type ComponentProps, type ComponentPropsWithoutRef, type ReactNode, forwardRef } from 'react';
 
 import { cn } from '../../utils/cn';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 const Breadcrumb = forwardRef<
   HTMLElement,
@@ -35,8 +37,13 @@ const BreadcrumbLink = forwardRef<
   HTMLAnchorElement,
   ComponentPropsWithoutRef<'a'> & {
     asChild?: boolean;
+    /** The link's label is still being read: a bar the height of its line (also inside a loading scope). */
+    loading?: boolean;
   }
->(({ asChild, className, ...props }, ref) => {
+>(({ asChild, className, loading, ...props }, ref) => {
+  const inScope = useLoadingScope();
+  // ONE switch: while its label is read the link is a bar the height of its line (`text-h6`).
+  if (inScope || loading) return <UnifiedSkeleton as="span" className={cn('inline-block h-5 w-16', className)} />;
   const Comp = asChild ? Slot : 'a';
 
   return <Comp ref={ref} className={cn('transition-colors hover:text-ods-text-primary', className)} {...props} />;