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

package/src/components/features/capability-explorer.tsx

@@ -6,7 +6,8 @@ import { cn } from '../../utils/cn';
 import { EntityIcon } from '../icon-display';
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
-import { Skeleton } from '../ui/skeleton';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { SnapCarousel, SnapCarouselControlsSkeleton } from '../ui/snap-carousel';
 import { TruncateText } from '../ui/truncate-text';
 
@@ -167,25 +168,28 @@ function Example({
   );
 }
 
-/** A text placeholder in its line's own box (`text-h…` on the line), so a placeholder line is the loaded line's height. */
-function LineBar({ line, width }: { line: string; width: string }) {
-  return (
-    <div className={line}>
-      <span className={cn('inline-block h-[0.7em] animate-pulse rounded bg-ods-border align-middle', width)} />
-    </div>
-  );
-}
+/**
+ * A text placeholder in its line's own box (`text-h…` on the line, the bar inline in it), so a
+ * placeholder line is the loaded line's height.
+ */
+const LINE_SKELETON_CLASS = 'inline-block h-[0.7em] rounded align-middle';
 
 /** The example's two turns, in the loaded example's own box. */
 function ExampleSkeleton({ className }: { className?: string }) {
   const turn = (first: boolean) => (
     <div className={cn('flex min-w-0 gap-2.5', !first && 'border-t border-ods-border pt-3')}>
-      <Skeleton className="size-6 shrink-0 rounded-full" />
+      <UnifiedSkeleton className="size-6 shrink-0 rounded-full" />
       <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <LineBar line="text-h6" width="w-28" />
+        <div className="text-h6">
+          <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-28')} />
+        </div>
         <div className="min-h-[2lh] text-h4">
-          <LineBar line="text-h4" width="w-full" />
-          <LineBar line="text-h4" width="w-2/3" />
+          <div className="text-h4">
+            <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-full')} />
+          </div>
+          <div className="text-h4">
+            <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-2/3')} />
+          </div>
         </div>
       </div>
     </div>
@@ -207,11 +211,15 @@ function ExampleSkeleton({ className }: { className?: string }) {
 function JobHeadSkeleton() {
   return (
     <>
-      <Skeleton className="size-9 shrink-0 rounded-lg" />
+      <UnifiedSkeleton className="size-9 shrink-0 rounded-lg" />
       <div className="flex min-w-0 flex-1 flex-col">
-        <LineBar line="text-h4" width="w-32" />
+        <div className="text-h4">
+          <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-32')} />
+        </div>
         <div className="mt-0.5">
-          <LineBar line="text-h6" width="w-40" />
+          <div className="text-h6">
+            <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-40')} />
+          </div>
         </div>
       </div>
     </>
@@ -225,9 +233,18 @@ function JobHeadSkeleton() {
  * first card over the carousel's controls. Every box is the loaded one's, so
  * nothing moves when the jobs arrive.
  */
-export function CapabilityExplorerSkeleton({ className, count = 8 }: { className?: string; count?: number }) {
+export function CapabilityExplorerSkeleton({
+  region = true,
+  className,
+  count = 8,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+  className?: string;
+  count?: number;
+}) {
   return (
-    <div className={className} aria-hidden>
+    <LoadingRegion label="Loading capabilities" announce={region} className={className}>
       <div className="content-lg:hidden">
         <div className="flex gap-[var(--spacing-system-sf)] overflow-hidden">
           <div
@@ -240,10 +257,14 @@ export function CapabilityExplorerSkeleton({ className, count = 8 }: { className
               <JobHeadSkeleton />
             </div>
             <div className="min-h-[3lh] text-h6">
-              <LineBar line="text-h6" width="w-full" />
-              <LineBar line="text-h6" width="w-5/6" />
+              <div className="text-h6">
+                <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-full')} />
+              </div>
+              <div className="text-h6">
+                <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-5/6')} />
+              </div>
             </div>
-            <Skeleton className="h-[300px] shrink-0 rounded-lg" />
+            <UnifiedSkeleton className="h-[300px] shrink-0 rounded-lg" />
             <ExampleSkeleton className="shrink-0" />
           </div>
         </div>
@@ -273,36 +294,46 @@ export function CapabilityExplorerSkeleton({ className, count = 8 }: { className
           <div className={cn('grid shrink-0 grid-cols-[minmax(0,1fr)_minmax(0,380px)] gap-8', PANEL_TOP_HEIGHT_CLASS)}>
             <div className="flex min-w-0 flex-col overflow-hidden">
               <div className="mb-2">
-                <LineBar line="text-h2" width="w-64" />
+                <div className="text-h2">
+                  <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-64')} />
+                </div>
               </div>
               <div className="min-h-[3lh] text-h4">
-                <LineBar line="text-h4" width="w-full" />
-                <LineBar line="text-h4" width="w-4/5" />
+                <div className="text-h4">
+                  <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-full')} />
+                </div>
+                <div className="text-h4">
+                  <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-4/5')} />
+                </div>
               </div>
               <div className="mt-auto grid grid-cols-1 gap-2">
                 {[0, 1, 2].map(i => (
                   <div key={i} className="flex min-w-0 items-center gap-2.5">
-                    <Skeleton className="size-4 shrink-0 rounded-full" />
-                    <LineBar line="text-h6" width={i === 1 ? 'w-56' : 'w-48'} />
+                    <UnifiedSkeleton className="size-4 shrink-0 rounded-full" />
+                    <div className="text-h6">
+                      <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, i === 1 ? 'w-56' : 'w-48')} />
+                    </div>
                   </div>
                 ))}
               </div>
             </div>
             <ExampleSkeleton />
           </div>
-          <Skeleton className={cn('shrink-0 rounded-xl', PANEL_SCREEN_HEIGHT_CLASS)} />
+          <UnifiedSkeleton className={cn('shrink-0 rounded-xl', PANEL_SCREEN_HEIGHT_CLASS)} />
           <div
             className={cn(
               'flex min-w-0 shrink-0 items-center gap-[var(--spacing-system-sf)]',
               PANEL_FOOTER_HEIGHT_CLASS,
             )}
           >
-            <LineBar line="text-h5" width="w-16" />
-            <Skeleton className="h-7 w-36 rounded-md" />
+            <div className="text-h5">
+              <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-16')} />
+            </div>
+            <UnifiedSkeleton className="h-7 w-36 rounded-md" />
           </div>
         </div>
       </div>
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/components/features/devices/device-selector/device-selector-skeleton.tsx

@@ -10,7 +10,13 @@ const NO_DEVICES: never[] = [];
  * whichever the caller hands its real `DeviceSelector` it must hand this one too,
  * or the two disagree on how tall the block is.
  */
-type DeviceSelectorSkeletonProps = Pick<DeviceSelectorProps, 'showSelectionModeRadio' | 'singleSelect' | 'hideColumns'>;
+type DeviceSelectorSkeletonProps = Pick<
+  DeviceSelectorProps,
+  'showSelectionModeRadio' | 'singleSelect' | 'hideColumns'
+> & {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+};
 
 /**
  * Suspense fallback for a `DeviceSelector` whose devices come from a suspending
@@ -27,6 +33,6 @@ type DeviceSelectorSkeletonProps = Pick<DeviceSelectorProps, 'showSelectionModeR
  * stands in for, and everything below it jumped down the moment the devices
  * landed.
  */
-export function DeviceSelectorSkeleton(props: DeviceSelectorSkeletonProps) {
-  return <DeviceSelector {...props} devices={NO_DEVICES} loading disabled />;
+export function DeviceSelectorSkeleton({ region = true, ...props }: DeviceSelectorSkeletonProps) {
+  return <DeviceSelector {...props} devices={NO_DEVICES} loading loadingRegion={region} disabled />;
 }

package/src/components/features/devices/device-selector/device-selector.tsx

@@ -94,6 +94,7 @@ function CustomerCell({ device }: { device: DeviceRow }) {
 export function DeviceSelector<T extends DeviceRow = DeviceRow>({
   devices,
   loading,
+  loadingRegion,
   selectedIds: selectedIdsProp,
   onSelectionChange: onSelectionChangeProp,
   getDeviceKey: getDeviceKeyProp,
@@ -708,6 +709,7 @@ export function DeviceSelector<T extends DeviceRow = DeviceRow>({
       )}
       <DataTable.Body
         loading={loading}
+        loadingRegion={loadingRegion}
         skeletonRows={8}
         emptyMessage={
           isCriteria

package/src/components/features/devices/device-selector/device-selector.types.ts

@@ -68,6 +68,8 @@ export interface DeviceSelectorProps<T extends DeviceRow = DeviceRow> {
   devices: T[];
   /** Whether the device list is loading. */
   loading: boolean;
+  /** The loading state announces itself ("Loading results"). `false` inside another loading region. Default `true`. */
+  loadingRegion?: boolean;
   /**
    * Currently selected device keys. Optional so a skeleton can render the real
    * picker with nothing selected, the component falls back to an empty set and

package/src/components/features/devices/devices-grid.tsx

@@ -16,6 +16,8 @@ export interface DevicesGridProps<T extends DeviceRow = DeviceRow> {
   isFetchingNextPage?: boolean;
   sentinelRef?: React.RefObject<HTMLDivElement | null>;
   emptyMessage?: string;
+  /** The loading state announces itself ("Loading devices"). `false` inside another loading region. Default `true`. */
+  loadingRegion?: boolean;
 }
 
 export function DevicesGrid<T extends DeviceRow = DeviceRow>({
@@ -25,6 +27,7 @@ export function DevicesGrid<T extends DeviceRow = DeviceRow>({
   isFetchingNextPage,
   sentinelRef,
   emptyMessage = 'No devices found. Try adjusting your search or filters.',
+  loadingRegion = true,
 }: DevicesGridProps<T>) {
   const router = useRouter();
   const { getDeviceHref } = useDevicesViewConfig();
@@ -37,7 +40,7 @@ export function DevicesGrid<T extends DeviceRow = DeviceRow>({
   return (
     <div className="space-y-4">
       {isLoading && devices.length === 0 ? (
-        <DeviceCardSkeletonGrid count={12} />
+        <DeviceCardSkeletonGrid count={12} region={loadingRegion} />
       ) : devices.length === 0 ? (
         <div className="flex h-64 items-center justify-center rounded-[6px] border border-ods-border bg-ods-card">
           <p className="text-ods-text-secondary">{emptyMessage}</p>

package/src/components/features/devices/devices-panel-view.tsx

@@ -70,6 +70,11 @@ export interface DevicesPanelViewProps<T extends DeviceRow = DeviceRow> {
    * are the real ones, locked, and only the rows are skeletons.
    */
   loading?: boolean;
+  /**
+   * The loading state announces itself, once ("Loading devices…"; the table or grid inside it stays quiet).
+   * `false` inside another loading region. Default `true`.
+   */
+  loadingRegion?: boolean;
   /** The rows on screen answer the previous narrowing while the next loads: dimmed, not replaced. */
   isNarrowing?: boolean;
   /** Server-side total for the current narrowing. */
@@ -127,6 +132,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
   actions,
   devices,
   loading = false,
+  loadingRegion = true,
   isNarrowing = false,
   totalCount,
   deviceFilters = null,
@@ -157,6 +163,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
         <DevicesTableBody
           devices={devices}
           isLoading={loading}
+          loadingRegion={false}
           emptyMessage={loading ? '' : emptyMessage}
           skeletonRows={10}
           stickyHeaderOffset="top-[96px]"
@@ -198,6 +205,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
           <DevicesGrid
             devices={devices}
             isLoading={loading}
+            loadingRegion={false}
             hasNextPage={hasNextPage}
             isFetchingNextPage={isFetchingNextPage}
             sentinelRef={gridSentinelRef}
@@ -227,7 +235,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
       contentClassName="flex flex-col"
     >
       {headerSlot}
-      {loading && (
+      {loading && loadingRegion && (
         <span role="status" className="sr-only">
           Loading devices…
         </span>

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} />