@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.749

package/src/components/loading/settings-form-skeleton.tsx

@@ -0,0 +1,52 @@
+import { cn } from '../../utils/cn';
+import { LoadingRegion } from './loading-region';
+import { InteractiveSkeleton, TextSkeleton, UnifiedSkeleton } from './unified-skeleton';
+
+export interface SettingsFormSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+  /**
+   * How many fields each card holds, one entry per card, so the skeleton has the
+   * real shape of the screen behind it rather than a generic block.
+   */
+  cards?: number[];
+  className?: string;
+}
+
+/**
+ * A settings FORM while it loads: cards of labelled controls (a title and a
+ * line, then label, help line and control per field), and the save row under
+ * them.
+ */
+export function SettingsFormSkeleton({ region = true, cards = [2, 3, 2, 2], className }: SettingsFormSkeletonProps) {
+  return (
+    <LoadingRegion
+      label="Loading settings"
+      announce={region}
+      className={cn('space-y-[var(--spacing-system-lf)]', className)}
+    >
+      {cards.map((fields, cardIndex) => (
+        <div
+          key={`settings-card-${cardIndex}`}
+          className="space-y-[var(--spacing-system-lf)] rounded-lg border border-ods-border bg-ods-card p-[var(--spacing-system-lf)]"
+        >
+          <div>
+            <TextSkeleton.Subheading className="mb-[var(--spacing-system-xsf)] w-32" />
+            <TextSkeleton.Caption className="w-full max-w-md" />
+          </div>
+          {Array.from({ length: fields }, (_, fieldIndex) => (
+            <div key={`settings-field-${cardIndex}-${fieldIndex}`} className="space-y-[var(--spacing-system-xsf)]">
+              <TextSkeleton.Caption className="w-40" />
+              <TextSkeleton.Caption className="w-full max-w-lg" />
+              <UnifiedSkeleton className="h-10 w-full rounded-md" />
+            </div>
+          ))}
+        </div>
+      ))}
+      <div className="flex items-center gap-[var(--spacing-system-mf)]">
+        <InteractiveSkeleton.Button className="w-32" />
+        <TextSkeleton.Caption className="w-64" />
+      </div>
+    </LoadingRegion>
+  );
+}

package/src/components/loading/unified-skeleton.tsx

@@ -1,5 +1,6 @@
 import type React from 'react';
 import { cn } from '../../utils/cn';
+import { SKELETON_SURFACE_CLASS } from '../ui/skeleton-surface';
 
 interface UnifiedSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
@@ -11,9 +12,15 @@ interface UnifiedSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   animate?: boolean;
   /**
-   * Accessibility label for screen readers
+   * Names what is loading for screen readers. Only a bar that stands alone sets it: it then becomes a
+   * `role="status"`. Without it the bar is `aria-hidden`, and its `LoadingRegion` announces the loading once.
    */
   'aria-label'?: string;
+  /**
+   * The element drawn. `span` keeps the placeholder valid phrasing content where
+   * a `div` may not stand (inside a `p`, a heading, a label or an inline card).
+   */
+  as?: 'div' | 'span';
 }
 
 /**
@@ -25,13 +32,14 @@ interface UnifiedSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  * - Color: #2A2A2A base with #3A3A3A pulse highlight
  * - Animation: 1.5s pulse duration, ease-in-out timing
  * - Responsive: Mobile-first approach with proper scaling
- * - Accessibility: ARIA labels and reduced motion support
+ * - Accessibility: hidden from assistive technology (the `LoadingRegion` around it announces), reduced motion support
  *
  * @param variant - Shape variant: default (rounded), text (rounded-sm), circular, rectangular
  * @param width - Custom width (defaults to full width)
  * @param height - Custom height (defaults to auto based on variant)
  * @param animate - Enable/disable animation (respects prefers-reduced-motion)
- * @param aria-label - Accessibility label for screen readers
+ * @param aria-label - Makes this one bar a `role="status"` with that name; otherwise it is `aria-hidden`
+ * @param as - The element drawn: `div` (default) or `span` for phrasing content
  */
 export function UnifiedSkeleton({
   className,
@@ -40,10 +48,9 @@ export function UnifiedSkeleton({
   height,
   animate = true,
   'aria-label': ariaLabel,
+  as: Tag = 'div',
   ...props
 }: UnifiedSkeletonProps) {
-  const baseClasses = 'bg-ods-skeleton';
-
   const variantClasses = {
     default: 'rounded-md',
     text: 'rounded-sm',
@@ -58,8 +65,6 @@ export function UnifiedSkeleton({
     rectangular: 'h-4',
   };
 
-  const animationClasses = animate ? 'animate-pulse motion-reduce:animate-none' : '';
-
   // An `aspect-*` utility sizes the box itself; a default height would win
   // over it (explicit height beats aspect-ratio) and collapse the box to 16px.
   const sizedByAspect = /(?:^|\s)aspect-/.test(className ?? '');
@@ -70,18 +75,18 @@ export function UnifiedSkeleton({
   };
 
   return (
-    <div
+    <Tag
       className={cn(
-        baseClasses,
+        animate ? SKELETON_SURFACE_CLASS : 'bg-ods-skeleton',
         variantClasses[variant],
         !height && !style.height && !sizedByAspect && defaultHeights[variant],
         !width && !style.width && variant !== 'circular' && 'w-full',
-        animationClasses,
         className,
       )}
       style={style}
-      role="status"
-      aria-label={ariaLabel || 'Loading content'}
+      // A bar is decoration: hidden from assistive technology unless the caller names what is loading.
+      // The loading CONTAINER says it once (`LoadingRegion`: aria-busy plus one polite status).
+      {...(ariaLabel ? { role: 'status', 'aria-label': ariaLabel } : { 'aria-hidden': true })}
       {...props}
     />
   );
@@ -95,48 +100,28 @@ export const TextSkeleton = {
    * Large heading skeleton (h1, h2)
    */
   Heading: ({ className, ...props }: Omit<UnifiedSkeletonProps, 'variant'>) => (
-    <UnifiedSkeleton
-      variant="text"
-      className={cn('h-8 content-md:h-10 content-lg:h-12', className)}
-      aria-label="Loading heading"
-      {...props}
-    />
+    <UnifiedSkeleton variant="text" className={cn('h-8 content-md:h-10 content-lg:h-12', className)} {...props} />
   ),
 
   /**
    * Medium heading skeleton (h3, h4)
    */
   Subheading: ({ className, ...props }: Omit<UnifiedSkeletonProps, 'variant'>) => (
-    <UnifiedSkeleton
-      variant="text"
-      className={cn('h-6 content-md:h-7 content-lg:h-8', className)}
-      aria-label="Loading subheading"
-      {...props}
-    />
+    <UnifiedSkeleton variant="text" className={cn('h-6 content-md:h-7 content-lg:h-8', className)} {...props} />
   ),
 
   /**
    * Body text skeleton
    */
   Body: ({ className, ...props }: Omit<UnifiedSkeletonProps, 'variant'>) => (
-    <UnifiedSkeleton
-      variant="text"
-      className={cn('h-4 content-md:h-5', className)}
-      aria-label="Loading text"
-      {...props}
-    />
+    <UnifiedSkeleton variant="text" className={cn('h-4 content-md:h-5', className)} {...props} />
   ),
 
   /**
    * Small text skeleton (captions, metadata)
    */
   Caption: ({ className, ...props }: Omit<UnifiedSkeletonProps, 'variant'>) => (
-    <UnifiedSkeleton
-      variant="text"
-      className={cn('h-3 content-md:h-4', className)}
-      aria-label="Loading caption"
-      {...props}
-    />
+    <UnifiedSkeleton variant="text" className={cn('h-3 content-md:h-4', className)} {...props} />
   ),
 };
 
@@ -151,7 +136,6 @@ export const InteractiveSkeleton = {
     <UnifiedSkeleton
       variant="default"
       className={cn('h-10 w-32 content-md:h-12 content-md:w-40', className)}
-      aria-label="Loading button"
       {...props}
     />
   ),
@@ -160,24 +144,14 @@ export const InteractiveSkeleton = {
    * Input field skeleton
    */
   Input: ({ className, ...props }: Omit<UnifiedSkeletonProps, 'variant'>) => (
-    <UnifiedSkeleton
-      variant="default"
-      className={cn('h-10 w-full content-md:h-12', className)}
-      aria-label="Loading input field"
-      {...props}
-    />
+    <UnifiedSkeleton variant="default" className={cn('h-10 w-full content-md:h-12', className)} {...props} />
   ),
 
   /**
    * Filter chip skeleton
    */
   Chip: ({ className, ...props }: Omit<UnifiedSkeletonProps, 'variant'>) => (
-    <UnifiedSkeleton
-      variant="default"
-      className={cn('h-8 w-20 rounded-full', className)}
-      aria-label="Loading filter"
-      {...props}
-    />
+    <UnifiedSkeleton variant="default" className={cn('h-8 w-20 rounded-full', className)} {...props} />
   ),
 };
 
@@ -199,14 +173,7 @@ export const MediaSkeleton = {
       lg: 'h-16 w-16',
     };
 
-    return (
-      <UnifiedSkeleton
-        variant="circular"
-        className={cn(sizeClasses[size], className)}
-        aria-label="Loading profile image"
-        {...props}
-      />
-    );
+    return <UnifiedSkeleton variant="circular" className={cn(sizeClasses[size], className)} {...props} />;
   },
 
   /**
@@ -214,12 +181,7 @@ export const MediaSkeleton = {
    * so loading state never causes a height shift when card data arrives)
    */
   CardImage: ({ className, ...props }: Omit<UnifiedSkeletonProps, 'variant'>) => (
-    <UnifiedSkeleton
-      variant="default"
-      className={cn('aspect-[1200/630] w-full', className)}
-      aria-label="Loading image"
-      {...props}
-    />
+    <UnifiedSkeleton variant="default" className={cn('aspect-[1200/630] w-full', className)} {...props} />
   ),
 
   /**
@@ -236,13 +198,6 @@ export const MediaSkeleton = {
       lg: 'h-8 w-8',
     };
 
-    return (
-      <UnifiedSkeleton
-        variant="default"
-        className={cn(sizeClasses[size], className)}
-        aria-label="Loading icon"
-        {...props}
-      />
-    );
+    return <UnifiedSkeleton variant="default" className={cn(sizeClasses[size], className)} {...props} />;
   },
 };

package/src/components/loading/wizard-layout-skeleton.tsx

@@ -1,14 +1,17 @@
 import { cn } from '../../utils/cn';
+import { LoadingRegion } from './loading-region';
 import { UnifiedSkeleton, TextSkeleton } from './unified-skeleton';
 
 interface WizardLayoutSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   steps?: number;
   className?: string;
 }
 
-export function WizardLayoutSkeleton({ steps = 6, className }: WizardLayoutSkeletonProps) {
+export function WizardLayoutSkeleton({ region = true, steps = 6, className }: WizardLayoutSkeletonProps) {
   return (
-    <div className={cn('space-y-6', className)} role="status" aria-label="Loading wizard layout">
+    <LoadingRegion label="Loading the wizard" announce={region} className={cn('space-y-6', className)}>
       {/* Progress bar */}
       <div className="flex flex-wrap items-center gap-2">
         {Array.from({ length: steps }).map((_, i) => (
@@ -27,6 +30,6 @@ export function WizardLayoutSkeleton({ steps = 6, className }: WizardLayoutSkele
         <UnifiedSkeleton className="h-10 w-24 rounded" />
         <UnifiedSkeleton className="h-10 w-32 rounded" />
       </div>
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/media-carousel.tsx

@@ -6,6 +6,7 @@ import { cn } from '../utils/cn';
 import type { MediaItem } from '../utils/media-carousel-utils-stub';
 import { Video } from './features/video';
 import { ImageOffIcon } from './icons-v2-generated/audio-and-visual/image-off-icon';
+import { UnifiedSkeleton } from './loading/unified-skeleton';
 import { Button } from './ui/button';
 
 // Navigation icons
@@ -214,7 +215,7 @@ export const MediaCarousel = memo(function MediaCarouselImpl({
     const imageLoaded = loadedImageSrc === rawSrc;
     return (
       <div className="absolute inset-0 bg-ods-bg">
-        {!imageLoaded && <div className="absolute inset-0 z-[1] animate-pulse bg-ods-card/90" aria-hidden />}
+        {!imageLoaded && <UnifiedSkeleton className="absolute inset-0 z-[1] h-full rounded-none" aria-hidden />}
         <Image
           src={displayImageSrc(rawSrc)}
           alt={item.alt || `Media ${index + 1}`}

package/src/components/meeting-scheduler/booking-form.tsx

@@ -29,6 +29,7 @@ import {
 import { cn } from '../../utils/cn';
 import type { FormRescueDefinition } from '../../utils/form-rescue';
 import { HUBSPOT_DO_NOT_COLLECT_FORM_PROPS } from '../../utils/hubspot-collected-forms';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import {
   Button,
   FieldWrapper,
@@ -44,7 +45,6 @@ import {
   CheckboxBlock,
   RadioGroup,
   RadioGroupItem,
-  Skeleton,
 } from '../ui';
 import { HoneypotField } from '../ui/honeypot-field';
 
@@ -874,21 +874,24 @@ export function BookingFormSkeleton({
       {skeletonRows(fieldRows ?? DEFAULT_FIELD_ROWS).map(row => (
         <div key={row.map(s => s.name).join('|')} className={ROW_GRID}>
           {row.map((slot, slotIndex) => (
-            <Skeleton key={slot.name} className={cn(FIELD_SKELETON_CLASS, slotColumnClass(row, slot, slotIndex))} />
+            <UnifiedSkeleton
+              key={slot.name}
+              className={cn(FIELD_SKELETON_CLASS, slotColumnClass(row, slot, slotIndex))}
+            />
           ))}
         </div>
       ))}
       {/* Without rows there is no telling how many questions the link declares: one long answer stands for them. */}
-      {!fieldRows && <Skeleton className="h-[7.75rem] w-full" />}
-      {consent && <Skeleton className="h-[4.25rem] w-full" />}
+      {!fieldRows && <UnifiedSkeleton className="h-[7.75rem] w-full" />}
+      {consent && <UnifiedSkeleton className="h-[4.25rem] w-full" />}
       {footerNote ? (
         <div className={FOOTER_ROW_CLASS}>
-          <Skeleton className="h-5 min-w-40 flex-1" />
-          <Skeleton className={cn('h-12 w-full', SUBMIT_WIDE_CLASS)} />
+          <UnifiedSkeleton className="h-5 min-w-40 flex-1" />
+          <UnifiedSkeleton className={cn('h-12 w-full', SUBMIT_WIDE_CLASS)} />
         </div>
       ) : (
         <div className={FOOTER_BARE_CLASS}>
-          <Skeleton className="h-12 w-40" />
+          <UnifiedSkeleton className="h-12 w-40" />
         </div>
       )}
     </div>

package/src/components/meeting-scheduler/context-panel.tsx

@@ -4,7 +4,8 @@ import type { MeetingHost } from '../../schemas/meeting-booking-schema';
 import { cn } from '../../utils/cn';
 import { formatDurationCompact } from '../../utils/format';
 import { BackButton } from '../layout/back-button';
-import { SquareAvatar, AvatarStack, Button, Skeleton } from '../ui';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { SquareAvatar, AvatarStack, Button } from '../ui';
 import { TimezoneSelect } from '../ui/timezone-select';
 
 /**
@@ -127,18 +128,18 @@ export function ContextPanelSkeleton({
         <div className={STRIP_MAIN}>
           <div className={IDENTITY_ROW}>
             <div className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xs)] content-lg:flex-none">
-              <Skeleton className="h-8 w-8 shrink-0 rounded-full" />
+              <UnifiedSkeleton className="h-8 w-8 shrink-0 rounded-full" />
               <div className="flex flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-                <Skeleton className="h-5 w-32" />
-                <Skeleton className="h-4 w-24" />
+                <UnifiedSkeleton className="h-5 w-32" />
+                <UnifiedSkeleton className="h-4 w-24" />
               </div>
             </div>
-            <Skeleton className="h-4 w-20 shrink-0" />
+            <UnifiedSkeleton className="h-4 w-20 shrink-0" />
           </div>
         </div>
         <div className={STRIP_ASIDE}>
           <p className={FIELD_LABEL_CLASS}>Timezone</p>
-          <Skeleton className="h-12 w-full" />
+          <UnifiedSkeleton className="h-12 w-full" />
         </div>
       </div>
     </div>
@@ -254,7 +255,7 @@ export function SchedulerContextPanel({
                 }}
               />
             ) : (
-              <Skeleton className="h-12 w-full" />
+              <UnifiedSkeleton className="h-12 w-full" />
             )}
           </div>
         )}

package/src/components/meeting-scheduler/directory.tsx

@@ -30,8 +30,9 @@ import { contentFetch } from '../../utils/embed-content-fetch';
 import { formatDurationCompact, formatDateWithTimezone, VIEWER_TIMEZONE } from '../../utils/format';
 import { pageCount } from '../../utils/search-params';
 import { EmptyState } from '../empty-state';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { PersistentPaginationWrapper } from '../persistent-pagination';
-import { AvatarStack, StatusBadge, Skeleton } from '../ui';
+import { AvatarStack, StatusBadge } from '../ui';
 
 export interface MeetingSchedulerDirectoryProps {
   /** Endpoints prefix, default '' (same-origin `/api/meetings`). */
@@ -127,16 +128,16 @@ export function MeetingSchedulerDirectoryRowSkeleton() {
   return (
     <div className="flex min-h-20 w-full items-center gap-4 rounded-lg border border-ods-border bg-ods-card px-4 py-3">
       <div className="flex min-w-0 flex-1 flex-col justify-center gap-1">
-        <Skeleton className="h-5 w-1/2" />
-        <Skeleton className="h-4 w-1/3" />
+        <UnifiedSkeleton className="h-5 w-1/2" />
+        <UnifiedSkeleton className="h-4 w-1/3" />
       </div>
-      <Skeleton className="hidden h-6 w-28 shrink-0 content-sm:block" />
-      <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
+      <UnifiedSkeleton className="hidden h-6 w-28 shrink-0 content-sm:block" />
+      <UnifiedSkeleton className="h-10 w-10 shrink-0 rounded-full" />
       <div className="hidden w-44 shrink-0 flex-col items-end gap-1 content-md:flex">
-        <Skeleton className="h-4 w-24" />
-        <Skeleton className="h-5 w-32" />
+        <UnifiedSkeleton className="h-4 w-24" />
+        <UnifiedSkeleton className="h-5 w-32" />
       </div>
-      <Skeleton className="size-12 shrink-0 rounded-md" />
+      <UnifiedSkeleton className="size-12 shrink-0 rounded-md" />
     </div>
   );
 }
@@ -205,7 +206,7 @@ export function MeetingSchedulerDirectory({
           ))}
         </div>
         <div className={cn('mt-8 flex w-full items-center justify-center', PAGINATION_SLOT_H)}>
-          <Skeleton className="h-10 w-64" />
+          <UnifiedSkeleton className="h-10 w-64" />
         </div>
       </div>
     );

package/src/components/meeting-scheduler/index.tsx

@@ -57,6 +57,7 @@ import { cn } from '../../utils/cn';
 import { FORM_RESCUE_ATTEMPT_FIELD, type FormRescueDefinition } from '../../utils/form-rescue';
 import { formatDurationCompact, formatDateWithTimezone } from '../../utils/format';
 import { BackButton } from '../layout/back-button';
+import { LoadingRegion } from '../loading/loading-region';
 import { Alert, AlertDescription, Button } from '../ui';
 import {
   BookingForm,
@@ -808,10 +809,10 @@ export function HubSpotMeetingScheduler({
   if (modal && isLoadingAvailability && !availability) {
     return (
       <div className={cn(MODAL_STACK_CLASS, className)}>
-        <div className={MODAL_CARD_CLASS}>
+        <LoadingRegion label="Loading available times" className={MODAL_CARD_CLASS}>
           <SchedulerModalHeaderSkeleton />
           <SlotPickerSkeleton monthOffset={monthOffset} layout="modal" />
-        </div>
+        </LoadingRegion>
         <ModalFooter
           onCancel={onBack}
           primary={
@@ -831,7 +832,7 @@ export function HubSpotMeetingScheduler({
     // shifts when it swaps.
     return (
       <div className={cardClass}>
-        <div className={innerClass}>
+        <LoadingRegion label="Loading available times" className={innerClass}>
           {!formOnly && <ContextPanelSkeleton onBack={backEdge} className={CONTEXT_PANEL_CLASS} />}
           <div className={actionPanelClass}>
             {/* Both terms matter. Without `flow` this stays a calendar where
@@ -852,7 +853,7 @@ export function HubSpotMeetingScheduler({
               <SlotPickerSkeleton monthOffset={monthOffset} />
             )}
           </div>
-        </div>
+        </LoadingRegion>
       </div>
     );
   }

package/src/components/meeting-scheduler/modal-header.tsx

@@ -3,7 +3,8 @@
 import type { MeetingHost } from '../../schemas/meeting-booking-schema';
 import { cn } from '../../utils/cn';
 import { formatDurationCompact } from '../../utils/format';
-import { SquareAvatar, AvatarStack, Button, Skeleton } from '../ui';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { SquareAvatar, AvatarStack, Button } from '../ui';
 import { TimezoneSelect } from '../ui/timezone-select';
 
 /**
@@ -114,7 +115,7 @@ export function SchedulerModalHeader({
               }}
             />
           ) : (
-            <Skeleton className="h-12 w-full" />
+            <UnifiedSkeleton className="h-12 w-full" />
           )}
         </div>
       )}
@@ -128,17 +129,17 @@ export function SchedulerModalHeaderSkeleton() {
     <>
       <div className={STRIP_CLASS}>
         <div className="flex items-center gap-[var(--spacing-system-xs)]">
-          <Skeleton className="h-8 w-8 shrink-0 rounded-full" />
+          <UnifiedSkeleton className="h-8 w-8 shrink-0 rounded-full" />
           <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
-            <Skeleton className="h-5 w-32" />
-            <Skeleton className="h-4 w-24" />
+            <UnifiedSkeleton className="h-5 w-32" />
+            <UnifiedSkeleton className="h-4 w-24" />
           </div>
         </div>
-        <Skeleton className="h-4 w-20 shrink-0" />
+        <UnifiedSkeleton className="h-4 w-20 shrink-0" />
       </div>
       <div className={cn(ROW_CLASS, 'flex flex-col gap-[var(--spacing-system-xxs)]')}>
         <p className={FIELD_LABEL_CLASS}>Timezone</p>
-        <Skeleton className="h-12 w-full" />
+        <UnifiedSkeleton className="h-12 w-full" />
       </div>
     </>
   );

package/src/components/meeting-scheduler/slot-picker.tsx

@@ -5,7 +5,8 @@ import { useCallback, useMemo } from 'react';
 import { cn } from '../../utils/cn';
 import { formatDateWithTimezone, formatTimeWithTimezone, VIEWER_TIMEZONE } from '../../utils/format';
 import { MAX_MONTH_OFFSET } from '../../utils/hubspot-meetings-convention';
-import { Button, DatePickerCalendar, Skeleton } from '../ui';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { Button, DatePickerCalendar } from '../ui';
 
 /**
  * SlotPicker — day layer + time-chip grid for the meeting scheduler.
@@ -363,7 +364,7 @@ export function TimeChipsSkeleton() {
       {/* The day label is data — but it is held inside the REAL heading line
           box, so the skeleton's first row sits exactly where the label lands. */}
       <div className={COLUMN_HEADING_CLASS}>
-        <Skeleton className="inline-block h-4 w-40 align-middle" />
+        <UnifiedSkeleton className="inline-block h-4 w-40 align-middle" />
       </div>
       <div className={CHIP_GRID_CLASS}>
         {/* Enough to fill the visible scroll box at any column count — the
@@ -371,7 +372,7 @@ export function TimeChipsSkeleton() {
             lands flush and a partial last row is the honest shape anyway. */}
         {Array.from({ length: 16 }, (_, i) => (
           // h-11 content-md:h-12 — the loaded chip's own default-size height.
-          <Skeleton key={i} className={cn(CHIP_CLASS, 'h-11 content-md:h-12')} />
+          <UnifiedSkeleton key={i} className={cn(CHIP_CLASS, 'h-11 content-md:h-12')} />
         ))}
       </div>
     </>

package/src/components/navigation/app-header.tsx

@@ -11,6 +11,7 @@ import { LogOutIcon } from '../icons-v2-generated/interface/log-out-icon';
 import { OpenframeLogoIcon } from '../icons-v2-generated/logos/openframe-logo-icon';
 import { OpenframeTextIcon } from '../icons-v2-generated/logos/openframe-text-icon';
 import { UserClassicIcon } from '../icons-v2-generated/users/user-classic-icon';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, SquareAvatar } from '../ui';
 import { HeaderButton } from './header-button';
 import { HeaderGlobalSearch } from './header-global-search';
@@ -387,7 +388,7 @@ const CELL_VISIBILITY: Record<Exclude<HeaderLoadingCell, 'wide'>, string | undef
 function HeaderCellSkeleton({ className }: { className?: string }) {
   return (
     <div className={cn('flex h-full w-14 shrink-0 items-center justify-center border-l border-ods-border', className)}>
-      <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
+      <UnifiedSkeleton className="h-6 w-6 rounded" />
     </div>
   );
 }
@@ -403,8 +404,8 @@ function HeaderCellSkeleton({ className }: { className?: string }) {
 function HeaderWideCellSkeleton() {
   return (
     <div className="flex h-full w-14 shrink-0 items-center justify-center gap-2 border-l border-ods-border md:w-[140px] md:px-4">
-      <div className="h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" />
-      <div className="hidden h-5 animate-pulse rounded bg-ods-border md:block md:w-[72px]" />
+      <UnifiedSkeleton className="h-6 w-6 shrink-0 rounded" />
+      <UnifiedSkeleton className="hidden h-5 rounded md:block md:w-[72px]" />
     </div>
   );
 }
@@ -438,13 +439,13 @@ function AppHeaderSkeleton({
       leading={
         // Burger cell: mobile only, in CSS.
         <div className="flex h-full w-14 shrink-0 items-center justify-center border-r border-ods-border md:hidden">
-          <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-6 w-6 rounded" />
         </div>
       }
       logo={
         <>
-          <div className="h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" />
-          <div className="h-4 w-24 animate-pulse rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-6 w-6 shrink-0 rounded" />
+          <UnifiedSkeleton className="h-4 w-24 rounded" />
         </>
       }
       // `md:hidden` belongs on the WRAPPER, not the placeholder inside it:
@@ -455,7 +456,7 @@ function AppHeaderSkeleton({
       // it back on handoff, which is the exact jump this branch removes.
       logoClassName="gap-2 md:hidden"
       // `TopNavigation` already hides the center zone below `centerBreakpoint`.
-      center={showSearch ? <div className="h-10 w-full animate-pulse rounded-md bg-ods-border" /> : undefined}
+      center={showSearch ? <UnifiedSkeleton className="h-10 w-full rounded-md" /> : undefined}
       sideActions={
         <>
           {/* Mobile-only search trigger; from md the search lives in the center zone. */}

package/src/components/navigation/multi-level-navigation.tsx

@@ -3,6 +3,7 @@
 import { ChevronDown, ChevronUp, FileText, Folder, FolderOpen } from 'lucide-react';
 import { cn } from '../../utils/cn';
 import { DEFAULT_FOLDER_INDEX_FILE as CANONICAL_FOLDER_INDEX_FILE } from '../../utils/doc-tree-nav';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 
 export interface NavigationNode {
   id: string;
@@ -93,7 +94,7 @@ export function MultiLevelNavigation({
     return (
       <div className={cn('space-y-2', className)}>
         {[1, 2, 3, 4].map(i => (
-          <div key={i} className="h-12 animate-pulse rounded-lg bg-ods-skeleton p-3" />
+          <UnifiedSkeleton key={i} className="h-12 rounded-lg p-3" />
         ))}
       </div>
     );
@@ -241,7 +242,7 @@ export function MobileNavigationDropdown({
     return (
       <div className={cn('space-y-2', className)}>
         {[1, 2, 3].map(i => (
-          <div key={i} className="h-10 animate-pulse rounded-lg bg-ods-skeleton p-3" />
+          <UnifiedSkeleton key={i} className="h-10 rounded-lg p-3" />
         ))}
       </div>
     );