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

package/src/components/features/devices/devices-table-columns.tsx

@@ -100,6 +100,8 @@ export function getDeviceOpenColumn<T extends DeviceRow = DeviceRow>(): ColumnDe
 export interface DevicesTableBodyProps<T extends DeviceRow = DeviceRow> {
   devices: T[];
   isLoading?: boolean;
+  /** The loading state announces itself ("Loading results"). `false` inside another loading region. Default `true`. */
+  loadingRegion?: boolean;
   /**
    * The empty state, as the design's `data-placeholder`: icon over a title over
    * a description. Wins over `emptyMessage` when both are given.
@@ -139,6 +141,7 @@ export interface DevicesTableBodyProps<T extends DeviceRow = DeviceRow> {
 export function DevicesTableBody<T extends DeviceRow = DeviceRow>({
   devices,
   isLoading,
+  loadingRegion,
   emptyState,
   emptyMessage = 'No devices found.',
   skeletonRows = 10,
@@ -186,6 +189,7 @@ export function DevicesTableBody<T extends DeviceRow = DeviceRow>({
       )}
       <DataTable.Body
         loading={isLoading}
+        loadingRegion={loadingRegion}
         skeletonRows={skeletonRows}
         emptyState={emptyState}
         emptyMessage={emptyState ? undefined : emptyMessage}

package/src/components/features/logs/logs-table-view.tsx

@@ -432,13 +432,15 @@ const PENDING_FILTER = { options: [] as never[], pending: true };
 export interface LogsTableSkeletonProps {
   /** The Log ID header in its inert form, so the icon does not arrive with the data. */
   logIdHeader?: ReactNode;
+  /** The loading state announces itself ("Loading results"). `false` inside another loading region. Default `true`. */
+  region?: boolean;
 }
 
 /**
  * Loading fallback of the logs table: an empty `DataTable` with the table's own
  * columns, so the header row and the column widths match the loaded table.
  */
-export function LogsTableSkeleton({ logIdHeader }: LogsTableSkeletonProps) {
+export function LogsTableSkeleton({ logIdHeader, region = true }: LogsTableSkeletonProps) {
   const columns = useMemo<ColumnDef<unknown>[]>(() => {
     const multiSelect = multiSelectFor<unknown>();
     return [
@@ -503,7 +505,7 @@ export function LogsTableSkeleton({ logIdHeader }: LogsTableSkeletonProps) {
   return (
     <DataTable table={table}>
       <DataTable.Header stickyHeader stickyHeaderOffset="top-[96px]" />
-      <DataTable.Body loading={true} skeletonRows={10} emptyMessage="" rowClassName="mb-1" />
+      <DataTable.Body loading={true} loadingRegion={region} skeletonRows={10} emptyMessage="" rowClassName="mb-1" />
     </DataTable>
   );
 }

package/src/components/features/model-token-rates.tsx

@@ -19,10 +19,11 @@ import { AlertTriangleIcon } from '../icons-v2-generated/interface/alert-triangl
 import { Refresh02VrIcon } from '../icons-v2-generated/media-playback/refresh-02-vr-icon';
 import { QuestionCircleIcon } from '../icons-v2-generated/signs-and-symbols/question-circle-icon';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Autocomplete, type AutocompleteOption } from '../ui/autocomplete';
 import { Button } from '../ui/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../ui/dropdown-menu';
-import { Skeleton } from '../ui/skeleton';
 import { Slider } from '../ui/slider';
 import { TabSelector } from '../ui/tab-selector';
 import { PushButtonSelector } from './push-button-selector';
@@ -347,31 +348,36 @@ export function ModelTokenRatesUnavailable({ className }: { className?: string }
 }
 
 /** The table's loading footprint: the provider tabs, the header and rows of the boxes the loaded rows use. */
-export function ModelTokenRatesSkeleton() {
+export function ModelTokenRatesSkeleton({
+  region = true,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+} = {}) {
   const cells = (
     <>
       <div className="flex-1" />
-      <Skeleton className="h-4 w-12" />
-      <Skeleton className="h-4 w-12" />
+      <UnifiedSkeleton className="h-4 w-12" />
+      <UnifiedSkeleton className="h-4 w-12" />
     </>
   );
   return (
-    <div aria-busy="true" className="min-h-0 flex-1 overflow-hidden">
+    <LoadingRegion label="Loading the model token rates" announce={region} className="min-h-0 flex-1 overflow-hidden">
       <div className={cn('border-b border-ods-border py-[var(--spacing-system-xs)]', PAD_X)}>
-        <Skeleton className={TABS_SKELETON_CLASS} />
+        <UnifiedSkeleton className={TABS_SKELETON_CLASS} />
       </div>
       <div className={cn(ROW, PAD_X, 'py-[var(--spacing-system-xs)]')}>
-        <Skeleton className="h-4 w-14" />
+        <UnifiedSkeleton className="h-4 w-14" />
         {cells}
       </div>
       {Array.from({ length: TABLE_SKELETON_ROWS }, (_, index) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: identical placeholder rows
         <div key={index} className={cn(ROW, PAD_X, 'py-[var(--spacing-system-xxs)]')}>
-          <Skeleton className="h-4 w-36" />
+          <UnifiedSkeleton className="h-4 w-36" />
           {cells}
         </div>
       ))}
-    </div>
+    </LoadingRegion>
   );
 }
 
@@ -418,15 +424,8 @@ export const MODEL_TOKEN_EXCHANGE_RANGE = { min: 1_000_000, max: 50_000_000, ste
 /** The provider rows drawn while the providers load: as many as OpenFrame has had. */
 const PROVIDER_PLACEHOLDERS = ['loading-1', 'loading-2', 'loading-3'] as const;
 
-/** A line of the surrounding text's own height, as a bar: what a figure is while it loads. */
-function Bar({ className }: { className: string }) {
-  return (
-    <span
-      aria-hidden
-      className={cn('inline-block h-[0.8lh] animate-pulse rounded bg-ods-border align-middle', className)}
-    />
-  );
-}
+/** A figure while it loads: a bar of the surrounding text's own line, inside its phrasing span. */
+const FIGURE_SKELETON_CLASS = 'inline-block h-[0.8lh] rounded align-middle';
 
 /** A model as a picker option: its name, its provider under it, the provider's mark beside it. */
 function modelOption(rate: ModelTokenRate): AutocompleteOption<string> {
@@ -475,10 +474,14 @@ function ExchangeFigure({
       <span
         className={cn('whitespace-nowrap tabular-nums text-ods-text-primary', size === 'hero' ? 'text-h1' : 'text-h2')}
       >
-        {loading ? <Bar className="w-20" /> : figure}
+        {loading ? <UnifiedSkeleton as="span" aria-hidden className={cn(FIGURE_SKELETON_CLASS, 'w-20')} /> : figure}
       </span>
       <span className="min-h-[2lh] text-ods-text-secondary text-h4">
-        {loading ? <Bar className="w-full max-w-xs" /> : words}
+        {loading ? (
+          <UnifiedSkeleton as="span" aria-hidden className={cn(FIGURE_SKELETON_CLASS, 'w-full max-w-xs')} />
+        ) : (
+          words
+        )}
       </span>
     </div>
   );
@@ -593,7 +596,7 @@ export function ModelTokenExchange({
               ? PROVIDER_PLACEHOLDERS.map(id => ({
                   id,
                   name: '\u00a0',
-                  icon: <Skeleton className="size-8 rounded" />,
+                  icon: <UnifiedSkeleton className="size-8 rounded" />,
                   disabled: true,
                 }))
               : providers.map(providerType => {
@@ -655,7 +658,7 @@ export function ModelTokenExchange({
         >
           <span className="min-h-[2lh] text-ods-text-secondary text-h4">
             {loading || !rate ? (
-              <Bar className="w-full max-w-xs" />
+              <UnifiedSkeleton as="span" aria-hidden className={cn(FIGURE_SKELETON_CLASS, 'w-full max-w-xs')} />
             ) : (
               copy.charge.so(balancePrice ?? copy.buy.tokens(tokens), model)
             )}
@@ -663,7 +666,7 @@ export function ModelTokenExchange({
           {/* The number is the headline, alone on its line: a longer number never pushes its unit to a new line and the box taller. */}
           <span className="min-h-[1lh] whitespace-nowrap tabular-nums text-ods-text-primary text-h1">
             {loading || !rate ? (
-              <Bar className="w-40" />
+              <UnifiedSkeleton as="span" aria-hidden className={cn(FIGURE_SKELETON_CLASS, 'w-40')} />
             ) : (
               formatTokenAmount(tokensForBalance(balance, rate.inputTokenRate))
             )}
@@ -671,7 +674,7 @@ export function ModelTokenExchange({
           <span className="min-h-[1lh] text-ods-text-primary text-h3">{copy.charge.read}</span>
           <span className="min-h-[1lh] text-ods-text-secondary text-h4">
             {loading || !rate ? (
-              <Bar className="w-48" />
+              <UnifiedSkeleton as="span" aria-hidden className={cn(FIGURE_SKELETON_CLASS, 'w-48')} />
             ) : (
               copy.charge.orWritten(formatTokenAmount(tokensForBalance(balance, rate.outputTokenRate)))
             )}

package/src/components/features/notifications/index.ts

@@ -2,8 +2,8 @@ export { NotificationsProvider, useNotifications, useOptionalNotifications } fro
 export type { NotificationsProviderProps, NotificationsActions } from './notifications-context';
 export { NotificationDrawer } from './notification-drawer';
 export type { NotificationDrawerProps } from './notification-drawer';
-export { NotificationTile } from './notification-tile';
-export type { NotificationTileProps } from './notification-tile';
+export { NotificationTile, NotificationTileSkeleton } from './notification-tile';
+export type { NotificationTileProps, NotificationTileSkeletonProps } from './notification-tile';
 export { NotificationPopups } from './notification-popups';
 export type { NotificationPopupsProps, NotificationPopupsPosition } from './notification-popups';
 export { ApprovalRequestNotificationTile } from './approval-request-notification-tile';

package/src/components/features/notifications/notification-drawer.tsx

@@ -5,6 +5,8 @@ import { useNotificationPermission } from '../../../hooks/ui';
 import { cn } from '../../../utils/cn';
 import { ClockHistoryIcon, ArrowRightUpIcon } from '../../icons-v2-generated';
 import { BellOffIcon } from '../../icons-v2-generated/interface/bell-off-icon';
+import { LoadingRegion } from '../../loading/loading-region';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { useAppLayoutDrawerContainer } from '../../navigation/app-layout-context';
 import { AppLayoutDrawer, AppLayoutDrawerContent } from '../../navigation/app-layout-drawer';
 import { SplitButton } from '../../ui/button';
@@ -231,16 +233,11 @@ function DrawerScrollList({
 
 function DrawerLoadingTiles() {
   return (
-    <>
-      <div
-        aria-hidden="true"
-        className="h-16 w-full shrink-0 animate-pulse rounded-md border border-ods-border bg-ods-card"
-      />
-      <div
-        aria-hidden="true"
-        className="h-16 w-full shrink-0 animate-pulse rounded-md border border-ods-border bg-ods-card"
-      />
-    </>
+    // `contents`: the tiles stay the list's own items; the region adds the one announcement.
+    <LoadingRegion label="Loading more notifications" className="contents">
+      <UnifiedSkeleton className="h-16 w-full shrink-0 rounded-md border border-ods-border" />
+      <UnifiedSkeleton className="h-16 w-full shrink-0 rounded-md border border-ods-border" />
+    </LoadingRegion>
   );
 }
 

package/src/components/features/notifications/notification-tile.tsx

@@ -6,6 +6,7 @@ import { cn } from '../../../utils/cn';
 import { formatTicketRelativeTime } from '../../../utils/date-utils';
 import { CheckCircleIcon } from '../../icons-v2-generated/signs-and-symbols/check-circle-icon';
 import { XmarkIcon } from '../../icons-v2-generated/signs-and-symbols/xmark-icon';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { dotColorByVariant, progressColorByVariant as toastProgressColorByVariant } from '../../ui/toaster';
 import type { Notification, NotificationSeverity, NotificationVariant } from './types';
 
@@ -268,3 +269,59 @@ export function NotificationTile({
     </output>
   );
 }
+
+export interface NotificationTileSkeletonProps {
+  /** `approval`: the approval tile, which adds a row of small buttons under the body. */
+  variant?: 'default' | 'approval';
+  className?: string;
+}
+
+/** One row of the tile: the LINE BOX of the text it stands in for, with its bar centred inside. */
+function TileLine({ box, bar, width }: { box: string; bar: string; width: string }) {
+  return (
+    <span className={cn('flex items-center', box)}>
+      <UnifiedSkeleton as="span" width={width} className={bar} />
+    </span>
+  );
+}
+
+/**
+ * A tile while its notification is read, box for box: the tile's frame and pad,
+ * the header (icon, type, time, trailing control), a one-line title over a
+ * TWO-line description (a host that rotates tiles in one cell is as tall as its
+ * tallest tile), and for `approval` the button row. Each row is its text's line
+ * box (h5/h6 20px, the h4 title 24px), so a host panel sizes itself against the
+ * height it will have when loaded.
+ */
+export function NotificationTileSkeleton({ variant = 'default', className }: NotificationTileSkeletonProps) {
+  return (
+    <output
+      aria-hidden
+      className={cn(
+        'relative block w-full shrink-0 overflow-hidden rounded-md border border-ods-border bg-ods-card',
+        className,
+      )}
+    >
+      <span className="relative flex flex-col gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]">
+        <span className="flex items-center gap-[var(--spacing-system-xs)]">
+          <TileLine box="size-4" width="1rem" bar="h-4 rounded-[2px]" />
+          <TileLine box="h-5" width="7rem" bar="h-3 rounded" />
+          <span className="min-w-0 flex-1" />
+          <TileLine box="h-5" width="3.5rem" bar="h-3 rounded" />
+          <TileLine box="size-4" width="1rem" bar="h-4 rounded-full" />
+        </span>
+        <span className="grid min-w-0 grid-cols-1">
+          <TileLine box="h-6" width="60%" bar="h-4 rounded" />
+          <TileLine box="h-5" width="88%" bar="h-3 rounded" />
+          <TileLine box="h-5" width="52%" bar="h-3 rounded" />
+        </span>
+        {variant === 'approval' && (
+          <span className="flex w-full items-center gap-[var(--spacing-system-xs)]">
+            <TileLine box="h-6 md:h-8" width="5.5rem" bar="h-6 rounded md:h-8" />
+            <TileLine box="h-6 md:h-8" width="4.5rem" bar="h-6 rounded md:h-8" />
+          </span>
+        )}
+      </span>
+    </output>
+  );
+}

package/src/components/features/policies/policy-summary-cards.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { formatRelativeTimeFrom } from '../../../utils/date-utils';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { DashboardInfoCard } from '../../ui/dashboard-info-card';
-import { Skeleton } from '../../ui/skeleton';
 import type { PolicySummaryStats } from './compute-policy-summary';
 
 /** What a card shows when there is no value to show. */
@@ -31,7 +31,7 @@ export function PolicySummaryCards({ summary, isLoading = false, hasData = true,
       {isLoading ? (
         // `h-16 content-md:h-[104px]` is `DashboardInfoCard`'s own height, so the
         // grid does not jump when the real cards replace the placeholders.
-        CARD_SKELETON_KEYS.map(key => <Skeleton key={key} className="h-16 w-full content-md:h-[104px]" />)
+        CARD_SKELETON_KEYS.map(key => <UnifiedSkeleton key={key} className="h-16 w-full content-md:h-[104px]" />)
       ) : (
         <>
           <DashboardInfoCard title="Total Policies" value={hasData ? summary.totalPolicies : EMPTY_VALUE} />

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

@@ -4,6 +4,7 @@ import { Check } from 'lucide-react';
 import type React from 'react';
 import { useEffect, useRef } from 'react';
 import { UnifiedSkeleton } from '../loading';
+import { LoadingRegion } from '../loading/loading-region';
 import { Badge, Input } from '../ui';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 
@@ -78,32 +79,40 @@ interface PushButtonSelectorProps<Id extends SelectableOptionId = string> {
   footer?: React.ReactNode;
 }
 
-// Composed from the app-wide UnifiedSkeleton system (components/loading) —
-// the same base every other loading surface uses (bg-ods-skeleton pulse,
-// prefers-reduced-motion support, role="status" a11y). Each skeleton row
+// Composed from the app-wide UnifiedSkeleton system (components/loading),
+// announced once by its LoadingRegion. Each skeleton row
 // mirrors a LOADED option row exactly (bg-ods-bg card, p-4, icon + two
 // 20px-tall text lines + selection box) so the list never jumps on load.
-function PushButtonSelectorSkeleton({ count = 3, hasTitle }: { count?: number; hasTitle?: boolean }) {
+function PushButtonSelectorSkeleton({
+  region = true,
+  count = 3,
+  hasTitle,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+  count?: number;
+  hasTitle?: boolean;
+}) {
   return (
-    <div className="space-y-3" role="status" aria-label="Loading options">
-      {hasTitle && <UnifiedSkeleton className="h-5 w-20" aria-label="Loading title" />}
+    <LoadingRegion label="Loading options" announce={region} className="space-y-3">
+      {hasTitle && <UnifiedSkeleton className="h-5 w-20" />}
       <div className="space-y-3">
         {Array.from({ length: count }, (_, i) => (
           <div key={i} className="rounded-lg border border-ods-border bg-ods-bg p-4">
             <div className="flex items-center justify-between gap-4">
               <div className="flex items-center gap-3">
-                <UnifiedSkeleton className="h-8 w-8" aria-label="Loading icon" />
+                <UnifiedSkeleton className="h-8 w-8" />
                 <div>
-                  <UnifiedSkeleton variant="text" className="mb-2 h-4 w-24" aria-label="Loading name" />
-                  <UnifiedSkeleton variant="text" className="h-4 w-36" aria-label="Loading description" />
+                  <UnifiedSkeleton variant="text" className="mb-2 h-4 w-24" />
+                  <UnifiedSkeleton variant="text" className="h-4 w-36" />
                 </div>
               </div>
-              <UnifiedSkeleton className="h-6 w-6" aria-label="Loading selection state" />
+              <UnifiedSkeleton className="h-6 w-6" />
             </div>
           </div>
         ))}
       </div>
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/components/features/remote-session/remote-desktop-view.tsx

@@ -11,9 +11,10 @@ import {
   Settings01Icon,
 } from '../../icons-v2-generated';
 import { PageLayout } from '../../layout/page-layout';
+import { LoadingRegion } from '../../loading/loading-region';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { ActionsMenuDropdown, type ActionsMenuGroup } from '../../ui/actions-menu';
 import { Button } from '../../ui/button/button';
-import { Skeleton } from '../../ui/skeleton';
 import { TruncateText } from '../../ui/truncate-text';
 import { RemoteDesktopFullscreenToolbar } from './remote-desktop-fullscreen-toolbar';
 
@@ -206,27 +207,36 @@ export function RemoteDesktopView({
 }
 
 /** The page while the device is still loading: the header bar as placeholders over an empty screen. */
-export function RemoteDesktopViewSkeleton({ onBack }: Pick<RemoteDesktopViewProps, 'onBack'>) {
+export function RemoteDesktopViewSkeleton({
+  onBack,
+  region = true,
+}: Pick<RemoteDesktopViewProps, 'onBack'> & {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+}) {
   return (
     <PageLayout className={PAGE_CLASS} backButton={onBack ? { label: 'Back', onClick: onBack } : undefined}>
-      <div className={CONTROLS_BAR_CLASS}>
-        <div className={CONTROLS_ROW_CLASS}>
-          <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
-            <Skeleton className="h-9 w-9 flex-shrink-0 rounded-md" />
-            <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-              <Skeleton className="h-5 w-48" />
-              <Skeleton className="h-4 w-36" />
+      {/* `contents`: the page's own children stay its layout items; the region adds the one announcement. */}
+      <LoadingRegion label="Loading the remote session" announce={region} className="contents">
+        <div className={CONTROLS_BAR_CLASS}>
+          <div className={CONTROLS_ROW_CLASS}>
+            <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
+              <UnifiedSkeleton className="h-9 w-9 flex-shrink-0 rounded-md" />
+              <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+                <UnifiedSkeleton className="h-5 w-48" />
+                <UnifiedSkeleton className="h-4 w-36" />
+              </div>
+            </div>
+            <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
+              <UnifiedSkeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
+              <UnifiedSkeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
+              <UnifiedSkeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
             </div>
-          </div>
-          <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
-            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
-            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
-            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
           </div>
         </div>
-      </div>
 
-      <div className="min-h-0 min-w-0 flex-1 rounded-lg bg-black" />
+        <div className="min-h-0 min-w-0 flex-1 rounded-lg bg-black" />
+      </LoadingRegion>
     </PageLayout>
   );
 }

package/src/components/features/waitlist-form.tsx

@@ -14,6 +14,7 @@ import type { FormRescueDefinition } from '../../utils/form-rescue';
 import { hasGenericEmailDomain } from '../../utils/generic-domain-utils';
 import type { HumanitySignals } from '../../utils/humanity-signals';
 import { OpenframeLogoIcon } from '../icons-v2-generated/logos/openframe-logo-icon';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button';
 import { CheckboxBlock } from '../ui/checkbox-block';
 import { HoneypotField } from '../ui/honeypot-field';
@@ -201,16 +202,16 @@ export function WaitlistForm({
         )}
       >
         {/* Email input skeleton */}
-        <div className="h-12 w-full animate-pulse rounded-[6px] border border-ods-border bg-ods-card" />
+        <UnifiedSkeleton className="h-12 w-full rounded-[6px] border border-ods-border" />
         {/* Phone input skeleton */}
         <div className="flex w-full gap-[var(--spacing-system-xs)]">
-          <div className="h-12 w-[130px] shrink-0 animate-pulse rounded-[6px] border border-ods-border bg-ods-card" />
-          <div className="h-12 flex-1 animate-pulse rounded-[6px] border border-ods-border bg-ods-card" />
+          <UnifiedSkeleton className="h-12 w-[130px] shrink-0 rounded-[6px] border border-ods-border" />
+          <UnifiedSkeleton className="h-12 flex-1 rounded-[6px] border border-ods-border" />
         </div>
         {/* Disclaimer + button skeleton */}
         <div className="flex w-full flex-col items-end gap-[var(--spacing-system-m)]">
-          <div className="w-full animate-pulse rounded-[6px] border border-ods-border bg-ods-bg px-4 py-6" />
-          <div className="h-12 w-[200px] animate-pulse rounded-[6px] border border-ods-border bg-ods-card" />
+          <UnifiedSkeleton className="h-auto w-full rounded-[6px] border border-ods-border px-4 py-6" />
+          <UnifiedSkeleton className="h-12 w-[200px] rounded-[6px] border border-ods-border" />
         </div>
       </div>
     );

package/src/components/help-center-pages/download-apps-page.tsx

@@ -59,6 +59,7 @@ import { WindowsLogoGreyIcon } from '../icons-v2-generated/brand-logos/windows-l
 import { Download01Icon } from '../icons-v2-generated/interface/download-01-icon';
 import { PageShell } from '../layout/article-detail-layout';
 import { PageLayout } from '../layout/page-layout';
+import { LoadingRegion } from '../loading/loading-region';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button/button';
 import { LoadError } from '../ui/error-state';
@@ -248,7 +249,7 @@ function WebCard({ web }: { web: DownloadAppsWebOption }) {
 /** A section's cards while the server's answer loads: the same grid and card frame, a button's box in each. */
 function CardsSkeleton({ label }: { label: string }) {
   return (
-    <div className={CARDS_GRID_CLASS} aria-busy="true" aria-label={label}>
+    <LoadingRegion label={label} className={CARDS_GRID_CLASS}>
       {[0, 1].map(card => (
         <div key={card} className={CARD_CLASS}>
           <UnifiedSkeleton className="h-6 w-32 rounded" />
@@ -256,7 +257,7 @@ function CardsSkeleton({ label }: { label: string }) {
           <UnifiedSkeleton className="h-14 w-full rounded-md" />
         </div>
       ))}
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/components/help-center-pages/trust-center-page.tsx

@@ -376,10 +376,14 @@ export function TrustCenterPageSkeleton({
   backButton = false,
   title = TRUST_CENTER_TITLE,
   subtitle = TRUST_CENTER_TAGLINE,
-}: Pick<TrustCenterPageProps, 'shell' | 'backButton' | 'title' | 'subtitle'>) {
+  region = true,
+}: Pick<TrustCenterPageProps, 'shell' | 'backButton' | 'title' | 'subtitle'> & {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+}) {
   return (
     <TrustCenterChrome shell={shell} title={title} subtitle={subtitle} backButton={backButton}>
-      <TrustCenterSkeleton />
+      <TrustCenterSkeleton region={region} />
     </TrustCenterChrome>
   );
 }

package/src/components/help-center-pages/trust-center-sections.tsx

@@ -46,6 +46,7 @@ import { ShieldCheckIcon } from '../icons-v2-generated/security/shield-check-ico
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
 import { SECTION_HEADING_CLASS } from '../layout/page-heading';
 import { ListEmptyState } from '../list-empty-state';
+import { LoadingRegion } from '../loading/loading-region';
 import { TextSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button/button';
 import { ComplianceLogo } from '../ui/compliance-badge';
@@ -666,7 +667,12 @@ function SectionRailSkeleton() {
  * the content replaces it. The status row, then Compliance, Controls and
  * Documents (what fills the first screens), beside the section rail.
  */
-export function TrustCenterSkeleton() {
+export function TrustCenterSkeleton({
+  region = true,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+} = {}) {
   return (
     <>
       <div className={TRUST_STATUS_ROW_CLASS} aria-hidden="true">
@@ -683,7 +689,7 @@ export function TrustCenterSkeleton() {
           <TextSkeleton.Body className="w-44" />
         </div>
       </div>
-      <div className={TRUST_BODY_GRID_CLASS} aria-busy="true" aria-label="Loading the trust center">
+      <LoadingRegion label="Loading the trust center" announce={region} className={TRUST_BODY_GRID_CLASS}>
         <div className={TRUST_SECTIONS_COLUMN_CLASS}>
           <SkeletonSection id="compliance">
             <StackedRowsPanel rows={skeletonRows(3, { mark: 'logo', action: 'badge' })} />
@@ -698,7 +704,7 @@ export function TrustCenterSkeleton() {
         <aside className="hidden content-lg:block" aria-hidden="true">
           <SectionRailSkeleton />
         </aside>
-      </div>
+      </LoadingRegion>
     </>
   );
 }

package/src/components/index.ts

@@ -18,7 +18,6 @@ export * from './comment-card';
 export * from './comment-composer';
 export * from './comment-thread';
 export * from './content-loading-container';
-export * from './dynamic-skeleton';
 export * from './empty-state';
 export * from './list-empty-state';
 export * from './faq-accordion';
@@ -57,7 +56,6 @@ export * from './social-icon-row';
 export * from './user-display';
 export * from './vendor-display-button';
 export * from './vendor-icon';
-export * from './vendor-page-skeleton';
 export * from './vendor-tag';
 export * from './why-it-matters';
 export * from './yes-no-display';

package/src/components/layout/title-block.tsx

@@ -84,6 +84,7 @@
 import type React from 'react';
 import { useIsTruncated } from '../../hooks/ui/use-is-truncated';
 import { cn } from '../../utils/cn';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import type { ActionsMenuGroup } from '../ui/actions-menu';
 import { EntityImage } from '../ui/entity-image';
 import { FloatingTooltip } from '../ui/floating-tooltip';
@@ -159,21 +160,14 @@ export interface TitleBlockProps {
 }
 
 /**
- * Inline text skeleton — used only in `loading` mode, placed directly inside the real
- * `h1`/`p`. It is a single `inline-block` bar whose height is intentionally SHORTER than the
- * typography line-height, and it uses the default baseline alignment. That way the element's
+ * The inline text skeleton, used only in `loading` mode, placed directly inside the real
+ * `h1`/`p`: a single `inline-block` `UnifiedSkeleton` span whose height is intentionally SHORTER
+ * than the typography line-height, on the default baseline alignment. That way the element's
  * own line-box STRUT (text-h2 → 40px, text-h6 → 20px) sets the height exactly as it would for
- * real text — the bar fits within the ascent and never inflates the line. So a loading header
+ * real text: the bar fits within the ascent and never inflates the line. So a loading header
  * is pixel-identical in height to the loaded one. Phrasing-valid (`span` only).
  */
-function TitleTextSkeleton({ widthClass, heightClass }: { widthClass: string; heightClass: string }) {
-  return (
-    <span
-      aria-hidden
-      className={cn('inline-block max-w-full animate-pulse rounded-md bg-ods-border', widthClass, heightClass)}
-    />
-  );
-}
+const TITLE_TEXT_SKELETON_CLASS = 'inline-block max-w-full rounded-md';
 
 /**
  * Bar geometry per title size, following the ODS type scale across breakpoints
@@ -184,7 +178,7 @@ function TitleTextSkeleton({ widthClass, heightClass }: { widthClass: string; he
  * 32/40 from tablet up. `text-h1` scales at both breakpoints (40 → 48 → 56), so
  * its bar does too — reusing the h2 bar there would leave a stamp-sized smudge
  * inside a 64px line. Heights stay well under the line box's ascent on purpose;
- * see `TitleTextSkeleton` for why that is what keeps the header height honest.
+ * see `TITLE_TEXT_SKELETON_CLASS` for why that is what keeps the header height honest.
  */
 const TITLE_SKELETON_SIZE = {
   h1: { width: 'w-56 content-md:w-80 content-lg:w-96', height: 'h-7 content-md:h-8 content-lg:h-9' },
@@ -226,7 +220,11 @@ export function TitleBlock({
     loading ? null : subtitle,
   );
   const titleNode = loading ? (
-    <TitleTextSkeleton widthClass={skeletonSize.width} heightClass={skeletonSize.height} />
+    <UnifiedSkeleton
+      as="span"
+      aria-hidden
+      className={cn(TITLE_TEXT_SKELETON_CLASS, skeletonSize.width, skeletonSize.height)}
+    />
   ) : (
     title
   );
@@ -307,7 +305,11 @@ export function TitleBlock({
                     aria-hidden={!loading && !subtitle ? true : undefined}
                   >
                     {loading ? (
-                      <TitleTextSkeleton widthClass="w-28 content-md:w-36" heightClass="h-2.5 content-md:h-3" />
+                      <UnifiedSkeleton
+                        as="span"
+                        aria-hidden
+                        className={cn(TITLE_TEXT_SKELETON_CLASS, 'h-2.5 w-28 content-md:h-3 content-md:w-36')}
+                      />
                     ) : (
                       subtitle || '\u00A0'
                     )}