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

package/src/components/tickets/help-center-create-form.tsx

@@ -27,15 +27,14 @@
 
 import { useState, type ChangeEvent } from 'react';
 import { ContactForm } from '../contact';
-import { LoadingRegion } from '../loading/loading-region';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Input, Label } from '../ui';
+import { AnnouncedLoadingScope, useLoadingScope } from '../ui/loading-scope';
 import { RequiredMark } from '../ui/required-mark';
 import type { UseTicketActionsReturn } from './hooks/use-ticket-actions';
 
 const SUBJECT_MAX_CHARS = 200;
 
-export interface HelpCenterCreateFormProps {
+interface HelpCenterCreateFormLoadedProps {
   /** The full actions bag from `useTicketActions` — we read
    *  `submitTicket` from it. Passing the whole bag (rather than just
    *  the one method) keeps the wiring shape consistent with other
@@ -58,126 +57,43 @@ export interface HelpCenterCreateFormProps {
    *  is down. Wired from the parent's
    *  `useTicketActions.onSupportSystemDown` flag. */
   supportSystemDown?: boolean;
+  /** Not loading: the form. */
+  loading?: false;
 }
 
 /**
- * Loading placeholder that mirrors `<HelpCenterCreateForm>`'s outer
- * dimensions PIXEL-FOR-PIXEL so the page chrome doesn't shift when
- * identity resolves and the real form mounts.
- *
- * Verified against live DOM bounding-rect measurements at the lg
- * breakpoint — every section's top + height matches the real form to
- * the pixel (skeleton wrapper 556px == real wrapper 556px). Each
- * section uses the SAME flex / spacing / padding classes the real
- * form uses, so the gaps propagate identically; only the inner
- * content swaps an `<Input>` / `<Textarea>` / `<Button>` for a
- * same-sized animated `bg-ods-border` bar.
- *
- *   wrapper          → `p-6 content-md:p-8 content-lg:p-10` + border + rounded-3xl
- *   heading area     → 56px (`mb-6 content-md:mb-8` container, h-10 inner bar
- *                       + `mb-3 content-md:mb-4` = 40 + 16)
- *   subject section  → 79px (`h-[27px]` label + `mb-1` (4px) + h-12
- *                       input = 27 + 4 + 48)
- *   message section  → 127px (`h-[27px]` label + `mb-1` + h-24
- *                       textarea = 27 + 4 + 96)
- *   attachments row  → 28px (h-7 add button + helper label)
- *   footer           → 56px (h-12 button + `pt-2 mt-auto`)
- *   between sections → `space-y-4 content-md:space-y-6` (16/24px)
- *
- * One non-obvious detail: the real `<ContactForm>` renders 4
- * `<input type="hidden">` registrations BEFORE the visible Subject
- * section (for the hidden name/email/helpCategory/message fields).
- * Tailwind's `space-y-*` rule (`:not([hidden]) ~ :not([hidden])`)
- * counts `type="hidden"` inputs as siblings, so Subject gets a 24px
- * top margin. The skeleton mirrors those 4 hidden inputs exactly so
- * the spacing rule fires identically — without them the whole stack
- * shifts up 24px on every page load.
+ * The form's props. `loading: true` (the session identity is still being read): the form draws its own loading state
+ * (as in a page's loading scope), at the loaded form's size, and the other props may be left out.
  */
-export function HelpCenterCreateFormSkeleton({
-  region = true,
-}: {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-} = {}) {
-  return (
-    <LoadingRegion
-      label="Loading the form"
-      announce={region}
-      className="flex h-full flex-col rounded-2xl border border-ods-border p-6 content-md:rounded-3xl content-md:p-8 content-lg:p-10"
-    >
-      {/* Heading container — mirrors `mb-6 content-md:mb-8` + h2 with its own
-          `mb-3 content-md:mb-4` and `text-h2` height (32px font, line-height
-          ~1.25 → 40px). h-10 bar matches the rendered h2 height. */}
-      <div className="mb-6 content-md:mb-8">
-        <UnifiedSkeleton className="mb-3 h-10 w-72 rounded content-md:mb-4" />
-      </div>
-
-      {/* Form body — same `space-y-4 content-md:space-y-6` gap stack.
-          IMPORTANT: the real `<ContactForm>` prepends 4
-          `<input type="hidden">` registrations for the hidden
-          name/email/helpCategory/message fields (see contact-form.tsx).
-          `space-y-*` uses `:not([hidden]) ~ :not([hidden])` — `type="hidden"`
-          inputs aren't excluded — so those hidden inputs ARE counted as
-          siblings, and the visible Subject section gets a 24px top
-          margin. The skeleton mirrors that exact structure with the
-          same 4 hidden inputs so the Subject placeholder lands at the
-          same Y as the real Subject input. Removing them would shift
-          the whole stack up by 24px on every page load. */}
-      <div className="flex flex-grow flex-col space-y-4 content-md:space-y-6">
-        <input type="hidden" aria-hidden />
-        <input type="hidden" aria-hidden />
-        <input type="hidden" aria-hidden />
-        <input type="hidden" aria-hidden />
-        {/* Subject section — `flex flex-col` matches real form. Label
-            bar uses arbitrary `h-[27px]` to match the live Label
-            component (18px font * 1.5 line-height = 27px) and `mb-1`
-            (4px) which is Tailwind's default `mb-1`. Total section
-            height: 27 + 4 + 48 (h-12 input) = 79px, identical to
-            real form. */}
-        <div className="flex flex-col">
-          <UnifiedSkeleton className="mb-1 h-[27px] w-20 rounded" />
-          <UnifiedSkeleton className="h-12 w-full rounded" />
-        </div>
+export type HelpCenterCreateFormProps =
+  HelpCenterCreateFormLoadedProps | ({ loading: true } & Partial<Omit<HelpCenterCreateFormLoadedProps, 'loading'>>);
 
-        {/* Message section — `flex flex-col flex-grow` matches real
-            form (textarea fills remaining vertical space inside the
-            wrapper). h-24 bar (96px) = textarea's natural rendered
-            height when the wrapper has the standard list + footer
-            below it. Same `h-[27px]` + `mb-1` Label pattern as Subject:
-            27 + 4 + 96 = 127px, identical to real form. */}
-        <div className="flex flex-grow flex-col">
-          <UnifiedSkeleton className="mb-1 h-[27px] w-32 rounded" />
-          <UnifiedSkeleton className="h-24 w-full flex-grow rounded" />
-        </div>
-
-        {/* Attachments row — mirrors the real `flex flex-col gap-2`
-            container with chip strip (empty when no files staged) +
-            the h-7 add button + helper text. */}
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center gap-2">
-            <UnifiedSkeleton className="h-7 w-7 shrink-0 rounded" />
-            <UnifiedSkeleton className="h-4 w-40 rounded" />
-          </div>
-        </div>
-
-        {/* Footer — same `pt-2 mt-auto` so it sticks to the bottom.
-            Button bar is h-12 to match the real `<Button>` height
-            (48px). */}
-        <div className="mt-auto flex w-full flex-col items-center justify-end gap-4 pt-2 content-md:flex-row content-md:gap-6">
-          <UnifiedSkeleton className="h-4 w-72 rounded" />
-          <UnifiedSkeleton className="h-12 w-32 rounded" />
-        </div>
-      </div>
-    </LoadingRegion>
-  );
+/**
+ * The ticket form. ONE structure: while the session identity is read (`loading`) it is the SAME form in a loading
+ * scope (its title, labels and footer copy real, each field and control its own loading form), announced once (an
+ * outer scope has already said it); in a page's loading scope it draws the same way.
+ */
+export function HelpCenterCreateForm(props: HelpCenterCreateFormProps) {
+  const scoped = useLoadingScope();
+  if (props.loading || scoped) {
+    return (
+      <AnnouncedLoadingScope label="Loading the form" active className="contents">
+        <HelpCenterCreateFormBody sessionName="" sessionEmail="" />
+      </AnnouncedLoadingScope>
+    );
+  }
+  return <HelpCenterCreateFormBody {...props} />;
 }
 
-export function HelpCenterCreateForm({
+function HelpCenterCreateFormBody({
   actions,
   sessionName,
   sessionEmail,
   supportSystemDown = false,
-}: HelpCenterCreateFormProps) {
+}: Omit<HelpCenterCreateFormLoadedProps, 'actions' | 'loading'> & {
+  /** Absent in the loading form, where nothing submits. */
+  actions?: UseTicketActionsReturn;
+}) {
   const [subject, setSubject] = useState('');
   const [subjectError, setSubjectError] = useState<string | null>(null);
 
@@ -238,6 +154,7 @@ export function HelpCenterCreateForm({
           throw new Error('SUBJECT_REQUIRED');
         }
         setSubjectError(null);
+        if (!actions) throw new Error('TICKET_FORM_LOADING');
         const ok = await actions.submitTicket({
           subject: trimmedSubject,
           content: data.message,

package/src/components/tickets/help-center-list.tsx

@@ -27,7 +27,7 @@
  */
 
 import { useQueryClient } from '@tanstack/react-query';
-import { useCallback, useState } from 'react';
+import { type ReactNode, useCallback, useState } from 'react';
 import { useSearchParams, useRouter, usePathname } from '../../embed-shims';
 import { useScrollToHash } from '../../hooks/use-scroll-to-hash';
 import { toast as defaultToast } from '../../hooks/use-toast';
@@ -42,11 +42,11 @@ import { useChatIdentity } from '../chat/hooks/use-chat-identity';
 import { EmptyState } from '../empty-state';
 import { ListEmptyState } from '../list-empty-state';
 import { DevSectionPage } from '../shared/dev-section';
-import { DevCardRowSkeletonList } from '../shared/dev-section/dev-card-row';
 import { Button } from '../ui';
+import { LoadingItems } from '../ui/loading-scope';
 import { UnifiedPagination } from '../unified-pagination';
 import { HelpCenterCard } from './help-center-card';
-import { HelpCenterCreateForm, HelpCenterCreateFormSkeleton } from './help-center-create-form';
+import { HelpCenterCreateForm } from './help-center-create-form';
 import { useTicketActions } from './hooks/use-ticket-actions';
 import { TICKETS_PAGE_SIZE, useTicketsList } from './hooks/use-tickets-list';
 import type { AnyTicket, OptimisticTicket, TicketsCacheSlot } from './types';
@@ -103,9 +103,13 @@ export function HelpCenterList({ toast = defaultToast, backButton, title, shell
         backButton={backButton}
         title={title}
         shell={shell}
-        preControls={<HelpCenterCreateFormSkeleton />}
+        preControls={<HelpCenterCreateForm loading />}
       >
-        <DevCardRowSkeletonList rows={TICKETS_PAGE_SIZE} />
+        <HelpCenterRowsFrame>
+          <LoadingItems count={TICKETS_PAGE_SIZE}>
+            {() => <HelpCenterCard ticket={null} data-loading-item />}
+          </LoadingItems>
+        </HelpCenterRowsFrame>
       </DevSectionPage>
     );
   }
@@ -329,15 +333,13 @@ function HelpCenterListAuthed({
 
       {!error && (
         <div className="w-full">
-          {isLoading ? (
-            <DevCardRowSkeletonList rows={pageSize} />
-          ) : !hasResults && isFetching ? (
-            // Bridge state — background refetch in flight and the
-            // optimistic placeholder was just removed by the mutation
-            // callback. Without this branch "No tickets yet" would flash
-            // for ~50ms between `removeOptimistic` and the server
-            // response landing.
-            <DevCardRowSkeletonList rows={1} />
+          {/* Loading, or the bridge state (a background refetch in flight right after the mutation callback removed
+              the optimistic placeholder: without it "No tickets yet" would flash for ~50ms): one page of rows, each
+              drawing itself. */}
+          {isLoading || (!hasResults && isFetching) ? (
+            <HelpCenterRowsFrame>
+              <LoadingItems count={pageSize}>{() => <HelpCenterCard ticket={null} data-loading-item />}</LoadingItems>
+            </HelpCenterRowsFrame>
           ) : !hasResults ? (
             <ListEmptyState
               isFiltered={hasActiveFilters}
@@ -358,18 +360,11 @@ function HelpCenterListAuthed({
               }}
             />
           ) : (
-            // `overflow-clip` (NOT `overflow-hidden`) — both visually
-            // clip the rounded corners, but `hidden` makes the element
-            // a "scroll container" per CSSOM spec, which causes
-            // `scrollIntoView` calls inside (`<HelpCenterCard>` click
-            // handlers) to try scrolling THIS div (can't, overflow
-            // hidden) instead of bubbling up to the window. `clip`
-            // keeps the visual clip but NOT the scroll-container
-            // status, so click-to-scroll actually moves the page.
-            <div className="w-full overflow-clip rounded-[6px] border border-ods-border bg-ods-card">
+            <HelpCenterRowsFrame>
               {merged.map(ticket => (
                 <HelpCenterCard
                   key={ticket.id}
+                  data-loading-item
                   id={devSectionAnchorId('ticket', ticket.external_id)}
                   ticket={ticket}
                   expanded={expandedTicketId === ticket.id}
@@ -384,7 +379,7 @@ function HelpCenterListAuthed({
                   onClearReplyError={() => actions.clearReplyError(ticket.external_id)}
                 />
               ))}
-            </div>
+            </HelpCenterRowsFrame>
           )}
         </div>
       )}
@@ -404,3 +399,10 @@ function HelpCenterListAuthed({
     </DevSectionPage>
   );
 }
+
+/** The bordered card the rows sit in, loaded and loading. `overflow-clip` (NOT `overflow-hidden`): both clip the
+ *  rounded corners, but `hidden` makes the element a scroll container, so a row's `scrollIntoView` would try to scroll
+ *  THIS div instead of the page. */
+function HelpCenterRowsFrame({ children }: { children: ReactNode }) {
+  return <div className="w-full overflow-clip rounded-[6px] border border-ods-border bg-ods-card">{children}</div>;
+}

package/src/components/tickets/index.ts

@@ -12,11 +12,7 @@ export { TicketReplyComposer, type TicketReplyComposerProps } from './ticket-rep
 // their own `<PageShell>` to get the same UX.
 export { HelpCenterList, type HelpCenterListProps } from './help-center-list';
 export { HelpCenterCard, type HelpCenterCardProps } from './help-center-card';
-export {
-  HelpCenterCreateForm,
-  HelpCenterCreateFormSkeleton,
-  type HelpCenterCreateFormProps,
-} from './help-center-create-form';
+export { HelpCenterCreateForm, type HelpCenterCreateFormProps } from './help-center-create-form';
 export { useTicketsList } from './hooks/use-tickets-list';
 export { useTicketActions, mapTicketActionError, type UseTicketActionsReturn } from './hooks/use-ticket-actions';
 export { useTicketEngagements, type TicketEngagement, type TicketEngagementFile } from './hooks/use-ticket-engagements';

package/src/components/tickets/ticket-center.tsx

@@ -25,15 +25,14 @@ import { type ReactNode, useCallback, useState } from 'react';
 import { toast as defaultToast } from '../../hooks/use-toast';
 import type { DataSync } from '../../types/data-sync';
 import { devSectionAnchorId } from '../../utils/dev-sections/dev-section-param-keys';
-import { ChatTicketItemSkeleton } from '../chat/entity-cards/chat-ticket-item';
 import { useChatIdentity } from '../chat/hooks/use-chat-identity';
 import { EmptyState } from '../empty-state';
 import { usePageDataSync } from '../layout/page-data-sync';
-import { LoadingRegion } from '../loading/loading-region';
+import { LoadingFallback } from '../loading/loading-fallback';
 import { Button } from '../ui/button';
 import { Card } from '../ui/card';
 import { DataSyncLine } from '../ui/data-attribution';
-import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
 import { useTicketActions } from './hooks/use-ticket-actions';
 import { TICKETS_PAGE_SIZE, useTicketsList } from './hooks/use-tickets-list';
 import { TicketOpenForm, type TicketOpenFormProps } from './ticket-open-form';
@@ -44,7 +43,6 @@ import { isOptimistic } from './types';
 /** The center's layout. */
 const TICKET_CENTER_CLASS = 'flex flex-col gap-6';
 const TICKET_LIST_BLOCK_CLASS = 'flex flex-col gap-2';
-const TICKET_ROW_FRAME_CLASS = 'border-b border-ods-border last:border-b-0';
 
 export interface TicketCenterProps {
   /** Optional toast override (test-friendly). Defaults to the lib's
@@ -153,6 +151,7 @@ function TicketCenterAuthed({
       renderRow={ticket => (
         <TicketRow
           key={ticket.id}
+          data-loading-item
           id={devSectionAnchorId('ticket', ticket.external_id)}
           ticket={ticket}
           expanded={expandedTicketId === ticket.id}
@@ -182,20 +181,18 @@ function TicketCenterPending({
   // The page states the sync under its title: the list's header then draws no line, loading or loaded.
   const syncInPage = usePageDataSync(null, true);
   return (
-    <LoadingRegion label="Loading tickets" announce={region}>
-      <LoadingScope>
-        <TicketCenterView
-          tickets={[]}
-          loading
-          formInert
-          sync={syncInPage ? undefined : null}
-          onSubmit={() => Promise.resolve(false)}
-          isSubmitting={false}
-          supportSystemDown={false}
-          renderRow={() => null}
-        />
-      </LoadingScope>
-    </LoadingRegion>
+    <LoadingFallback label="Loading tickets" status={region}>
+      <TicketCenterView
+        tickets={[]}
+        loading
+        formInert
+        sync={syncInPage ? undefined : null}
+        onSubmit={() => Promise.resolve(false)}
+        isSubmitting={false}
+        supportSystemDown={false}
+        renderRow={() => null}
+      />
+    </LoadingFallback>
   );
 }
 
@@ -310,15 +307,7 @@ function TicketListHeader({
 function TicketListSkeleton() {
   return (
     <Card className="overflow-hidden">
-      {Array.from({ length: TICKETS_PAGE_SIZE }, (_, i) => (
-        <div
-          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-          key={i}
-          className={TICKET_ROW_FRAME_CLASS}
-        >
-          <ChatTicketItemSkeleton />
-        </div>
-      ))}
+      <LoadingItems count={TICKETS_PAGE_SIZE}>{() => <TicketRow loading data-loading-item />}</LoadingItems>
     </Card>
   );
 }

package/src/components/tickets/ticket-detail-drawer.tsx

@@ -25,11 +25,12 @@ import { useEffect, useRef } from 'react';
 import { useStickToBottom } from 'use-stick-to-bottom';
 import { LoadingRegion } from '../loading/loading-region';
 import { formatRelativeTime } from './../../utils/date-utils';
-import { ChatMessageRow, ChatMessageRowSkeleton } from './../chat/chat-message-row';
+import { ChatMessageRow } from './../chat/chat-message-row';
 import { useChatIdentity } from './../chat/hooks/use-chat-identity';
 import type { ChatAttachment } from './../chat/utils/chat-attachment-markdown';
 import { EmptyState } from './../empty-state';
 import { Button } from './../ui/button';
+import { LoadingItems } from './../ui/loading-scope';
 import { SquareAvatar } from './../ui/square-avatar';
 import { TicketAttachmentsList, type TicketAttachment } from './../ui/ticket-attachments-list';
 import { useTicketEngagements } from './hooks/use-ticket-engagements';
@@ -160,7 +161,7 @@ const TURN_SEPARATOR_RE = /[\s]{1,16}---[\s]{1,16}/g;
 // Slack-channel feed framing — ported from the hub's live community feed
 // (`components/slack/chat-interface.tsx`: `:62` bounded card, `:83` padding +
 // `overflow-y-auto`, `:85` `gap-4 md:gap-6` message column). Single source
-// within the ticket feed; the delivery `DevCardRowSkeletonList` keeps its own
+// within the ticket feed; the Help Center rows keep their own
 // (separate, untouched) frame literal. `max-h` is responsive (vs Slack's fixed
 // height).
 const TICKET_FEED_FRAME = 'bg-ods-card border border-ods-border rounded-[6px] overflow-y-auto w-full';
@@ -299,9 +300,9 @@ function TicketTimelinePanel({ ticket }: { ticket: AnyTicket }) {
     return (
       <div className={`${TICKET_FEED_FRAME} ${TICKET_FEED_HEIGHT}`}>
         <LoadingRegion label="Loading messages" className={TICKET_FEED_INNER}>
-          {Array.from({ length: TICKET_FEED_SKELETON_ROWS }, (_, i) => (
-            <ChatMessageRowSkeleton key={i} />
-          ))}
+          <LoadingItems count={TICKET_FEED_SKELETON_ROWS}>
+            {() => <ChatMessageRow loading displayName="" body="" data-loading-item />}
+          </LoadingItems>
         </LoadingRegion>
       </div>
     );
@@ -346,6 +347,7 @@ function TicketTimelinePanel({ ticket }: { ticket: AnyTicket }) {
           return (
             <ChatMessageRow
               key={`body-${i}-${turn.slice(0, 24)}`}
+              data-loading-item
               displayName={customerName}
               avatarUrl={customerAvatar}
               body={text}
@@ -443,6 +445,7 @@ function TicketTimelinePanel({ ticket }: { ticket: AnyTicket }) {
           return (
             <ChatMessageRow
               key={eng.id}
+              data-loading-item
               displayName={author}
               avatarUrl={avatarSrc}
               timeLabel={eng.createdAt ? formatRelativeTime(eng.createdAt) : null}

package/src/components/tickets/ticket-open-form.tsx

@@ -25,6 +25,7 @@ import type { ChatAttachment } from '../chat/utils/chat-attachment-markdown';
 import { Button } from '../ui/button';
 import { Card } from '../ui/card';
 import { Input } from '../ui/input';
+import { Label } from '../ui/label';
 import { Textarea } from '../ui/textarea';
 import { TICKET_TEXT_MAX_CHARS } from './types';
 
@@ -92,9 +93,9 @@ export function TicketOpenForm({ onSubmit, isSubmitting, supportSystemDown }: Ti
 
         <div className="flex min-w-0 flex-1 flex-col gap-4">
           <div>
-            <label htmlFor="ticket-subject" className="mb-1 block text-ods-text-primary text-h6">
+            <Label htmlFor="ticket-subject" className="mb-1">
               Ticket Subject
-            </label>
+            </Label>
             <Input
               id="ticket-subject"
               type="text"
@@ -107,9 +108,9 @@ export function TicketOpenForm({ onSubmit, isSubmitting, supportSystemDown }: Ti
           </div>
 
           <div>
-            <label htmlFor="ticket-content" className="mb-1 block text-ods-text-primary text-h6">
+            <Label htmlFor="ticket-content" className="mb-1">
               Your Message
-            </label>
+            </Label>
             <Textarea
               id="ticket-content"
               placeholder="Describe your issue or question in detail..."

package/src/components/tickets/ticket-row.tsx

@@ -23,11 +23,18 @@ import { formatRelativeTime } from '../../utils/date-utils';
 import { scrollElementIntoView } from '../../utils/scroll-into-view';
 import { ChatTicketItem, type ChatTicketItemData } from '../chat/entity-cards/chat-ticket-item';
 import { Collapsible, CollapsibleContent } from '../collapsible';
+import { loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import { TicketDetailDrawer, type TicketDetailDrawerProps } from './ticket-detail-drawer';
 import type { AnyTicket } from './types';
 import { isOptimistic } from './types';
 
-export interface TicketRowProps {
+/** The row's frame (its bottom rule), read by the loaded row and its loading form. */
+const TICKET_ROW_FRAME_CLASS = 'border-b border-ods-border last:border-b-0';
+/** The row's outer element: the deep-link target, offset under a sticky header. */
+const TICKET_ROW_OUTER_CLASS = 'scroll-mt-24';
+
+/** A read ticket's row. */
+export interface TicketRowLoadedProps {
   ticket: AnyTicket;
   expanded: boolean;
   onToggle: (ticketId: string) => void;
@@ -44,9 +51,38 @@ export interface TicketRowProps {
    *  resolves it. `scroll-mt-24` is already baked into the outer
    *  element regardless. */
   id?: string;
+  loading?: false;
+}
+
+/** A row while its ticket is read: the same frame with the summary tile's loading form, and no drawer. */
+export interface TicketRowLoadingProps {
+  loading: true;
+  id?: string;
+}
+
+/** A ticket row, or (`loading`) its loading form. List markers (`data-loading-item`) are forwarded in both forms. */
+export type TicketRowProps = (TicketRowLoadedProps | TicketRowLoadingProps) & {
+  [key: `data-${string}`]: unknown;
+};
+
+/**
+ * A ticket row. ONE switch (`useLoadingScope() || loading`): while the ticket is read the row draws the same frame
+ * with `ChatTicketItem loading` (its own loading form), else the summary tile and its drawer.
+ */
+export function TicketRow(props: TicketRowProps) {
+  if (useLoadingScope() || props.loading) {
+    return (
+      <div id={props.id} className={TICKET_ROW_OUTER_CLASS} {...loadingItemProps(props)}>
+        <div className={TICKET_ROW_FRAME_CLASS}>
+          <ChatTicketItem loading />
+        </div>
+      </div>
+    );
+  }
+  return <TicketRowLoaded {...props} />;
 }
 
-export function TicketRow({
+function TicketRowLoaded({
   ticket,
   expanded,
   onToggle,
@@ -57,7 +93,8 @@ export function TicketRow({
   onReopen,
   onActionCollapsed,
   id,
-}: TicketRowProps) {
+  ...markers
+}: TicketRowLoadedProps & { [key: `data-${string}`]: unknown }) {
   // Optimistic placeholders have no drawer — the real id hasn't
   // arrived yet, so action targets would be undefined.
   const optimistic = isOptimistic(ticket);
@@ -116,8 +153,8 @@ export function TicketRow({
   };
 
   return (
-    <div ref={rowRef} id={id} className="scroll-mt-24">
-      <Collapsible open={expanded && !optimistic} className="border-b border-ods-border last:border-b-0">
+    <div ref={rowRef} id={id} className={TICKET_ROW_OUTER_CLASS} {...loadingItemProps(markers)}>
+      <Collapsible open={expanded && !optimistic} className={TICKET_ROW_FRAME_CLASS}>
         <ChatTicketItem
           ticket={tileData}
           onClick={optimistic ? undefined : handleClick}