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

package/src/components/ui/dashboard-info-card.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import Link from '../../embed-shims/next-link';
 import { cn } from '../../utils/cn';
 import { QuestionCircleIcon } from '../icons-v2-generated/signs-and-symbols/question-circle-icon';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { CircularProgress, type CircularProgressOverflow, type CircularProgressVariant } from './circular-progress';
 import { FloatingTooltip } from './floating-tooltip';
 import { Tag } from './tag';
@@ -84,10 +85,24 @@ export interface DashboardInfoCardProps {
    */
   caption?: ReactNode;
   /**
-   * The figure is still being fetched: the SAME card, its title, value and caption
-   * drawn as bars of their own line heights, so the loaded card replaces it in place.
+   * The figure is still being fetched: the SAME card, so the loaded card replaces it in
+   * place. `title` / `titleSlot` / `titleTag` / `icon` are drawn as they are (they are known
+   * before the data; with neither title a bar holds the title line), the value and caption are
+   * bars of their own line heights, the progress ring is held when `showProgress` is set, and
+   * the percentage when `loadingShowsPercentage` is set, the sub-value when `loadingShowsSubValue` is set.
    */
   loading?: boolean;
+  /**
+   * While `loading`: hold the percentage's box (plain "(NN%)" text, or a `Tag` when
+   * `percentageDisplay` / `progressVariant` would draw one), because the loaded card will show
+   * a percentage. Default `false`.
+   */
+  loadingShowsPercentage?: boolean;
+  /**
+   * While `loading`: hold the `subValue`'s box (one `text-h6` line beside the value) for a card
+   * whose loaded state will carry one. Default `false`.
+   */
+  loadingShowsSubValue?: boolean;
 }
 
 export function DashboardInfoCard({
@@ -109,17 +124,30 @@ export function DashboardInfoCard({
   subValue,
   caption,
   loading = false,
+  loadingShowsPercentage = false,
+  loadingShowsSubValue = false,
 }: DashboardInfoCardProps) {
   const formattedValue = typeof value === 'number' ? value.toLocaleString() : value;
 
+  const percentageAsTag =
+    percentageDisplay === 'tag' ||
+    (percentageDisplay === 'auto' && (progressVariant === 'warning' || progressVariant === 'error'));
+
   const renderPercentage = () => {
+    if (loading) {
+      if (!loadingShowsPercentage) return null;
+      // The box the loaded percentage takes: a `Tag` (h-8) or one `text-h4` line.
+      return percentageAsTag ? (
+        <UnifiedSkeleton className="h-8 w-12 shrink-0 rounded-md" />
+      ) : (
+        <p className="text-h4">
+          <UnifiedSkeleton as="span" className="block h-[1lh] w-12 rounded" />
+        </p>
+      );
+    }
     if (percentage === undefined) return null;
 
-    const asTag =
-      percentageDisplay === 'tag' ||
-      (percentageDisplay === 'auto' && (progressVariant === 'warning' || progressVariant === 'error'));
-
-    if (asTag) {
+    if (percentageAsTag) {
       const tagVariant =
         progressVariant === 'warning' || progressVariant === 'error'
           ? progressVariant
@@ -133,13 +161,13 @@ export function DashboardInfoCard({
   };
 
   const renderProgress = () => {
-    if (!showProgress || percentage === undefined) return null;
+    if (!showProgress || (percentage === undefined && !loading)) return null;
 
     // Keep the ring proportionally weighted (10px stroke at the 56px default).
     const strokeFor = (size: number) => Math.max(2, Math.round((size * 10) / 56));
 
     const common = {
-      percentage,
+      percentage: percentage ?? 0,
       variant: progressVariant,
       overflow: progressOverflow,
       showLabel: false,
@@ -174,6 +202,23 @@ export function DashboardInfoCard({
       rings.push({ key: 'lg', size: lg, className: 'hidden content-lg:block' });
     }
 
+    if (loading) {
+      // The ring's own box at each breakpoint, as a circle.
+      return (
+        <>
+          {rings.map(ring => (
+            <UnifiedSkeleton
+              key={ring.key}
+              variant="circular"
+              width={ring.size}
+              height={ring.size}
+              className={cn('shrink-0', ring.className)}
+            />
+          ))}
+        </>
+      );
+    }
+
     return (
       <>
         {rings.map(ring => (
@@ -203,22 +248,31 @@ export function DashboardInfoCard({
       <div className="flex min-w-0 flex-1 flex-col">
         {/* Title row: caption and/or tag (Figma "status" variant) */}
         <div className="flex items-center gap-[var(--spacing-system-xxs)]">
-          {loading ? (
-            <p className="text-h5">
-              <span className="block h-[1lh] w-20 animate-pulse rounded bg-ods-border" />
-            </p>
-          ) : (
-            (titleSlot ?? (title !== undefined && <p className="truncate text-ods-text-secondary text-h5">{title}</p>))
-          )}
+          {titleSlot ??
+            (title !== undefined ? (
+              <p className="truncate text-ods-text-secondary text-h5">{title}</p>
+            ) : (
+              loading && (
+                <p className="text-h5">
+                  <UnifiedSkeleton as="span" className="block h-[1lh] w-20 rounded" />
+                </p>
+              )
+            ))}
           {titleTag}
         </div>
 
         {/* Value and percentage */}
         <div className="flex items-center gap-[var(--spacing-system-xs)]">
           <p className={cn('truncate text-ods-text-primary text-h3 content-md:text-h2', valueClassName)}>
-            {loading ? <span className="block h-[1lh] w-24 animate-pulse rounded bg-ods-border" /> : formattedValue}
+            {loading ? <UnifiedSkeleton as="span" className="block h-[1lh] w-24 rounded" /> : formattedValue}
           </p>
-          {subValue && <p className="text-ods-text-secondary text-h6">{subValue}</p>}
+          {loading
+            ? loadingShowsSubValue && (
+                <p className="text-h6">
+                  <UnifiedSkeleton as="span" className="block h-[1lh] w-16 rounded" />
+                </p>
+              )
+            : subValue && <p className="text-ods-text-secondary text-h6">{subValue}</p>}
           {renderPercentage()}
           {tooltip && (
             <FloatingTooltip content={tooltip} side="top">
@@ -232,7 +286,7 @@ export function DashboardInfoCard({
         {/* Two lines kept for the caption, loading or loaded, so a narrow tile is one height. */}
         {caption && (
           <p className="line-clamp-2 min-h-[2lh] text-ods-text-secondary text-h6">
-            {loading ? <span className="block h-[1lh] w-32 animate-pulse rounded bg-ods-border" /> : caption}
+            {loading ? <UnifiedSkeleton as="span" className="block h-[1lh] w-32 rounded" /> : caption}
           </p>
         )}
       </div>
@@ -256,6 +310,7 @@ export function DashboardInfoCard({
     return (
       <Link
         href={href}
+        aria-busy={loading || undefined}
         className={cn(
           baseClassName,
           captionClassName,
@@ -269,5 +324,11 @@ export function DashboardInfoCard({
     );
   }
 
-  return <div className={cn(baseClassName, captionClassName, className)}>{cardContent}</div>;
+  // Loading, the card is busy: one card announces nothing of its own (a grid of them would say it once per
+  // card); the region it sits in does.
+  return (
+    <div aria-busy={loading || undefined} className={cn(baseClassName, captionClassName, className)}>
+      {cardContent}
+    </div>
+  );
 }

package/src/components/ui/data-attribution.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { formatDate } from '../../utils/format';
+import { TextSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 
 export interface DataAttributionProps {
   /** The source's mark, sized by the caller (e.g. `<CartaIcon className="h-4 w-4" />`). */
@@ -43,3 +44,20 @@ export function DataAttribution({ icon, source, lastUpdated, action }: DataAttri
     </div>
   );
 }
+
+/**
+ * `DataAttribution` while its date loads: the same line (two lines below
+ * `content-sm`, one row above it) with text bars, so the line does not move
+ * when it fills in.
+ */
+export function DataAttributionSkeleton() {
+  return (
+    <div className={LINE_CLASS} aria-hidden="true">
+      <div className={ITEM_CLASS}>
+        <UnifiedSkeleton className="size-4 rounded" />
+        <TextSkeleton.Body className="w-40" />
+      </div>
+      <TextSkeleton.Body className="w-52" />
+    </div>
+  );
+}

package/src/components/ui/data-table/data-table-body.tsx

@@ -3,6 +3,7 @@
 import { useSyncExternalStore, type ReactNode } from 'react';
 import { useIsomorphicLayoutEffect } from '../../../hooks/ui/use-isomorphic-layout-effect';
 import { cn } from '../../../utils/cn';
+import { LoadingRegion } from '../../loading/loading-region';
 import type { NoDataProps } from '../no-data';
 import { useDataTableContext } from './data-table';
 import { DataTableEmpty } from './data-table-empty';
@@ -19,6 +20,11 @@ export interface DataTableBodyProps<T = unknown> {
   emptyState?: NoDataProps;
   /** Skeleton row count when loading. Default `10`. */
   skeletonRows?: number;
+  /**
+   * The loading state announces itself (`LoadingRegion`: aria-busy plus one "Loading results" status).
+   * `false` when the table sits inside a loading region of its own (a page skeleton). Default `true`.
+   */
+  loadingRegion?: boolean;
   className?: string;
   /**
    * Per-row class name. Prefer `useCallback` for function form to avoid
@@ -95,6 +101,7 @@ export function DataTableBody<T = unknown>({
   emptyMessage,
   emptyState,
   skeletonRows = 10,
+  loadingRegion = true,
   className,
   rowClassName,
   compact,
@@ -121,13 +128,13 @@ export function DataTableBody<T = unknown>({
 
   if (loading && !hasRows) {
     return (
-      <div className={cn(ROW_STACK_CLASSES, className)}>
+      <LoadingRegion label="Loading results" announce={loadingRegion} className={cn(ROW_STACK_CLASSES, className)}>
         <DataTableSkeleton
           rows={skeletonRows}
           className={skeletonRowClassName}
           rowHeightClassName={rowHeightClassName}
         />
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/components/ui/data-table/data-table-infinite-footer.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { useIsomorphicLayoutEffect } from '../../../hooks/ui/use-isomorphic-layout-effect';
+import { LoadingRegion } from '../../loading/loading-region';
 import { Button } from '../button';
 import { useOptionalDataTableContext } from './data-table';
 import { useDataTableLoadMoreStore } from './data-table-load-more';
@@ -163,9 +164,10 @@ export function DataTableInfiniteFooter({
   return (
     <>
       {isFetchingNextPage && !bodyDrawsRows && (
-        <div className={ROW_STACK_CLASSES}>
+        // Busy, without a second status: the footer's own one below says "Loading more results".
+        <LoadingRegion status={false} className={ROW_STACK_CLASSES}>
           <DataTableSkeleton rows={skeletonRows} />
-        </div>
+        </LoadingRegion>
       )}
       {isStalled && (
         <div className="flex justify-center pt-[var(--spacing-system-mf)]">

package/src/components/ui/data-table/data-table-skeleton.tsx

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { useDataTableContext } from './data-table';
 import { getHideClasses } from './utils';
 
@@ -60,8 +61,10 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
       {Array.from({ length: rows }).map((_, index) => (
         <div
           key={index}
+          // Decoration: the table's own status line says it is loading.
+          aria-hidden="true"
           className={cn(
-            'relative animate-pulse overflow-hidden rounded-md border border-ods-border bg-ods-card',
+            'relative overflow-hidden rounded-md border border-ods-border bg-ods-card',
             // The slot height sits on the card, matching a real row.
             rowHeightClassName,
             className,
@@ -91,9 +94,9 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
                     getHideClasses(meta?.hideAt),
                   )}
                 >
-                  <div className="mb-[var(--spacing-system-xxs)] h-5 w-3/4 rounded-sm bg-ods-bg-surface" />
+                  <UnifiedSkeleton className="mb-[var(--spacing-system-xxs)] h-5 w-3/4 rounded-sm" />
                   {index % 2 === 0 && column.id === firstColumnId && (
-                    <div className="h-4 w-1/2 rounded-sm bg-ods-bg-surface opacity-60" />
+                    <UnifiedSkeleton className="h-4 w-1/2 rounded-sm opacity-60" />
                   )}
                 </div>
               );
@@ -108,8 +111,8 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
             )}
           >
             <div className="flex min-w-0 flex-1 flex-col justify-center py-[var(--spacing-system-sf)]">
-              <div className="mb-[var(--spacing-system-xsf)] h-4 w-3/4 rounded-sm bg-ods-bg-surface" />
-              <div className="h-3 w-1/2 rounded-sm bg-ods-bg-surface opacity-60" />
+              <UnifiedSkeleton className="mb-[var(--spacing-system-xsf)] h-4 w-3/4 rounded-sm" />
+              <UnifiedSkeleton className="h-3 w-1/2 rounded-sm opacity-60" />
             </div>
           </div>
         </div>

package/src/components/ui/feature-card.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type React from 'react';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Card } from './card';
 import { StatusBadge } from './status-badge';
 
@@ -82,11 +83,6 @@ function fourColumnBorders(index: number, count: number): string {
   return ` ${classes.join(' ')}`;
 }
 
-/** A text row's placeholder: a bar exactly one line of its element's own typography tall. */
-function LineBar({ width }: { width: string }) {
-  return <span className={`block h-[1lh] ${width} animate-pulse rounded bg-ods-border`} />;
-}
-
 export function FeatureCardGrid({
   items,
   columns = 3,
@@ -230,15 +226,27 @@ export function FeatureCardGrid({
                         <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xsf)]">
                           {item.eyebrow && (
                             <span className="text-ods-text-secondary text-h5">
-                              {loading ? <LineBar width="w-6" /> : item.eyebrow}
+                              {loading ? (
+                                <UnifiedSkeleton as="span" className="block h-[1lh] w-6 rounded" />
+                              ) : (
+                                item.eyebrow
+                              )}
                             </span>
                           )}
                           <h3 className={`text-ods-text-primary text-h2 ${titleClassName}`}>
-                            {loading ? <LineBar width="w-1/2" /> : item.title}
+                            {loading ? (
+                              <UnifiedSkeleton as="span" className="block h-[1lh] w-1/2 rounded" />
+                            ) : (
+                              item.title
+                            )}
                           </h3>
                           {item.subtitle && (
                             <p className={`text-h4 ${accentClassName} ${subtitleClassName}`}>
-                              {loading ? <LineBar width="w-3/4" /> : item.subtitle}
+                              {loading ? (
+                                <UnifiedSkeleton as="span" className="block h-[1lh] w-3/4 rounded" />
+                              ) : (
+                                item.subtitle
+                              )}
                             </p>
                           )}
                           {item.content}
@@ -248,15 +256,23 @@ export function FeatureCardGrid({
                       <div className="flex flex-col gap-[var(--spacing-system-xsf)]">
                         {item.eyebrow && (
                           <span className="text-ods-text-secondary text-h5">
-                            {loading ? <LineBar width="w-6" /> : item.eyebrow}
+                            {loading ? (
+                              <UnifiedSkeleton as="span" className="block h-[1lh] w-6 rounded" />
+                            ) : (
+                              item.eyebrow
+                            )}
                           </span>
                         )}
                         <h3 className={`whitespace-pre-line text-ods-text-primary text-h2 ${titleClassName}`}>
-                          {loading ? <LineBar width="w-1/2" /> : item.title}
+                          {loading ? <UnifiedSkeleton as="span" className="block h-[1lh] w-1/2 rounded" /> : item.title}
                         </h3>
                         {item.subtitle && (
                           <p className={`text-h4 ${accentClassName} ${subtitleClassName}`}>
-                            {loading ? <LineBar width="w-3/4" /> : item.subtitle}
+                            {loading ? (
+                              <UnifiedSkeleton as="span" className="block h-[1lh] w-3/4 rounded" />
+                            ) : (
+                              item.subtitle
+                            )}
                           </p>
                         )}
                       </div>

package/src/components/ui/file-manager/file-manager-skeleton.tsx

@@ -1,43 +1,51 @@
 'use client';
 
-import { Skeleton } from '../skeleton';
+import { LoadingRegion } from '../../loading/loading-region';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 
 interface FileManagerSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   rows?: number;
   showSearch?: boolean;
   showActions?: boolean;
 }
 
-export function FileManagerSkeleton({ rows = 8, showSearch = true, showActions = true }: FileManagerSkeletonProps) {
+export function FileManagerSkeleton({
+  region = true,
+  rows = 8,
+  showSearch = true,
+  showActions = true,
+}: FileManagerSkeletonProps) {
   const rowPlaceholders = Array.from({ length: rows });
 
   return (
-    <div className="flex h-full flex-col bg-ods-bg">
+    <LoadingRegion label="Loading files" announce={region} className="flex h-full flex-col bg-ods-bg">
       <div className="flex min-h-0 flex-1 flex-col space-y-6 py-6">
         {/* Breadcrumb and Action Bar */}
         <div className="flex flex-wrap items-start justify-between gap-4">
           {/* Breadcrumb skeleton */}
           <div className="flex min-w-0 flex-1 items-center gap-2">
-            <Skeleton className="h-5 w-12" />
-            <Skeleton className="h-4 w-4 rounded-full" />
-            <Skeleton className="h-5 w-20" />
-            <Skeleton className="h-4 w-4 rounded-full" />
-            <Skeleton className="h-5 w-24" />
+            <UnifiedSkeleton className="h-5 w-12" />
+            <UnifiedSkeleton className="h-4 w-4 rounded-full" />
+            <UnifiedSkeleton className="h-5 w-20" />
+            <UnifiedSkeleton className="h-4 w-4 rounded-full" />
+            <UnifiedSkeleton className="h-5 w-24" />
           </div>
 
           {/* Action buttons skeleton */}
           {showActions && (
             <div className="flex flex-shrink-0 items-center gap-2">
-              <Skeleton className="h-9 w-24" />
-              <Skeleton className="h-9 w-20" />
-              <Skeleton className="h-9 w-20" />
-              <Skeleton className="h-9 w-28" />
+              <UnifiedSkeleton className="h-9 w-24" />
+              <UnifiedSkeleton className="h-9 w-20" />
+              <UnifiedSkeleton className="h-9 w-20" />
+              <UnifiedSkeleton className="h-9 w-28" />
             </div>
           )}
         </div>
 
         {/* Search bar skeleton */}
-        {showSearch && <Skeleton className="h-10 w-full rounded-lg" />}
+        {showSearch && <UnifiedSkeleton className="h-10 w-full rounded-lg" />}
 
         {/* Table skeleton */}
         <div className="min-h-0 flex-1">
@@ -46,7 +54,7 @@ export function FileManagerSkeleton({ rows = 8, showSearch = true, showActions =
             <div className="flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4">
               {/* Checkbox */}
               <div className="mr-4">
-                <Skeleton className="h-5 w-5 rounded" />
+                <UnifiedSkeleton className="h-5 w-5 rounded" />
               </div>
 
               {/* Column headers */}
@@ -65,31 +73,31 @@ export function FileManagerSkeleton({ rows = 8, showSearch = true, showActions =
                 <div key={idx} className="flex h-16 items-center border-ods-border bg-ods-card px-4">
                   {/* Checkbox */}
                   <div className="mr-4">
-                    <Skeleton className="h-5 w-5 rounded" />
+                    <UnifiedSkeleton className="h-5 w-5 rounded" />
                   </div>
 
                   {/* File icon and name */}
                   <div className="flex min-w-0 flex-1 items-center gap-3">
-                    <Skeleton className="h-6 w-6 rounded" />
+                    <UnifiedSkeleton className="h-6 w-6 rounded" />
                     <div className="flex min-w-0 flex-col">
-                      <Skeleton className="h-4 w-32" />
+                      <UnifiedSkeleton className="h-4 w-32" />
                     </div>
                   </div>
 
                   {/* Size */}
                   <div className="w-24 shrink-0 pr-4">
-                    <Skeleton className="h-4 w-16" />
+                    <UnifiedSkeleton className="h-4 w-16" />
                   </div>
 
                   {/* Modified date */}
                   <div className="w-36 shrink-0 pl-4">
-                    <Skeleton className="h-4 w-24" />
+                    <UnifiedSkeleton className="h-4 w-24" />
                   </div>
 
                   {/* Action buttons */}
                   <div className="flex w-48 shrink-0 items-center justify-end gap-1 pl-4">
-                    <Skeleton className="h-8 w-8 rounded" />
-                    <Skeleton className="h-8 w-8 rounded" />
+                    <UnifiedSkeleton className="h-8 w-8 rounded" />
+                    <UnifiedSkeleton className="h-8 w-8 rounded" />
                   </div>
                 </div>
               ))}
@@ -97,6 +105,6 @@ export function FileManagerSkeleton({ rows = 8, showSearch = true, showActions =
           </div>
         </div>
       </div>
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/ui/file-manager/file-manager-table.tsx

@@ -2,8 +2,8 @@
 
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../utils/cn';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Checkbox } from '../checkbox';
-import { Skeleton } from '../skeleton';
 import { FileManagerEmpty } from './file-manager-empty';
 import { FileManagerTableRow } from './file-manager-table-row';
 import type { FileManagerTableProps } from './types';
@@ -81,7 +81,7 @@ export function FileManagerTable({
         <div className="flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4">
           {showCheckboxes && (
             <div className="mr-4">
-              <Skeleton className="h-5 w-5 rounded" />
+              <UnifiedSkeleton className="h-5 w-5 rounded" />
             </div>
           )}
 
@@ -100,33 +100,33 @@ export function FileManagerTable({
             <div key={idx} className="group flex h-16 items-center border-ods-border bg-ods-card px-4">
               {showCheckboxes && (
                 <div className="mr-4">
-                  <Skeleton className="h-5 w-5 rounded" />
+                  <UnifiedSkeleton className="h-5 w-5 rounded" />
                 </div>
               )}
 
               {/* File icon and name column */}
               <div className="flex min-w-0 flex-1 items-center gap-3">
-                <Skeleton className="h-6 w-6 rounded" />
+                <UnifiedSkeleton className="h-6 w-6 rounded" />
                 <div className="flex min-w-0 flex-col">
-                  <Skeleton className="h-4 w-32" />
-                  {isSearchResult && <Skeleton className="mt-1 h-3 w-48" />}
+                  <UnifiedSkeleton className="h-4 w-32" />
+                  {isSearchResult && <UnifiedSkeleton className="mt-1 h-3 w-48" />}
                 </div>
               </div>
 
               {/* Size column */}
               <div className="w-24 shrink-0 pr-4">
-                <Skeleton className="h-4 w-16" />
+                <UnifiedSkeleton className="h-4 w-16" />
               </div>
 
               {/* Modified date column */}
               <div className="w-36 shrink-0 pl-4">
-                <Skeleton className="h-4 w-24" />
+                <UnifiedSkeleton className="h-4 w-24" />
               </div>
 
               {/* Action buttons column */}
               <div className="flex w-48 shrink-0 items-center justify-end gap-1 pl-4">
-                <Skeleton className="h-8 w-8 rounded" />
-                <Skeleton className="h-8 w-8 rounded" />
+                <UnifiedSkeleton className="h-8 w-8 rounded" />
+                <UnifiedSkeleton className="h-8 w-8 rounded" />
               </div>
             </div>
           ))}

package/src/components/ui/filter-modal.tsx

@@ -4,12 +4,12 @@ import { useEffect, useRef, useState } from 'react';
 
 import { cn } from '../../utils/cn';
 import { Filter02Icon } from '../icons-v2-generated/sort-and-filter/filter-02-icon';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from './button';
 import { DateFilterPanel, type DateFilterResult, type DateRange } from './date-picker';
 import { FilterCheckboxItem } from './filter-checkbox-item';
 import { ModalV2, ModalV2Content, ModalV2Footer, ModalV2Header, ModalV2Title } from './modal-v2';
 import { ScrollFadeOverlay, useScrollFade } from './scroll-fade';
-import { Skeleton } from './skeleton';
 import { SortColumnItem, type SortConfig, type SortDirection } from './sort-column-item';
 import type { TableFilters } from './table/types';
 import { TagKeyValueFilter, type TagKeyConfig } from './tag-key-value-filter';
@@ -203,16 +203,16 @@ export function FilterModal({
               <>
                 {[0, 1].map(group => (
                   <div key={group} className="flex flex-col gap-1">
-                    <Skeleton className="h-5 w-24" />
+                    <UnifiedSkeleton className="h-5 w-24" />
                     <div className="overflow-hidden rounded-md border border-ods-border">
                       {[0, 1, 2].map(row => (
                         <div
                           key={row}
                           className="flex items-center gap-3 border-b border-ods-border bg-ods-card px-4 py-3 last:border-b-0"
                         >
-                          <Skeleton className="h-6 w-6 shrink-0 rounded-[6px]" />
-                          <Skeleton className="h-4 max-w-[60%] flex-1" />
-                          <Skeleton className="h-4 w-10 shrink-0" />
+                          <UnifiedSkeleton className="h-6 w-6 shrink-0 rounded-[6px]" />
+                          <UnifiedSkeleton className="h-4 max-w-[60%] flex-1" />
+                          <UnifiedSkeleton className="h-4 w-10 shrink-0" />
                         </div>
                       ))}
                     </div>

package/src/components/ui/filter-pill-row.tsx

@@ -14,6 +14,7 @@
 
 import { Filter } from 'lucide-react';
 import type { ReactNode } from 'react';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from './button';
 
 export interface FilterPillRowOption {
@@ -67,3 +68,21 @@ export function FilterPillRow({
     </div>
   );
 }
+
+const noop = () => {};
+
+/**
+ * The loading state of a SERVED pill row (facets that arrive with the data):
+ * the same row shell with placeholder pills, so the filters never pop in under
+ * the content. The row renders its children INSTEAD of options, which is
+ * exactly what a skeleton wants.
+ */
+export function FilterPillRowSkeleton({ label, pills = 5 }: { label: string; pills?: number }) {
+  return (
+    <FilterPillRow label={label} selectedValue="" onValueChange={noop} options={[]}>
+      {Array.from({ length: pills }, (_, i) => (
+        <UnifiedSkeleton key={i} className="h-8 w-24 rounded" />
+      ))}
+    </FilterPillRow>
+  );
+}

package/src/components/ui/index.ts

@@ -77,7 +77,6 @@ export * from './mobile-app-qr';
 export * from './status-indicator';
 export * from './toaster';
 // TODO: Add other UI components as they are moved to ui-kit
-export * from './skeleton';
 export * from './hover-dropdown';
 // Chat components
 export * from '../chat';