@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { type ReactNode, useCallback, useEffect, useMemo } from 'react';
+import { type MouseEvent, type ReactNode, useCallback, useEffect, useMemo } from 'react';
 import { openInNewTab } from '../../../utils/open-in-new-tab';
 import { normalizeToolTypeWithFallback, toToolLabel } from '../../../utils/tool-utils';
 import {
@@ -13,8 +13,17 @@ import {
 } from '../../icons-v2-generated';
 import { ToolBadge } from '../../platform/ToolBadge';
 import { Button } from '../../ui/button';
-import { type ColumnDef, DataTable, multiSelectFilterFn, type Row, useDataTable } from '../../ui/data-table';
+import {
+  type ColumnDef,
+  DataTable,
+  dataTableLoadingRows,
+  multiSelectFilterFn,
+  type Row,
+  useDataTable,
+} from '../../ui/data-table';
+import { DATA_TABLE_SKELETON_ROWS } from '../../ui/data-table/utils';
 import { FilterModal } from '../../ui/filter-modal';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { NoData, type NoDataProps } from '../../ui/no-data';
 import { Tag } from '../../ui/tag';
 import { TruncateText } from '../../ui/truncate-text';
@@ -85,17 +94,75 @@ export interface LogsTableViewProps<T extends UiLogEntry = UiLogEntry> {
   guideButton?: LogsTableGuideButton;
   /** Columns left out (a narrow rendering). */
   hiddenColumns?: readonly LogsTableColumnId[];
+  /**
+   * How many logs one request loads (the host's page size). The loading body draws that many skeleton rows and the
+   * load-more footer one more page of them. Default: the table's own defaults (`DataTable.Body` / `InfiniteFooter`).
+   */
+  pageSize?: number;
 }
 
 const noop = () => {};
 
+/** A log still being read: a row the table keys, every field a cell shows empty (each draws its loading form). */
+const loadingLog = (id: string): UiLogEntry => ({
+  id,
+  logId: '',
+  timestamp: '',
+  status: { label: '' },
+  source: { name: '', toolType: '' },
+  device: { name: '' },
+  description: { title: '' },
+});
+
+/** The Source column: the device over its customer; both lines are bars while the row is read. */
+function LogSourceCell({ device }: { device: UiLogEntry['device'] }) {
+  const loading = useLoadingScope();
+  const { deviceName, organization } = logSourceLabels(device);
+  return (
+    <div className="flex min-h-[60px] flex-col justify-center gap-1 py-2">
+      {(deviceName || loading) && <TruncateText>{deviceName}</TruncateText>}
+      {(organization || loading) && (
+        <TruncateText variant="h6" tone="secondary">
+          {organization ?? ''}
+        </TruncateText>
+      )}
+    </div>
+  );
+}
+
+/** A row's icon button (quick view, open in a new tab): static chrome, drawn real and inert while the row is read. */
+function LogRowButton({
+  onClick,
+  icon,
+  label,
+}: {
+  onClick?: (event: MouseEvent) => void;
+  icon: ReactNode;
+  label: string;
+}) {
+  const loading = useLoadingScope();
+  return (
+    <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
+      <Button
+        onClick={loading ? undefined : onClick}
+        disabled={loading}
+        variant="outline"
+        size="icon"
+        leftIcon={icon}
+        aria-label={label}
+        className="bg-ods-card"
+      />
+    </div>
+  );
+}
+
 /**
  * The logs table: its columns, rows, filters, empty and loading states. The host
  * loads the rows and owns the filter, search and date state.
  */
 export function LogsTableView<T extends UiLogEntry = UiLogEntry>({
   logs,
-  loading = false,
+  loading: loadingProp = false,
   facets,
   filters,
   onFilterChange,
@@ -116,7 +183,10 @@ export function LogsTableView<T extends UiLogEntry = UiLogEntry>({
   renderEmptyState,
   guideButton,
   hiddenColumns,
+  pageSize,
 }: LogsTableViewProps<T>) {
+  // ONE switch: in a page's loading state the table is loading (its body draws the row skeletons, never the empty state).
+  const loading = useLoadingScope() || loadingProp;
   const columns = useMemo<ColumnDef<T>[]>(() => {
     const multiSelect = multiSelectFor<T>();
     const all: ColumnDef<T>[] = [
@@ -183,19 +253,7 @@ export function LogsTableView<T extends UiLogEntry = UiLogEntry>({
       {
         accessorKey: 'source',
         header: 'SOURCE',
-        cell: ({ row }: { row: Row<T> }) => {
-          const { deviceName, organization } = logSourceLabels(row.original.device);
-          return (
-            <div className="flex min-h-[60px] flex-col justify-center gap-1 py-2">
-              {deviceName && <TruncateText>{deviceName}</TruncateText>}
-              {organization && (
-                <TruncateText variant="h6" tone="secondary">
-                  {organization}
-                </TruncateText>
-              )}
-            </div>
-          );
-        },
+        cell: ({ row }: { row: Row<T> }) => <LogSourceCell device={row.original.device} />,
         enableSorting: false,
         filterFn: multiSelect,
         meta: {
@@ -228,16 +286,11 @@ export function LogsTableView<T extends UiLogEntry = UiLogEntry>({
       {
         id: 'quickView',
         cell: ({ row }: { row: Row<T> }) => (
-          <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
-            <Button
-              onClick={() => onQuickView?.(row.original)}
-              variant="outline"
-              size="icon"
-              leftIcon={<EyeIcon className="h-5 w-5" />}
-              aria-label="Quick view"
-              className="bg-ods-card"
-            />
-          </div>
+          <LogRowButton
+            onClick={() => onQuickView?.(row.original)}
+            icon={<EyeIcon className="h-5 w-5" />}
+            label="Quick view"
+          />
         ),
         enableSorting: false,
         meta: { width: LOG_COLUMN_WIDTHS.action, align: 'right' },
@@ -245,16 +298,11 @@ export function LogsTableView<T extends UiLogEntry = UiLogEntry>({
       {
         id: 'open',
         cell: ({ row }: { row: Row<T> }) => (
-          <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
-            <Button
-              onClick={getLogHref ? openInNewTab(getLogHref(row.original)) : undefined}
-              variant="outline"
-              size="icon"
-              leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
-              aria-label="Open in new tab"
-              className="bg-ods-card"
-            />
-          </div>
+          <LogRowButton
+            onClick={getLogHref ? openInNewTab(getLogHref(row.original)) : undefined}
+            icon={<ArrowRightUpIcon className="h-5 w-5" />}
+            label="Open in new tab"
+          />
         ),
         enableSorting: false,
         meta: { width: LOG_COLUMN_WIDTHS.action, hideAt: 'md', align: 'right' },
@@ -299,8 +347,13 @@ export function LogsTableView<T extends UiLogEntry = UiLogEntry>({
     [columnFilters, onFilterChange],
   );
 
+  // While loading the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
+  const loadingRows = useMemo(
+    () => (loading ? dataTableLoadingRows(pageSize ?? DATA_TABLE_SKELETON_ROWS, id => loadingLog(id) as T) : null),
+    [loading, pageSize],
+  );
   const table = useDataTable<T>({
-    data: logs,
+    data: loadingRows ?? logs,
     columns,
     getRowId: (row: T) => row.id,
     enableSorting: false,
@@ -357,11 +410,16 @@ export function LogsTableView<T extends UiLogEntry = UiLogEntry>({
         {/* Keep the header while a query (search, filters, date range) is active,
             even with zero rows: its controls are the only way to change it. */}
         {!(scopedEmpty && !hasQuery) && (
-          <DataTable.Header stickyHeader stickyHeaderOffset="top-[96px]" rightSlot={<DataTable.RowCount />} />
+          <DataTable.Header
+            stickyHeader
+            stickyHeaderOffset="top-[96px]"
+            rightSlot={<DataTable.RowCount loading={loading} />}
+          />
         )}
         <DataTable.Body
           loading={loading}
-          skeletonRows={10}
+          loadingCells
+          skeletonRows={pageSize}
           // Scoped tabs get the unified empty state (as every other device and
           // customer tab); the standalone page keeps its inline message.
           {...(scoped
@@ -384,7 +442,7 @@ export function LogsTableView<T extends UiLogEntry = UiLogEntry>({
           hasNextPage={hasNextPage}
           isFetchingNextPage={isFetchingNextPage}
           onLoadMore={onLoadMore}
-          skeletonRows={2}
+          skeletonRows={pageSize}
         />
       </DataTable>
 
@@ -414,98 +472,3 @@ export function LogsTableView<T extends UiLogEntry = UiLogEntry>({
 function columnId<T>(column: ColumnDef<T>): string {
   return String(column.id ?? (column as { accessorKey?: string }).accessorKey ?? '');
 }
-
-// ----------------------------------------------------------------
-// Loading skeleton
-// ----------------------------------------------------------------
-
-const EMPTY_LOG_ROWS: unknown[] = [];
-
-/**
- * A filterable column while the facets are still in flight: no options, plus the
- * flag saying they are coming. The flag keeps the funnel drawn (inert); an empty
- * filter without it means "there is nothing to filter by", and the table hides
- * the funnel for that column.
- */
-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, region = true }: LogsTableSkeletonProps) {
-  const columns = useMemo<ColumnDef<unknown>[]>(() => {
-    const multiSelect = multiSelectFor<unknown>();
-    return [
-      {
-        id: 'logId',
-        header: logIdHeader ? () => logIdHeader : 'Log ID',
-        enableSorting: false,
-        meta: { width: LOG_COLUMN_WIDTHS.logId, alwaysShowHeader: true },
-      },
-      {
-        id: 'status',
-        header: 'Status',
-        enableSorting: false,
-        filterFn: multiSelect,
-        meta: { width: LOG_COLUMN_WIDTHS.status, filter: PENDING_FILTER },
-      },
-      {
-        id: 'tool',
-        header: 'Tool',
-        enableSorting: false,
-        filterFn: multiSelect,
-        meta: { width: LOG_COLUMN_WIDTHS.tool, hideAt: 'md', filter: PENDING_FILTER },
-      },
-      {
-        id: 'source',
-        header: 'SOURCE',
-        enableSorting: false,
-        filterFn: multiSelect,
-        meta: { width: LOG_COLUMN_WIDTHS.source, hideAt: 'md', filter: PENDING_FILTER },
-      },
-      {
-        id: 'description',
-        header: 'Log Details',
-        enableSorting: false,
-        meta: { width: LOG_COLUMN_WIDTHS.description, hideAt: 'lg' },
-      },
-      {
-        id: 'copy',
-        enableSorting: false,
-        meta: { width: `${LOG_COLUMN_WIDTHS.action} ml-auto`, align: 'right' },
-      },
-      {
-        id: 'quickView',
-        enableSorting: false,
-        meta: { width: LOG_COLUMN_WIDTHS.action, align: 'right' },
-      },
-      {
-        id: 'open',
-        enableSorting: false,
-        meta: { width: LOG_COLUMN_WIDTHS.action, hideAt: 'md', align: 'right' },
-      },
-    ];
-  }, [logIdHeader]);
-
-  const table = useDataTable<unknown>({
-    data: EMPTY_LOG_ROWS,
-    columns,
-    getRowId: () => '',
-    enableSorting: false,
-  });
-
-  return (
-    <DataTable table={table}>
-      <DataTable.Header stickyHeader stickyHeaderOffset="top-[96px]" />
-      <DataTable.Body loading={true} loadingRegion={region} skeletonRows={10} emptyMessage="" rowClassName="mb-1" />
-    </DataTable>
-  );
-}

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

@@ -24,7 +24,8 @@ import { TextLineSkeleton, 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 { useLoadingScope } from '../ui/loading-scope';
+import { Label } from '../ui/label';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
 import { Slider } from '../ui/slider';
 import { TabSelector } from '../ui/tab-selector';
 import { PushButtonSelector } from './push-button-selector';
@@ -231,16 +232,15 @@ export function ModelTokenRatesPopover({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <button
+        <Button
+          variant="transparent"
+          size="icon-sm"
           type="button"
           aria-label={MODEL_TOKEN_RATES_COPY.trigger}
-          className={cn(
-            'shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary',
-            triggerClassName,
-          )}
+          className={cn('shrink-0', triggerClassName)}
         >
-          <QuestionCircleIcon className="size-6" />
-        </button>
+          <QuestionCircleIcon />
+        </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" sideOffset={8} className="border-0 bg-transparent p-0 shadow-none">
         {children ?? <ModelTokenRates {...panel} />}
@@ -299,7 +299,7 @@ function ModelTokenRatesTable({ rates }: { rates: readonly ModelTokenRate[] }) {
         {/* Every model of the provider, scrolling under the pinned header. */}
         <div role="rowgroup" className="min-h-0 flex-1 overflow-y-auto">
           {group.rates.map(rate => (
-            <div key={rate.modelName} role="row" className={BODY_ROW_CLASS}>
+            <div key={rate.modelName} data-loading-item role="row" className={BODY_ROW_CLASS}>
               <span role="rowheader" className="min-w-0 flex-1 truncate">
                 {rate.displayName || rate.modelName}
               </span>
@@ -339,7 +339,7 @@ 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({
+function ModelTokenRatesSkeleton({
   region = true,
 }: {
   /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
@@ -356,20 +356,21 @@ export function ModelTokenRatesSkeleton({
         <span className={NUMBER_CELL}>{MODEL_TOKEN_RATES_COPY.input}</span>
         <span className={NUMBER_CELL}>{MODEL_TOKEN_RATES_COPY.output}</span>
       </div>
-      {Array.from({ length: TABLE_SKELETON_ROWS }, (_, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: identical placeholder rows
-        <div key={index} className={BODY_ROW_CLASS}>
-          <span className="min-w-0 flex-1">
-            <TextLineSkeleton type="inherit" as="span" className="w-36 max-w-full" />
-          </span>
-          <span className={NUMBER_CELL}>
-            <TextLineSkeleton type="inherit" as="span" className="ml-auto w-12" />
-          </span>
-          <span className={NUMBER_CELL}>
-            <TextLineSkeleton type="inherit" as="span" className="ml-auto w-12" />
-          </span>
-        </div>
-      ))}
+      <LoadingItems count={TABLE_SKELETON_ROWS}>
+        {() => (
+          <div data-loading-item className={BODY_ROW_CLASS}>
+            <span className="min-w-0 flex-1">
+              <TextLineSkeleton type="inherit" as="span" className="w-36 max-w-full" />
+            </span>
+            <span className={NUMBER_CELL}>
+              <TextLineSkeleton type="inherit" as="span" className="ml-auto w-12" />
+            </span>
+            <span className={NUMBER_CELL}>
+              <TextLineSkeleton type="inherit" as="span" className="ml-auto w-12" />
+            </span>
+          </div>
+        )}
+      </LoadingItems>
     </LoadingRegion>
   );
 }
@@ -459,15 +460,16 @@ function ExchangeFigure({
   loading?: boolean;
   size?: 'hero' | 'plain';
 }) {
+  const drawLoading = useLoadingScope() || loading;
   return (
     <div className="flex min-w-0 flex-col">
       <span
         className={cn('whitespace-nowrap tabular-nums text-ods-text-primary', size === 'hero' ? 'text-h1' : 'text-h2')}
       >
-        {loading ? <TextLineSkeleton type="inherit" as="span" className="w-20" /> : figure}
+        {drawLoading ? <TextLineSkeleton type="inherit" as="span" className="w-20" /> : figure}
       </span>
       <span className="min-h-[2lh] text-ods-text-secondary text-h4">
-        {loading ? <TextLineSkeleton type="inherit" as="span" className="w-full max-w-xs" /> : words}
+        {drawLoading ? <TextLineSkeleton type="inherit" as="span" className="w-full max-w-xs" /> : words}
       </span>
     </div>
   );
@@ -532,7 +534,8 @@ export function ModelTokenExchange({
         <ExchangeFigure figure={balancePrice ?? tokens} words={balancePrice ? copy.buy.words(tokens) : copy.buy.unit} />
         {/* The calculator: move the amount and every figure in step 3 follows. */}
         <div className="flex flex-col gap-[var(--spacing-system-sf)]">
-          <label
+          <Label
+            variant="surface"
             htmlFor={sliderId}
             className="flex items-baseline justify-between gap-[var(--spacing-system-sf)] text-ods-text-secondary text-h4"
           >
@@ -540,7 +543,7 @@ export function ModelTokenExchange({
             <output htmlFor={sliderId} className="tabular-nums text-ods-text-primary text-h3">
               {tokens}
             </output>
-          </label>
+          </Label>
           <Slider
             id={sliderId}
             min={amountRange.min}

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, NotificationTileSkeleton } from './notification-tile';
-export type { NotificationTileProps, NotificationTileSkeletonProps } from './notification-tile';
+export { NotificationTile } from './notification-tile';
+export type { NotificationTileProps } 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

@@ -9,7 +9,7 @@ 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';
+import { Button, SplitButton } from '../../ui/button';
 import { Drawer, DrawerContent, DrawerTitle } from '../../ui/drawer';
 import { Switch } from '../../ui/switch';
 import { NotificationTile } from './notification-tile';
@@ -70,14 +70,17 @@ export function NotificationDrawer({
           hideClose
           className="truncate"
           actions={
-            <button
+            <Button
+              variant="link"
+              size="compact"
+              noPaddingX
               type="button"
               disabled={unreadCount === 0}
               onClick={markAllRead}
-              className="self-center text-ods-text-secondary underline transition-colors text-h6 hover:text-ods-text-primary disabled:opacity-40 max-md:focus:outline-none max-md:focus-visible:outline-none"
+              className="self-center"
             >
               Mark All Complete
-            </button>
+            </Button>
           }
         >
           New Notifications

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

@@ -8,6 +8,8 @@ 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 { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { Button } from '../../ui/button';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { dotColorByVariant, progressColorByVariant as toastProgressColorByVariant } from '../../ui/toaster';
 import type { Notification, NotificationSeverity, NotificationVariant } from './types';
 
@@ -40,17 +42,15 @@ const progressColorByVariant: Record<NotificationVariant, string> = {
   info: 'bg-ods-accent',
 };
 
-const headerControlClass =
-  'absolute inset-0 flex items-center justify-center text-ods-text-secondary transition-opacity duration-200 hover:text-ods-text-primary';
+/** The trailing control sits centred over its 16px slot. */
+const headerControlClass = 'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2';
 
 /** The header's icon box and its trailing control's box, read by the tile and by its skeleton. */
 const TILE_ICON_BOX_CLASS = `flex ${ICON_SIZE.sm} shrink-0 items-center justify-center`;
 const TILE_CONTROL_BOX_CLASS = `relative ${ICON_SIZE.sm} shrink-0`;
 
-export interface NotificationTileProps {
-  notification: Notification;
+interface NotificationTileOptions {
   liveDurationMs?: number;
-  onComplete: (id: string) => void;
   onSettle?: (id: string) => void;
   className?: string;
   /** Action row rendered below the body inside the padded section (e.g. approval buttons). */
@@ -82,9 +82,48 @@ export interface NotificationTileProps {
    * on screen: its notifications have just arrived for as long as it plays.
    */
   timeLabel?: string;
+  /** The loading form's description lines (default two). */
+  descriptionLines?: number;
+}
+
+/**
+ * The notification and what dismisses it, or `loading` while the host reads it: the tile then draws its own loading
+ * form, as it does in a loading scope (an approval tile, one given `actions`, draws its button row too).
+ */
+export type NotificationTileProps = NotificationTileOptions &
+  (
+    | { notification: Notification; onComplete: (id: string) => void; loading?: boolean }
+    | {
+        loading: true;
+        notification?: undefined;
+        onComplete?: undefined;
+        /** `approval`: the loading form draws the approval button row. Default: `approval` when `actions` is given. */
+        variant?: 'default' | 'approval';
+      }
+  );
+
+type LoadedNotificationTileProps = NotificationTileOptions & {
+  notification: Notification;
+  onComplete: (id: string) => void;
+};
+
+/** A notification as a tile; ONE switch: in a loading scope (or `loading`) its own loading form. */
+export function NotificationTile(props: NotificationTileProps) {
+  if (useLoadingScope() || props.loading) {
+    const variant = ('variant' in props && props.variant) || (props.actions ? 'approval' : 'default');
+    return (
+      <NotificationTileSkeleton
+        variant={variant}
+        presentation={props.presentation}
+        descriptionLines={props.descriptionLines}
+        className={props.className}
+      />
+    );
+  }
+  return <LoadedNotificationTile {...props} />;
 }
 
-export function NotificationTile({
+function LoadedNotificationTile({
   notification,
   liveDurationMs = 4000,
   onComplete,
@@ -96,7 +135,7 @@ export function NotificationTile({
   titleLines = 1,
   presentation = 'card',
   timeLabel,
-}: NotificationTileProps) {
+}: LoadedNotificationTileProps) {
   const lockscreen = presentation === 'lockscreen';
   const {
     id,
@@ -215,7 +254,9 @@ export function NotificationTile({
                     onClick: () => onComplete(id),
                   },
                 ].map(({ active, label, icon: actionIcon, onClick }) => (
-                  <button
+                  <Button
+                    variant="transparent"
+                    size="icon-inline"
                     key={label}
                     type="button"
                     onClick={onClick}
@@ -223,10 +264,10 @@ export function NotificationTile({
                     aria-hidden={!active}
                     disabled={!active}
                     tabIndex={active ? 0 : -1}
-                    className={cn(headerControlClass, !active && 'pointer-events-none opacity-0')}
+                    className={cn(headerControlClass, !active && 'invisible')}
                   >
                     {actionIcon}
-                  </button>
+                  </Button>
                 ))}
               </span>
             </>
@@ -291,7 +332,7 @@ export const APPROVAL_BUTTON_CLASS = 'w-20';
 /** The card approval tile's trailing toggle (the command section's chevron). Shared by the tile and its skeleton. */
 export const APPROVAL_TOGGLE_BUTTON_CLASS = 'ml-auto w-6 shrink-0 px-0 md:w-8';
 
-export interface NotificationTileSkeletonProps {
+interface NotificationTileSkeletonProps {
   /** `approval`: the approval tile, which adds a row of small buttons under the body. */
   variant?: 'default' | 'approval';
   /** The tile's `presentation`: a lock screen has no trailing control and its approval buttons are compact. */
@@ -316,7 +357,7 @@ function TileSquare({ box, bar }: { box: string; bar: string }) {
  * Each text row is its text's own line box (`TextLineSkeleton` at the tile's type steps), so the skeleton is the
  * loaded tile's height at every breakpoint.
  */
-export function NotificationTileSkeleton({
+function NotificationTileSkeleton({
   variant = 'default',
   presentation = 'card',
   descriptionLines = 2,

package/src/components/features/os-type-badge-group.tsx

@@ -8,6 +8,8 @@
  */
 
 import { cn } from '../../utils/cn';
+import { MediaSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 import { OSTypeBadge } from './os-type-badge';
 
 export interface OSTypeBadgeGroupProps {
@@ -19,6 +21,8 @@ export interface OSTypeBadgeGroupProps {
   iconSize?: string;
   /** Maximum number of badges to display before showing "+N more" */
   maxDisplay?: number;
+  /** Draws its loading state (also inside a `LoadingScope`): one icon's box at `iconSize`. */
+  loading?: boolean;
 }
 
 /**
@@ -30,7 +34,21 @@ export interface OSTypeBadgeGroupProps {
  * <OSTypeBadgeGroup osTypes={['macos', 'linux']} maxDisplay={2} />
  * ```
  */
-export function OSTypeBadgeGroup({ osTypes, className = '', iconSize = 'w-5 h-5', maxDisplay }: OSTypeBadgeGroupProps) {
+export function OSTypeBadgeGroup({
+  osTypes,
+  className = '',
+  iconSize = 'w-5 h-5',
+  maxDisplay,
+  loading,
+}: OSTypeBadgeGroupProps) {
+  if (useLoadingScope() || loading) {
+    // The platforms are read data: one icon's box stands for them (most scripts name one platform).
+    return (
+      <div className={cn('flex flex-wrap items-center gap-2', className)}>
+        <MediaSkeleton.Icon className={iconSize} />
+      </div>
+    );
+  }
   if (!osTypes || osTypes.length === 0) {
     return null;
   }