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

package/src/components/chat/mingo-archive-list.tsx

@@ -3,17 +3,20 @@
 import { useEffect, useRef } from 'react';
 import { formatRelativeTime } from '../../utils/date-utils';
 import { BoxArchiveIcon } from '../icons-v2-generated';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 import { SquareAvatar } from '../ui/square-avatar';
 import { ChatListEmptyState } from './chat-list-empty-state';
-import { ChatListItem } from './chat-nav-sidebar';
+import { ChatListItem, ChatListItemLoadingPage } from './chat-nav-sidebar';
+import { CHAT_HISTORY_PAGE_SIZE } from './mingo-chat-history';
 import type { DialogItem } from './types/component.types';
 
 export interface MingoArchiveListProps {
   dialogs: ReadonlyArray<DialogItem>;
   onSelectDialog?: (id: string) => void;
-  /** The first page is loading. */
+  /** The first page is loading: the list draws one page of loading rows. */
   isLoading?: boolean;
+  /** The archive's page size: how many rows the loading state draws. Default `CHAT_HISTORY_PAGE_SIZE`. */
+  pageSize?: number;
   hasMore?: boolean;
   isLoadingMore?: boolean;
   onLoadMore?: () => void;
@@ -28,10 +31,14 @@ export function MingoArchiveList({
   dialogs,
   onSelectDialog,
   isLoading = false,
+  pageSize = CHAT_HISTORY_PAGE_SIZE,
   hasMore = false,
   isLoadingMore = false,
   onLoadMore,
 }: MingoArchiveListProps) {
+  // ONE switch: a first page with nothing to show yet (or the page's loading state) draws one page of the rows' own
+  // skeleton.
+  const loading = useLoadingScope() || (isLoading && dialogs.length === 0);
   const sentinelRef = useRef<HTMLDivElement>(null);
   const onLoadMoreRef = useRef(onLoadMore);
   const isLoadingMoreRef = useRef(isLoadingMore);
@@ -62,11 +69,14 @@ export function MingoArchiveList({
         Archived Chats
       </p>
       <div className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xxs)] overflow-y-auto overscroll-contain pb-[var(--spacing-system-mf)]">
-        {dialogs.length > 0 ? (
+        {loading ? (
+          <ChatListItemLoadingPage count={pageSize} trailing />
+        ) : dialogs.length > 0 ? (
           <>
             {dialogs.map(dialog => (
               <ChatListItem
                 key={dialog.id}
+                data-loading-item
                 title={dialog.title || 'Untitled Chat'}
                 onClick={() => onSelectDialog?.(dialog.id)}
                 trailing={
@@ -92,10 +102,6 @@ export function MingoArchiveList({
             ))}
             {hasMore && <div ref={sentinelRef} className="h-px shrink-0" aria-hidden />}
           </>
-        ) : isLoading ? (
-          Array.from({ length: 6 }, (_, i) => (
-            <UnifiedSkeleton key={i} aria-hidden className="h-10 shrink-0 rounded-md" />
-          ))
         ) : (
           <ChatListEmptyState
             icon={<BoxArchiveIcon size={24} />}

package/src/components/chat/mingo-chat-header.tsx

@@ -2,8 +2,8 @@
 
 import { Arrow02RightIcon, Ellipsis01Icon, Refresh01LeftIcon, SidebarIcon, XmarkIcon } from '../icons-v2-generated';
 import { ActionsMenuDropdown, type ActionsMenuGroup, type ActionsMenuItem } from '../ui/actions-menu';
+import { Button } from '../ui/button';
 import { SquareAvatar } from '../ui/square-avatar';
-import { ChatHeaderIconButton } from './chat-header-icon-button';
 
 export interface MingoChatHeaderProps {
   title: string;
@@ -50,16 +50,17 @@ export function MingoChatHeader({
     ...(extraMenuItems.length > 0 ? [{ items: extraMenuItems }] : []),
   ];
   return (
-    <div className="flex h-14 w-full shrink-0 overflow-hidden border-b border-ods-border">
+    <div className="flex h-14 w-full shrink-0 divide-x divide-ods-border overflow-hidden border-b border-ods-border">
       {onToggleList && (
-        <ChatHeaderIconButton
-          divider="right"
+        <Button
+          variant="cell"
+          className="w-14"
           onClick={onToggleList}
           aria-label={listOpen ? 'Hide chat list' : 'Show chat list'}
           aria-pressed={listOpen}
         >
           <SidebarIcon size={24} />
-        </ChatHeaderIconButton>
+        </Button>
       )}
 
       <div className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)]">
@@ -80,9 +81,9 @@ export function MingoChatHeader({
       </div>
 
       {onRestore && (
-        <ChatHeaderIconButton onClick={onRestore} aria-label="Unarchive chat">
+        <Button variant="cell" className="w-14" onClick={onRestore} aria-label="Unarchive chat">
           <Refresh01LeftIcon size={24} />
-        </ChatHeaderIconButton>
+        </Button>
       )}
       {menuGroups.length > 0 && (
         <ActionsMenuDropdown
@@ -90,21 +91,21 @@ export function MingoChatHeader({
           onCloseAutoFocus={e => e.preventDefault()}
           groups={menuGroups}
           customTrigger={
-            <ChatHeaderIconButton aria-label="Chat actions">
+            <Button variant="cell" className="w-14" aria-label="Chat actions">
               <Ellipsis01Icon size={24} />
-            </ChatHeaderIconButton>
+            </Button>
           }
         />
       )}
       {onCollapse && (
-        <ChatHeaderIconButton onClick={onCollapse} aria-label="Collapse chat">
+        <Button variant="cell" className="w-14" onClick={onCollapse} aria-label="Collapse chat">
           <Arrow02RightIcon size={24} />
-        </ChatHeaderIconButton>
+        </Button>
       )}
       {onClose && (
-        <ChatHeaderIconButton onClick={onClose} aria-label="Close">
+        <Button variant="cell" className="w-14" onClick={onClose} aria-label="Close">
           <XmarkIcon size={24} />
-        </ChatHeaderIconButton>
+        </Button>
       )}
     </div>
   );

package/src/components/chat/mingo-chat-history.tsx

@@ -4,15 +4,35 @@ import { useState, useMemo, useRef, useEffect } from 'react';
 import { cn } from '../../utils/cn';
 import { Ellipsis01Icon, SearchXmarkIcon } from '../icons-v2-generated';
 import { LoadingRegion } from '../loading/loading-region';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { ActionsMenuDropdown } from '../ui/actions-menu';
 import { Button } from '../ui/button';
+import { LoadingItems, loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade';
 import { SquareAvatar } from '../ui/square-avatar';
 import { chatDialogMenuItems } from './chat-dialog-menu-items';
 import { ChatListEmptyState } from './chat-list-empty-state';
+import { SKELETON_TITLE_WIDTHS } from './chat-nav-sidebar';
 import type { DialogItem } from './types/component.types';
 
+/**
+ * The lib's own conversation page: what its dialog readers request (the NATS adapter's `dialogsPageSize` default and
+ * the archive's fetch), and so what a history list's loading state draws when its host names no page size. A host
+ * that pages its list differently passes its page size (`pageSize`, `EmbeddableChat`'s `historyPageSize`), so the
+ * loading state draws exactly one page.
+ */
+export const CHAT_HISTORY_PAGE_SIZE = 20;
+
+/** The list's layout, read by the loaded groups and by the loading state, so both are one size. */
+const HISTORY_GROUP_CLASS = 'flex flex-col gap-[var(--spacing-system-xxs)]';
+const HISTORY_GROUP_LABEL_CLASS = 'text-ods-text-secondary text-h5';
+const HISTORY_GROUP_BOX_CLASS = 'overflow-hidden rounded-md border border-ods-border';
+const HISTORY_ROW_CLASS = 'flex h-12 items-center border-b border-ods-border last:border-b-0';
+const HISTORY_ROW_CONTENT_CLASS = 'p-[var(--spacing-system-s)]';
+
+/** Date groups the loading state draws: the typical history, recent chats over older ones. */
+const HISTORY_SKELETON_GROUPS = 2;
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -46,6 +66,11 @@ export interface MingoChatHistoryProps {
   isLoadingMore?: boolean;
   /** Fetch the next page — fired when the bottom sentinel scrolls into view. */
   onLoadMore?: () => void;
+  /** The first page is still loading: the list draws its own loading state (one page of rows). Inside a
+   *  `LoadingScope` it does so whatever this says. */
+  loading?: boolean;
+  /** The host's page size: how many rows the loading state draws. Default {@link CHAT_HISTORY_PAGE_SIZE}. */
+  pageSize?: number;
   /** Appended to the root element. */
   className?: string;
 }
@@ -93,8 +118,14 @@ function groupDialogs(dialogs: ReadonlyArray<DialogItem>): DialogGroup[] {
 // =============================================================================
 
 interface RowProps {
-  dialog: DialogItem;
-  isActive: boolean;
+  /** Absent while `loading`: the loading row needs no data. */
+  dialog?: DialogItem;
+  isActive?: boolean;
+  /** The dialog is still being read: the SAME row, its title slot a bar (no unread badge, no trailing cell: both are
+   *  read data most rows do not have). */
+  loading?: boolean;
+  /** The loading row's place in the list: picks its title bar's width. */
+  skeletonIndex?: number;
   onSelect?: (id: string) => void;
   onRequestRename?: (dialog: DialogItem) => void;
   onRequestCopyLink?: (dialog: DialogItem) => void;
@@ -104,28 +135,36 @@ interface RowProps {
 
 function MingoChatHistoryRow({
   dialog,
-  isActive,
+  isActive = false,
+  loading: loadingProp = false,
+  skeletonIndex = 0,
   onSelect,
   onRequestCopyLink,
   onRequestRename,
   onRequestCompact,
   onRequestArchive,
-}: RowProps) {
-  const title = dialog.title || 'Untitled Chat';
-  const unread = dialog.unreadMessagesCount ?? 0;
-  const hasMenu = !!onRequestRename || !!onRequestArchive || !!onRequestCopyLink || !!onRequestCompact;
-  const owner = dialog.owner;
-  const hasAvatar = !!(owner?.name || owner?.avatarUrl);
+  ...props
+}: RowProps & { [key: `data-${string}`]: unknown }) {
+  // ONE switch: a row with no dialog yet is a loading row.
+  const loading = useLoadingScope() || loadingProp || !dialog;
+  const title = dialog?.title || 'Untitled Chat';
+  const unread = dialog?.unreadMessagesCount ?? 0;
+  const hasMenu = !loading && (!!onRequestRename || !!onRequestArchive || !!onRequestCopyLink || !!onRequestCompact);
+  const owner = dialog?.owner;
+  const hasAvatar = !loading && !!(owner?.name || owner?.avatarUrl);
   // Keep the `⋯` visible while its menu is open — once Radix moves focus into
   // the portalled content the row loses hover/focus-within.
   const [menuOpen, setMenuOpen] = useState(false);
 
-  const menuItems = chatDialogMenuItems({
-    onCopyLink: onRequestCopyLink && (() => onRequestCopyLink(dialog)),
-    onRename: onRequestRename && (() => onRequestRename(dialog)),
-    onCompact: onRequestCompact && (() => onRequestCompact(dialog)),
-    onArchive: onRequestArchive && (() => onRequestArchive(dialog)),
-  });
+  const menuItems = dialog
+    ? chatDialogMenuItems({
+        onCopyLink: onRequestCopyLink && (() => onRequestCopyLink(dialog)),
+        onRename: onRequestRename && (() => onRequestRename(dialog)),
+        onCompact: onRequestCompact && (() => onRequestCompact(dialog)),
+        onArchive: onRequestArchive && (() => onRequestArchive(dialog)),
+      })
+    : [];
+  const select = () => dialog && onSelect?.(dialog.id);
 
   // The item is the full-width row (inside the group's bordered box). Padding
   // lives on the inner content button (badge + title) only — the `⋯` is a
@@ -133,40 +172,57 @@ function MingoChatHistoryRow({
   // the item but outside its padded content area.
   return (
     <div
+      {...loadingItemProps(props)}
+      aria-hidden={loading || undefined}
       className={cn(
-        'group/row relative flex h-12 items-center border-b border-ods-border transition-colors last:border-b-0',
+        HISTORY_ROW_CLASS,
+        'group/row relative transition-colors',
         // Active (selected) dialog — Figma 259:91610: an accent-secondary
         // fill, a 4px accent bar down the leading edge, and accent-colored
         // title text. Inactive rows keep the dark surface with a hover tint.
-        isActive ? 'bg-ods-accent-secondary' : 'bg-ods-bg hover:bg-ods-bg-hover',
+        isActive ? 'bg-ods-accent-secondary' : cn('bg-ods-bg', !loading && 'hover:bg-ods-bg-hover'),
       )}
     >
       {isActive ? (
         <span aria-hidden className="pointer-events-none absolute inset-y-0 left-0 w-1 bg-ods-accent" />
       ) : null}
       <div
-        role="button"
-        tabIndex={0}
-        onClick={() => onSelect?.(dialog.id)}
-        onKeyDown={e => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            onSelect?.(dialog.id);
-          }
-        }}
-        className="flex min-w-0 flex-1 cursor-pointer items-center gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-s)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent"
+        role={loading ? undefined : 'button'}
+        tabIndex={loading ? undefined : 0}
+        onClick={loading ? undefined : select}
+        onKeyDown={
+          loading
+            ? undefined
+            : e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  select();
+                }
+              }
+        }
+        className={cn(
+          HISTORY_ROW_CONTENT_CLASS,
+          'flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]',
+          !loading &&
+            'cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent',
+        )}
       >
-        {unread > 0 ? (
+        {loading ? (
+          <TextLineSkeleton type="h4" className={SKELETON_TITLE_WIDTHS[skeletonIndex % SKELETON_TITLE_WIDTHS.length]} />
+        ) : null}
+        {!loading && unread > 0 ? (
           <span className="flex h-8 min-w-8 shrink-0 items-center justify-center rounded-md bg-ods-accent px-[var(--spacing-system-xsf)] text-ods-text-on-accent text-h5">
             {unread > 99 ? '99+' : unread}
           </span>
         ) : null}
-        <span
-          className={cn('min-w-0 flex-1 truncate text-h4', isActive ? 'text-ods-accent' : 'text-ods-text-primary')}
-          title={title}
-        >
-          {title}
-        </span>
+        {loading ? null : (
+          <span
+            className={cn('min-w-0 flex-1 truncate text-h4', isActive ? 'text-ods-accent' : 'text-ods-text-primary')}
+            title={title}
+          >
+            {title}
+          </span>
+        )}
       </div>
       {hasMenu || hasAvatar ? (
         // Trailing 48px cell (Figma 113:63224): the owner avatar sits centred
@@ -217,7 +273,7 @@ function MingoChatHistoryRow({
             // the cell whenever the menu trigger is faded out). On desktop it
             // fades for the menu swap; on mobile it's always shown.
             <span
-              onClick={() => onSelect?.(dialog.id)}
+              onClick={select}
               title={owner?.name || undefined}
               className={cn(
                 'absolute inset-0 flex cursor-pointer items-center justify-center transition-opacity',
@@ -248,50 +304,30 @@ function MingoChatHistoryRow({
 // =============================================================================
 
 /**
- * Loading placeholder for the dialog history, shaped like the grouped row list
- * above. Shown while the FIRST page of dialogs is in flight so the Mingo empty
- * state doesn't flash the new-user greeting+grid before the list arrives (the
- * two layouts are mutually exclusive — swapping between them mid-load reads as
- * a flicker). Built from `UnifiedSkeleton`.
+ * The history's loading state, shaped like the loaded list: the typical two date groups, each a group label over a
+ * bordered box of rows, one page of rows across them (`rows`, the host's page size), each the row itself in its loading
+ * form (`MingoChatHistoryRow loading`). Drawn by `MingoChatHistory` itself (`loading`, or inside a `LoadingScope`).
  */
-export function MingoChatHistorySkeleton({
-  region = true,
-  className,
-}: {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-  className?: string;
-}) {
-  // Mirror the real grouped list exactly: a small group label, then a bordered
-  // rounded container of `h-12` rows, each with a single title bar of varying
-  // width (no unread-badge squares — the real rows currently never show one, so
-  // a badge placeholder would mis-promise the layout). `bg-ods-bg` rows read a
-  // touch darker than the `bg-ods-card` panel so the bars stay legible.
-  const groups: ReadonlyArray<ReadonlyArray<string>> = [
-    ['w-3/5', 'w-4/5', 'w-2/5', 'w-3/4'],
-    ['w-1/2', 'w-2/3'],
-  ];
+function MingoChatHistorySkeleton({ rows, className }: { rows: number; className?: string }) {
+  const perGroup = Math.ceil(rows / HISTORY_SKELETON_GROUPS);
+  const groups = Array.from({ length: HISTORY_SKELETON_GROUPS }, (_, group) =>
+    Math.max(0, Math.min(perGroup, rows - group * perGroup)),
+  ).filter(count => count > 0);
   return (
     <LoadingRegion
       label="Loading conversations"
-      announce={region}
-      // `overflow-hidden` clips the placeholder rows to the flex-1 box (the real
-      // list scrolls; the skeleton just needs to stay within bounds).
+      // `overflow-hidden` clips the page of rows to the flex-1 box (the loaded list scrolls; the loading state stays
+      // within bounds).
       className={cn('flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-m)] overflow-hidden', className)}
     >
-      {groups.map((widths, g) => (
-        <div key={g} className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)]">
-          {/* Group label (Today / Older). */}
-          <UnifiedSkeleton className="h-3 w-16 rounded" />
-          <div className="overflow-hidden rounded-md border border-ods-border">
-            {widths.map((w, i) => (
-              <div
-                key={i}
-                className="flex h-12 items-center border-b border-ods-border bg-ods-bg px-[var(--spacing-system-s)] last:border-b-0"
-              >
-                <UnifiedSkeleton className={cn('h-4 rounded', w)} />
-              </div>
-            ))}
+      {groups.map((count, group) => (
+        <div key={group} className={cn(HISTORY_GROUP_CLASS, 'shrink-0')}>
+          {/* Group label (Today / Yesterday / Older): read from the dialogs' dates. */}
+          <TextLineSkeleton type="h5" className="w-16" />
+          <div className={HISTORY_GROUP_BOX_CLASS}>
+            <LoadingItems count={count}>
+              {i => <MingoChatHistoryRow loading data-loading-item skeletonIndex={group * perGroup + i} />}
+            </LoadingItems>
           </div>
         </div>
       ))}
@@ -312,7 +348,8 @@ export function MingoChatHistorySkeleton({
  * menu (Rename / Archive — each gated on the matching handler and surfaced as
  * a request the host fulfils via a modal). Owns its own scroll + bottom/top
  * fade and an infinite-scroll
- * sentinel that fires `onLoadMore`.
+ * sentinel that fires `onLoadMore`. While its first page loads (`loading`, or
+ * inside a `LoadingScope`) it draws its own skeleton: one page of rows.
  */
 export function MingoChatHistory({
   dialogs,
@@ -326,8 +363,12 @@ export function MingoChatHistory({
   hasMore = false,
   isLoadingMore = false,
   onLoadMore,
+  loading = false,
+  pageSize = CHAT_HISTORY_PAGE_SIZE,
   className,
 }: MingoChatHistoryProps) {
+  // ONE switch: the first page loading (or the page's loading state) draws one page of skeleton rows.
+  const isLoading = useLoadingScope() || loading;
   const groups = useMemo(() => groupDialogs(dialogs), [dialogs]);
   const noSearchResults = groups.length === 0 && !!searchQuery?.trim();
 
@@ -373,6 +414,8 @@ export function MingoChatHistory({
     // grew by a single page per drawer open.
   }, [hasMore, isLoadingMore, dialogCount, scrollRef]);
 
+  if (isLoading) return <MingoChatHistorySkeleton rows={pageSize} className={className} />;
+
   return (
     <div className={cn('relative flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-m)]', className)}>
       {/* Scroll region — the search INPUT now lives in the panel header
@@ -393,12 +436,13 @@ export function MingoChatHistory({
             />
           ) : (
             groups.map(group => (
-              <div key={group.key} className="flex flex-col gap-[var(--spacing-system-xxs)]">
-                <p className="text-ods-text-secondary text-h5">{group.label}</p>
-                <div className="overflow-hidden rounded-md border border-ods-border">
+              <div key={group.key} className={HISTORY_GROUP_CLASS}>
+                <p className={HISTORY_GROUP_LABEL_CLASS}>{group.label}</p>
+                <div className={HISTORY_GROUP_BOX_CLASS}>
                   {group.items.map(dialog => (
                     <MingoChatHistoryRow
                       key={dialog.id}
+                      data-loading-item
                       dialog={dialog}
                       isActive={dialog.id === activeDialogId}
                       onSelect={onSelectDialog}

package/src/components/chat/mingo-chat-modals.tsx

@@ -1,17 +1,13 @@
 'use client';
 
 import { useState } from 'react';
-import { cn } from '../../utils/cn';
+import { Button } from '../ui/button';
+import { Label } from '../ui/label';
 import { ModalV2, ModalV2Header, ModalV2Title, ModalV2Footer } from '../ui/modal-v2';
 import type { DialogItem } from './types/component.types';
 
-// Shared button styling for the modal footers (Figma `button-full`):
-// full-width, `text-h3` (DM Sans Bold 18px), 12/16 padding, rounded-md.
-const footerBtn =
-  'flex-1 min-w-0 rounded-md px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent disabled:opacity-50 disabled:cursor-not-allowed';
-const cancelBtn = cn(footerBtn, 'border border-ods-border bg-transparent text-ods-text-primary hover:bg-ods-bg-hover');
-const saveBtn = cn(footerBtn, 'bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover');
-const dangerBtn = cn(footerBtn, 'bg-ods-error text-ods-text-on-accent hover:opacity-90');
+// The footer buttons share the row equally (Figma `button-full`).
+const footerBtn = 'min-w-0 flex-1';
 
 // =============================================================================
 // Rename
@@ -50,9 +46,9 @@ export function RenameChatModal({ isOpen, initialName = '', onClose, onSave }: R
         <ModalV2Title>Rename Chat</ModalV2Title>
       </ModalV2Header>
       <div className="flex w-full flex-col gap-[var(--spacing-system-xxs)]">
-        <label htmlFor="rename-chat-input" className="text-ods-text-primary text-h4">
+        <Label htmlFor="rename-chat-input" variant="large">
           Chat Name
-        </label>
+        </Label>
         <input
           id="rename-chat-input"
           autoFocus
@@ -65,12 +61,12 @@ export function RenameChatModal({ isOpen, initialName = '', onClose, onSave }: R
         />
       </div>
       <ModalV2Footer>
-        <button type="button" onClick={onClose} className={cancelBtn}>
+        <Button variant="outline" type="button" onClick={onClose} className={footerBtn}>
           Cancel
-        </button>
-        <button type="button" onClick={save} disabled={!canSave} className={saveBtn}>
+        </Button>
+        <Button variant="accent" type="button" onClick={save} disabled={!canSave} className={footerBtn}>
           Save
-        </button>
+        </Button>
       </ModalV2Footer>
     </ModalV2>
   );
@@ -96,12 +92,12 @@ export function ArchiveChatModal({ isOpen, onClose, onConfirm }: ArchiveChatModa
       </ModalV2Header>
       <p className="w-full text-ods-text-primary text-h4">This chat will be hidden from your current chats.</p>
       <ModalV2Footer>
-        <button type="button" onClick={onClose} className={cancelBtn}>
+        <Button variant="outline" type="button" onClick={onClose} className={footerBtn}>
           Cancel
-        </button>
-        <button type="button" onClick={onConfirm} className={dangerBtn}>
+        </Button>
+        <Button variant="destructive" type="button" onClick={onConfirm} className={footerBtn}>
           Archive Chat
-        </button>
+        </Button>
       </ModalV2Footer>
     </ModalV2>
   );
@@ -128,12 +124,12 @@ export function UnarchiveChatModal({ isOpen, onClose, onConfirm }: UnarchiveChat
       </ModalV2Header>
       <p className="w-full text-ods-text-primary text-h4">This chat will be moved back to your current chats.</p>
       <ModalV2Footer>
-        <button type="button" onClick={onClose} className={cancelBtn}>
+        <Button variant="outline" type="button" onClick={onClose} className={footerBtn}>
           Cancel
-        </button>
-        <button type="button" onClick={onConfirm} className={saveBtn}>
+        </Button>
+        <Button variant="accent" type="button" onClick={onConfirm} className={footerBtn}>
           Unarchive Chat
-        </button>
+        </Button>
       </ModalV2Footer>
     </ModalV2>
   );

package/src/components/chat/mingo-chat-rail.tsx

@@ -19,13 +19,14 @@ import {
   UserIcon,
   UsersIcon,
 } from '../icons-v2-generated';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu';
 import { Button } from '../ui/button';
+import { loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import { chatDialogMenuItems } from './chat-dialog-menu-items';
 import { ChatHeaderSearchField } from './chat-header-search-field';
 import { ChatListEmptyState } from './chat-list-empty-state';
-import { ChatListItem, ChatNavSidebar, type ChatNavSidebarItem } from './chat-nav-sidebar';
+import { ChatListItem, ChatListItemLoadingPage, ChatNavSidebar, type ChatNavSidebarItem } from './chat-nav-sidebar';
+import { CHAT_HISTORY_PAGE_SIZE } from './mingo-chat-history';
 import type { MingoHistoryScope } from './mingo-history-rail';
 import type { DialogItem } from './types/component.types';
 
@@ -66,8 +67,10 @@ export interface MingoChatRailProps {
   hasMore?: boolean;
   isLoadingMore?: boolean;
   onLoadMore?: () => void;
-  /** The first page is still loading. */
+  /** The first page is still loading: the list draws one page of loading rows. */
   isLoadingHistory?: boolean;
+  /** The host's page size: how many rows the loading state draws. Default `CHAT_HISTORY_PAGE_SIZE`. */
+  pageSize?: number;
   /** The list failed to load with nothing cached. */
   loadError?: boolean;
   onRetry?: () => void;
@@ -115,11 +118,14 @@ export function MingoChatRail({
   isLoadingMore = false,
   onLoadMore,
   isLoadingHistory = false,
+  pageSize = CHAT_HISTORY_PAGE_SIZE,
   loadError = false,
   onRetry,
   onExpand,
   className,
 }: MingoChatRailProps) {
+  // ONE switch: the first page loading (or the page's loading state) draws one page of the rows' own skeleton.
+  const loading = useLoadingScope() || isLoadingHistory;
   const [searchOpen, setSearchOpen] = useState(!!searchQuery?.trim());
   const hasSearch = !!searchQuery?.trim();
 
@@ -208,10 +214,8 @@ export function MingoChatRail({
         )}
       </div>
     );
-  } else if (isLoadingHistory) {
-    list = Array.from({ length: 6 }, (_, i) => (
-      <UnifiedSkeleton key={i} aria-hidden className="h-10 shrink-0 rounded-md" />
-    ));
+  } else if (loading) {
+    list = <ChatListItemLoadingPage count={pageSize} />;
   } else if (dialogs.length === 0 && !draftTitle) {
     list = hasSearch ? (
       <p className="px-[var(--spacing-system-xs)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h6">
@@ -231,6 +235,7 @@ export function MingoChatRail({
         {dialogs.map(dialog => (
           <MingoChatRailRow
             key={dialog.id}
+            data-loading-item
             dialog={dialog}
             active={dialog.id === activeDialogId}
             status={statusFor(dialog, statusOf)}
@@ -314,16 +319,18 @@ interface MingoChatRailRowProps {
   status?: MingoDialogStatus;
   onSelect?: (id: string) => void;
   menuItems: ActionsMenuItem[];
+  /** List markers (`data-loading-item`), set by the list on its rows. */
+  [key: `data-${string}`]: unknown;
 }
 
-function MingoChatRailRow({ dialog, active, status, onSelect, menuItems }: MingoChatRailRowProps) {
+function MingoChatRailRow({ dialog, active, status, onSelect, menuItems, ...props }: MingoChatRailRowProps) {
   const [menuOpen, setMenuOpen] = useState(false);
   const hasMenu = menuItems.length > 0;
   const glyph = status ? STATUS_GLYPHS[status] : undefined;
   const title = dialog.title || 'Untitled Chat';
 
   return (
-    <div className="group/row relative shrink-0">
+    <div {...loadingItemProps(props)} className="group/row relative shrink-0">
       <ChatListItem
         active={active}
         title={title}