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

package/src/components/shared/roadmap/roadmap-grid.tsx

@@ -29,12 +29,63 @@ import { contentFetch } from '../../../utils/embed-content-fetch';
 import { RoadmapCard } from '../../chat/entity-cards/roadmap-card';
 import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
 import { EmptyState } from '../../empty-state';
+import { LoadingRegion } from '../../loading/loading-region';
 import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../ui';
 import { useLoadingScope } from '../../ui/loading-scope';
-import { RoadmapGridSkeleton, roadmapGridClass } from './roadmap-grid-skeleton';
 import { useRoadmapVoting, type UseRoadmapVotingOptions } from './use-roadmap-voting';
 
+/**
+ * The grid's loading form: each placeholder is `RoadmapCard`'s own loading form.
+ */
+
+/**
+ * The grid's box, read by `RoadmapGrid` and by its skeleton: one column, two from `content-md` when `columns` is 2,
+ * and the desktop left margin that aligns it with the page hero's title. LITERAL class strings: an interpolated
+ * `content-md:grid-cols-${n}` is invisible to Tailwind's scanner and is never generated.
+ */
+function roadmapGridClass(columns: 1 | 2, showLeftMargin: boolean): string {
+  return `grid grid-cols-1 gap-6 ${columns === 2 ? 'content-md:grid-cols-2' : ''} ${
+    showLeftMargin ? 'content-md:ml-[120px]' : ''
+  }`;
+}
+
+/**
+ * Cards the grid's skeleton draws when its host states no count: a typical count. The roadmap lists every item it
+ * holds (no page, no limit); a host that reads a known number of items passes it as `count`.
+ */
+const ROADMAP_GRID_SKELETON_CARDS = 4;
+
+interface RoadmapGridSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+  /** Skeleton cards: the number of items the host reads. Default `ROADMAP_GRID_SKELETON_CARDS`, a typical count. */
+  count?: number;
+  /** Show the desktop left margin (~120px) that aligns the grid with
+   *  the page hero's title block. Default `true`. Related-content rails
+   *  inside narrower surfaces (e.g. the release detail page) pass `false`. */
+  showLeftMargin?: boolean;
+  /** The grid's columns from `content-md` (`RoadmapGrid`'s `columns`). Default `2`. */
+  columns?: 1 | 2;
+}
+
+function RoadmapGridSkeleton({
+  region = true,
+  count = ROADMAP_GRID_SKELETON_CARDS,
+  showLeftMargin = true,
+  columns = 2,
+}: RoadmapGridSkeletonProps) {
+  return (
+    <LoadingRegion label="Loading the roadmap" announce={region} className={roadmapGridClass(columns, showLeftMargin)}>
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="min-w-0" data-loading-item>
+          <RoadmapCard loading />
+        </div>
+      ))}
+    </LoadingRegion>
+  );
+}
+
 const DEFAULT_BUILD_REFRESH_URL = (taskId: string) => `/api/roadmap/${taskId}`;
 const BACKLOG = 'Backlog';
 
@@ -131,7 +182,7 @@ export interface RoadmapGridProps {
    * Default `ROADMAP_GRID_SKELETON_CARDS`, a typical count for a roadmap that lists everything it holds.
    */
   skeletonCount?: number;
-  /** @deprecated Use `skeletonCount`. */
+  /** @deprecated Ignored: the skeleton draws `skeletonCount` (a list draws its full count, never a fold). */
   fold?: number;
 }
 
@@ -186,7 +237,7 @@ const QUARTER_CONTENT_INNER_CLASS = 'pb-4';
  * The quarter-grouped grid while its items are read: one quarter, its heading and item count as bars, then the
  * grid's card skeletons.
  */
-export function RoadmapGridQuarterSkeleton({
+function RoadmapGridQuarterSkeleton({
   showLeftMargin = true,
   columns = 2,
   count,
@@ -226,9 +277,7 @@ export function RoadmapGrid({
   quartersToKeepClosed = 2,
   isLoading = false,
   skeletonCount,
-  fold,
 }: RoadmapGridProps) {
-  const skeletonCards = skeletonCount ?? fold;
   // ── Voting (shared across all quarters) ──
   const { getVote, toggleVote } = useRoadmapVoting(votingOptions);
   const inScope = useLoadingScope();
@@ -323,9 +372,9 @@ export function RoadmapGrid({
   // empty state. The page's loading region announces a scope's; a host's own read announces itself.
   if (inScope || isLoading) {
     return groupByQuarter ? (
-      <RoadmapGridQuarterSkeleton showLeftMargin={showLeftMargin} columns={columns} count={skeletonCards} />
+      <RoadmapGridQuarterSkeleton showLeftMargin={showLeftMargin} columns={columns} count={skeletonCount} />
     ) : (
-      <RoadmapGridSkeleton region={!inScope} count={skeletonCards} showLeftMargin={showLeftMargin} columns={columns} />
+      <RoadmapGridSkeleton region={!inScope} count={skeletonCount} showLeftMargin={showLeftMargin} columns={columns} />
     );
   }
 

package/src/components/shared/roadmap/roadmap-view.tsx

@@ -22,10 +22,12 @@ import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
 import { usePageDataSync } from '../../layout/page-data-sync';
 import { DataSyncLine } from '../../ui/data-attribution';
 import { LoadError } from '../../ui/error-state';
-import { RoadmapGrid, RoadmapGridQuarterSkeleton } from './roadmap-grid';
+import { RoadmapGrid } from './roadmap-grid';
 import type { UseRoadmapVotingOptions } from './use-roadmap-voting';
 
 const DEFAULT_ENDPOINT = '/api/roadmap';
+/** The grid's items before the read answers (it draws its loading form). */
+const NO_ITEMS: RoadmapItem[] = [];
 /** The list under its sync line (the line the endpoint's `sync` states). */
 const SYNCED_LIST_CLASS = 'flex w-full flex-col gap-[var(--spacing-system-lf)]';
 // Defaults sourced from the ONE param-key registry the chrome (OPENFRAME_DEV_SECTIONS) also
@@ -102,8 +104,8 @@ export function RoadmapView({
     return (
       <div className={SYNCED_LIST_CLASS}>
         {!syncInPage && <DataSyncLine loading />}
-        {/* The view groups by quarter, so its skeleton is the quarter-grouped grid's. */}
-        <RoadmapGridQuarterSkeleton showLeftMargin={showLeftMargin} />
+        {/* The view groups by quarter: the quarter-grouped grid draws its own loading form. */}
+        <RoadmapGrid items={NO_ITEMS} isLoading groupByQuarter showLeftMargin={showLeftMargin} />
       </div>
     );
   }

package/src/components/smooth-accordion.tsx

@@ -46,8 +46,6 @@ export const SmoothAccordionTrigger = forwardRef<HTMLButtonElement, SmoothAccord
         <ChevronButton
           size="md"
           isExpanded={false}
-          backgroundColor="transparent"
-          borderColor="var(--color-border-default)"
           className="transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180"
         />
       </AccordionPrimitive.Trigger>

package/src/components/social-icon-row.tsx

@@ -20,6 +20,11 @@ interface SocialIconRowProps {
    *  presentation-only here — the caller must still gate which links it passes
    *  server-side. Default false keeps a single flat row. */
   groupByVisibility?: boolean;
+  /**
+   * The links are a read list (a person's profiles, whose number is the data's): every button carries
+   * `data-loading-item`, as the caller's loading state's buttons do. Default false (a fixed set, e.g. the defaults).
+   */
+  listItems?: boolean;
 }
 
 const defaultLinks: SocialIconLink[] = [
@@ -93,6 +98,7 @@ export function SocialIconRow({
   variant,
   compact = false,
   groupByVisibility = false,
+  listItems = false,
 }: SocialIconRowProps) {
   // ── Compact design rationale ──────────────────────────────────────────
   // Page-level identity/share rows read as METADATA, not CTAs. The major
@@ -110,6 +116,7 @@ export function SocialIconRow({
   // stretch untouched.
   const resolvedVariant = variant !== undefined ? variant : compact ? 'transparent' : 'outline';
 
+  const marker = { 'data-loading-item': listItems || undefined };
   const renderButton = (link: SocialIconLink, index: number) => {
     const ariaLabel = link.label || link.platform;
     return link.onClick ? (
@@ -120,6 +127,7 @@ export function SocialIconRow({
         {...socialIconButtonProps(compact)}
         aria-label={ariaLabel}
         onClick={link.onClick}
+        {...marker}
       >
         {renderSocialIcon(link.platform)}
       </Button>
@@ -134,6 +142,7 @@ export function SocialIconRow({
         href={link.href}
         openInNewTab
         aria-label={ariaLabel}
+        {...marker}
       >
         {renderSocialIcon(link.platform)}
       </Button>

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

@@ -16,18 +16,56 @@
  */
 
 import { useCallback, useEffect, useRef } from 'react';
+import { cn } from '../../utils/cn';
 import { formatRelativeTime } from '../../utils/date-utils';
 import { STICKY_HEADER_OFFSET_PX } from '../../utils/same-page-hash-nav';
 import { scrollElementIntoView } from '../../utils/scroll-into-view';
 import { getStatusColorScheme } from '../chat/utils/agent-status-message';
 import { DevCardRowContent } from '../shared/dev-section/dev-card-row';
 import { StatusBadge, type StatusBadgeProps } from '../ui';
+import { Button } from '../ui/button';
+import { loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import { TicketDetailDrawer, type TicketDetailDrawerProps } from './ticket-detail-drawer';
 import { useOptionalTicketLive } from './ticket-live-provider';
 import type { AnyTicket } from './types';
 import { isOptimistic } from './types';
 
-export interface HelpCenterCardProps {
+/** A row whose ticket is still read (a list's loading form): only its DOM id and the list's markers. */
+export interface HelpCenterCardLoadingProps {
+  ticket: null;
+  id?: string;
+  /** The list's markers (`data-loading-item`), on the row's root. */
+  [key: `data-${string}`]: unknown;
+}
+
+/** The row's root and its summary's padding, loaded and loading (one box). */
+const HELP_CENTER_ROW_CLASS = 'border-b border-ods-border last:border-b-0';
+const HELP_CENTER_SUMMARY_PAD_CLASS = 'w-full p-[12px] content-md:p-[16px]';
+
+export type HelpCenterCardProps = HelpCenterCardLoadedProps | HelpCenterCardLoadingProps;
+
+/**
+ * One Help Center row, loaded and loading. ONE switch: in a loading scope, or with `ticket={null}` (the list's loading
+ * form), it is its own {@link HelpCenterCardSkeleton}; the list never picks it.
+ */
+export function HelpCenterCard(props: HelpCenterCardProps) {
+  const inScope = useLoadingScope();
+  if (inScope || props.ticket === null) return <HelpCenterCardSkeleton id={props.id} {...loadingItemProps(props)} />;
+  return <HelpCenterCardLoaded {...props} />;
+}
+
+/** A row while its ticket is read: the row's own box, its summary the shared row content's skeleton. */
+function HelpCenterCardSkeleton({ id, ...props }: { id?: string; [key: `data-${string}`]: unknown }) {
+  return (
+    <div id={id} className={HELP_CENTER_ROW_CLASS} aria-hidden {...loadingItemProps(props)}>
+      <div className={HELP_CENTER_SUMMARY_PAD_CLASS}>
+        <DevCardRowContent loading title="" subtitle="" description="" rightBadges={null} />
+      </div>
+    </div>
+  );
+}
+
+export interface HelpCenterCardLoadedProps {
   ticket: AnyTicket;
   expanded: boolean;
   onToggle: (id: string) => void;
@@ -47,9 +85,11 @@ export interface HelpCenterCardProps {
    *  offset is already baked in via `STICKY_HEADER_OFFSET_PX` so the row
    *  lands BELOW the chrome regardless of whether `id` is set. */
   id?: string;
+  /** The list's markers (`data-loading-item`), on the row's root. */
+  [key: `data-${string}`]: unknown;
 }
 
-export function HelpCenterCard({
+function HelpCenterCardLoaded({
   ticket,
   expanded,
   onToggle,
@@ -62,7 +102,8 @@ export function HelpCenterCard({
   replyError,
   onClearReplyError,
   id,
-}: HelpCenterCardProps) {
+  ...props
+}: HelpCenterCardLoadedProps) {
   const optimistic = isOptimistic(ticket);
   const rawStatus = (ticket.status ?? 'OPEN').toUpperCase();
   const priority = (ticket.priority ?? '').toUpperCase();
@@ -123,7 +164,9 @@ export function HelpCenterCard({
   const rightBadges = (
     <>
       {unreadCount > 0 && (
+        // Only rows with unread replies carry it; the row's loading form draws the status badge alone.
         <StatusBadge
+          data-loading-optional
           text={`${unreadCount} NEW`}
           colorScheme="warning"
           variant="card"
@@ -137,7 +180,9 @@ export function HelpCenterCard({
         className="border border-ods-border"
       />
       {priority && (
+        // Not every ticket states a priority; the row's loading form draws the status badge alone.
         <StatusBadge
+          data-loading-optional
           text={priority}
           colorScheme={mapPriorityScheme(priority)}
           variant="card"
@@ -152,25 +197,28 @@ export function HelpCenterCard({
       ref={rowRef}
       id={id}
       style={{ scrollMarginTop: STICKY_HEADER_OFFSET_PX }}
-      className={`border-b border-ods-border last:border-b-0 ${optimistic ? 'opacity-60' : ''}`}
+      className={`${HELP_CENTER_ROW_CLASS} ${optimistic ? 'opacity-60' : ''}`}
       aria-busy={optimistic || undefined}
+      {...loadingItemProps(props)}
     >
-      <button
+      <Button
+        variant="card"
         type="button"
         onClick={isExpandable ? handleClick : undefined}
         disabled={!isExpandable}
         aria-expanded={isExpandable ? isExpanded : undefined}
         aria-controls={isExpanded ? `help-center-drawer-${ticket.id}` : undefined}
-        className="w-full p-[12px] text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent disabled:cursor-default content-md:p-[16px]"
       >
-        <DevCardRowContent
-          title={title}
-          subtitle={subtitle}
-          description={description}
-          emptyDescription="No description provided"
-          rightBadges={rightBadges}
-        />
-      </button>
+        <span className={cn('block', HELP_CENTER_SUMMARY_PAD_CLASS)}>
+          <DevCardRowContent
+            title={title}
+            subtitle={subtitle}
+            description={description}
+            emptyDescription="No description provided"
+            rightBadges={rightBadges}
+          />
+        </span>
+      </Button>
 
       {isExpanded && (
         <div id={`help-center-drawer-${ticket.id}`}>

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';