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

package/src/components/chat/entity-cards/admin-content-card-grid.tsx

@@ -2,52 +2,73 @@
 
 import type { ComponentType, ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
-import { LoadingRegion } from '../../loading/loading-region';
-import { AdminContentCardSkeleton } from './admin-content-card';
+import { LoadingFallback } from '../../loading/loading-fallback';
+import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
+import { AdminContentCard } from './admin-content-card';
 
 /** THE admin card grid: columns and gap shared by the live grid and its skeleton. */
 export const ADMIN_CONTENT_CARD_GRID_CLASS =
   'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-system-lf)]';
+/** One cell of the grid, the same box in both forms: a card stretched to its row's height. */
+const GRID_CELL_CLASS = 'h-full';
 
-export interface AdminContentCardGridSkeletonProps {
+/**
+ * The grid's default card in its loading form: `AdminContentCard` itself, drawn in the reserved rows with its actions
+ * row, so the card draws its own skeleton (one switch per component).
+ */
+const DEFAULT_LOADING_CARD = <AdminContentCard loading reserveRows title="" actions />;
+
+/** The card a loading cell draws: the host's card with `loading`, else the deprecated `Skeleton`, else the default. */
+function loadingCardOf(loadingCard: ReactNode, Skeleton: ComponentType<{ className?: string }> | undefined): ReactNode {
+  if (loadingCard !== undefined) return loadingCard;
+  return Skeleton ? <Skeleton /> : DEFAULT_LOADING_CARD;
+}
+
+interface AdminContentCardGridSkeletonProps {
   /**
    * How many placeholder cards: ONE FULL PAGE, the host's page size (the `pageSize` the grid it stands in for
    * loads). A host that pages its grid passes it; the default `12` is the typical admin page, for a host that
    * states none.
    */
   count?: number;
-  /** The placeholder card. Default `AdminContentCardSkeleton`. */
+  /** The grid's card rendered with `loading` (it draws its own loading form). Default `AdminContentCard` loading. */
+  loadingCard?: ReactNode;
+  /** @deprecated Pass `loadingCard`: the host's card rendered with `loading`, never a separate skeleton component. */
   Skeleton?: ComponentType<{ className?: string }>;
   className?: string;
   /** What is loading, read once by a screen reader. Default "Loading". */
   label?: string;
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  /** The loading state announces itself (`LoadingFallback`'s status). `false` inside another loading region. Default `true`. */
   region?: boolean;
 }
 
+/** Cards a loading grid draws when its host names no page size: a typical page. */
+const ADMIN_CONTENT_CARD_GRID_SKELETON_CARDS = 12;
+
 /**
- * The grid's loading state on its own: one page of placeholder cards in the
- * grid's columns. `AdminContentCardGrid` draws exactly this while it loads; a
- * page that has no grid yet (a Suspense fallback) draws it directly.
+ * The grid's loading state on its own: one page of cards, each in its own loading form (drawn in a loading scope, so
+ * a card that switches itself draws its own skeleton), in the grid's columns and cells, each cell marked as a list
+ * item like a loaded one. `AdminContentCardGrid` draws exactly this while it loads; a page that has no grid yet (a
+ * Suspense fallback) draws it directly.
  */
-export function AdminContentCardGridSkeleton({
-  count = 12,
-  Skeleton = AdminContentCardSkeleton,
+function AdminContentCardGridSkeleton({
+  count = ADMIN_CONTENT_CARD_GRID_SKELETON_CARDS,
+  loadingCard,
+  Skeleton,
   className,
   label = 'Loading',
   region = true,
 }: AdminContentCardGridSkeletonProps) {
   return (
-    <LoadingRegion
-      label={label}
-      announce={region}
-      className={cn(ADMIN_CONTENT_CARD_GRID_CLASS, className)}
-      data-state="loading"
-    >
-      {Array.from({ length: count }, (_, i) => (
-        <Skeleton key={i} />
-      ))}
-    </LoadingRegion>
+    <LoadingFallback label={label} status={region} className={cn(ADMIN_CONTENT_CARD_GRID_CLASS, className)}>
+      <LoadingItems count={count}>
+        {() => (
+          <div className={GRID_CELL_CLASS} data-loading-item>
+            {loadingCardOf(loadingCard, Skeleton)}
+          </div>
+        )}
+      </LoadingItems>
+    </LoadingFallback>
   );
 }
 
@@ -55,16 +76,18 @@ export interface AdminContentCardGridProps<T> {
   items: readonly T[];
   /** One page of cards: the loading skeleton count and the reserved slot count. */
   pageSize: number;
-  loading: boolean;
+  /** The page is still being read (a loading scope does the same): one page of cards in their loading form. */
+  loading?: boolean;
   itemKey: (item: T) => string | number;
   renderCard: (item: T) => ReactNode;
   /** Rendered when `items` is empty, floated top-aligned over a full page of reserved slots. */
   empty: ReactNode;
   /**
-   * The placeholder card, used for loading and for reserved slots. Default
-   * `AdminContentCardSkeleton`; a grid of another card (e.g. `HowIWorkCard`)
-   * passes that card's own skeleton so the heights match.
+   * The grid's card rendered with `loading` (e.g. `<HowIWorkCard loading />`), drawn in every cell while loading and
+   * in the reserved (invisible) slots, so the heights match. Default `AdminContentCard`'s own loading form.
    */
+  loadingCard?: ReactNode;
+  /** @deprecated Pass `loadingCard`: the host's card rendered with `loading`, never a separate skeleton component. */
   Skeleton?: ComponentType<{ className?: string }>;
   className?: string;
   /** What is loading, read once by a screen reader while `loading`. Default "Loading". */
@@ -75,7 +98,7 @@ export interface AdminContentCardGridProps<T> {
 
 /**
  * A paginated card grid that is ONE height in every state: the card-grid
- * counterpart of the admin `Table`'s `skeletonRows` + `keepHeightWhenEmpty`.
+ * counterpart of `DataTable.Body`'s `skeletonRows` + `minRows`.
  * `AdminContentCard`s rendered in it pass `reserveRows`, so a full page is the
  * height of the reserved one.
  *
@@ -89,31 +112,38 @@ export interface AdminContentCardGridProps<T> {
 export function AdminContentCardGrid<T>({
   items,
   pageSize,
-  loading,
+  loading: loadingProp,
   itemKey,
   renderCard,
   empty,
-  Skeleton = AdminContentCardSkeleton,
+  loadingCard,
+  Skeleton,
   className,
   loadingLabel,
   loadingRegion,
 }: AdminContentCardGridProps<T>) {
   const gridClass = cn(ADMIN_CONTENT_CARD_GRID_CLASS, className);
+  const loading = useLoadingScope() || loadingProp;
 
   if (loading)
     return (
       <AdminContentCardGridSkeleton
         count={pageSize}
-        Skeleton={Skeleton}
+        loadingCard={loadingCardOf(loadingCard, Skeleton)}
         className={className}
         label={loadingLabel}
         region={loadingRegion}
       />
     );
 
-  const slots = Array.from({ length: Math.max(0, pageSize - items.length) }, (_, i) => (
-    <Skeleton key={`slot-${i}`} className="invisible" />
-  ));
+  // Reserved slots up to a full page: the loading card, invisible.
+  const slots = (
+    // loading-standard-ok(ITEM_MARK): invisible pad slots that hold a short page's height, not items of the list
+    <LoadingItems count={Math.max(0, pageSize - items.length)}>
+      {() => <div className={cn(GRID_CELL_CLASS, 'invisible')}>{loadingCardOf(loadingCard, Skeleton)}</div>}
+    </LoadingItems>
+  );
+  const hasSlots = items.length < pageSize;
 
   if (items.length === 0) {
     return (
@@ -129,11 +159,11 @@ export function AdminContentCardGrid<T>({
   return (
     <div className={gridClass} data-state="items">
       {items.map(item => (
-        <div key={itemKey(item)} className="h-full">
+        <div key={itemKey(item)} className={GRID_CELL_CLASS} data-loading-item>
           {renderCard(item)}
         </div>
       ))}
-      {slots.length > 0 && (
+      {hasSlots && (
         <div aria-hidden className="contents">
           {slots}
         </div>

package/src/components/chat/entity-cards/admin-content-card.tsx

@@ -6,7 +6,7 @@ import Image from '../../../embed-shims/next-image';
 import { useImageEdgeColor } from '../../../hooks/ui/use-image-edge-color';
 import { MEDIA_ASPECT } from '../../../styles/component-sizes';
 import { cn } from '../../../utils/cn';
-import { PlatformBadge, PlatformBadgeSkeleton } from '../../features/platform-badge';
+import { PlatformBadge } from '../../features/platform-badge';
 import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { useLoadingScope } from '../../ui/loading-scope';
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
@@ -64,6 +64,12 @@ interface AdminContentCardProps {
   subtitleRow?: boolean;
   /** Additional class names */
   className?: string;
+  /**
+   * The record is still being read: the card draws its skeleton in its own boxes. `actions` then says what the
+   * actions row shows: `true` draws button bars, a node draws those controls for real (inert), absent draws none. A
+   * loading scope does the same.
+   */
+  loading?: boolean;
 }
 
 export function AdminContentCard({
@@ -79,6 +85,7 @@ export function AdminContentCard({
   reserveRows = false,
   subtitleRow = true,
   className,
+  loading,
 }: AdminContentCardProps) {
   const [imageError, setImageError] = useState(false);
   // WHICH url finished loading, rather than a bare flag reset from an effect on
@@ -91,10 +98,9 @@ export function AdminContentCard({
   const imageLoaded = Boolean(displayUrl) && loadedUrl === displayUrl;
   const imageBgColor = useImageEdgeColor(displayUrl || null, 'transparent');
 
-  if (useLoadingScope()) {
-    return (
-      <AdminContentCardSkeleton className={className} subtitleRow={subtitleRow} actions={actions ? actions : false} />
-    );
+  const inScope = useLoadingScope();
+  if (inScope || loading) {
+    return <AdminContentCardSkeleton className={className} subtitleRow={subtitleRow} actions={actions || false} />;
   }
 
   return (
@@ -171,7 +177,7 @@ export function AdminContentCard({
  * title, the subtitle line, a two-line `text-h6` summary, the 28px badges row, the meta line and the bordered actions
  * row. The actions are the caller's own controls (static) when it passes them, bars otherwise.
  */
-export function AdminContentCardSkeleton({
+function AdminContentCardSkeleton({
   className,
   actions = true,
   subtitleRow = true,
@@ -193,8 +199,8 @@ export function AdminContentCardSkeleton({
         {subtitleRow && <TextLineSkeleton type="h6" className="w-1/2" />}
         <TextLineSkeleton type="h6" lines={2} className="w-full" />
         <div className={cn(ADMIN_CARD_BADGES, ADMIN_CARD_BADGES_RESERVED)}>
-          <PlatformBadgeSkeleton size="xs" />
-          <PlatformBadgeSkeleton size="xs" />
+          <PlatformBadge loading size="xs" />
+          <PlatformBadge loading size="xs" />
         </div>
         <div className={ADMIN_CARD_META}>
           <TextLineSkeleton type="h6" className="w-32" />

package/src/components/chat/entity-cards/ai-prompt-card.tsx

@@ -1,12 +1,7 @@
 import type React from 'react';
 import { formatDateUTC } from '../../../utils/format';
 import { DepartmentBadge } from '../../ui/department-badge';
-import {
-  EmployeeEntryBadge,
-  EmployeeEntryCard,
-  type EmployeeEntryCardData,
-  EmployeeEntryCardSkeleton,
-} from './employee-entry-card';
+import { EmployeeEntryBadge, EmployeeEntryCard, type EmployeeEntryCardData } from './employee-entry-card';
 
 /** Minimal row shape the card renders. Both the hub dashboard entry and the
  *  related-content hydrated row satisfy it structurally. */
@@ -18,7 +13,7 @@ export interface AiPromptCardData extends EmployeeEntryCardData {
   step_count?: number | null;
 }
 
-export interface AiPromptCardProps {
+interface LoadedAiPromptCardProps {
   entry: AiPromptCardData;
   /** OG fallback cover. Caller computes it (hub: `useOgPlaceholderUrl`; related
    *  rail: `extras.buildOgPlaceholderUrl`). */
@@ -31,13 +26,19 @@ export interface AiPromptCardProps {
   className?: string;
 }
 
+/** The entry, or `loading` while the host reads it: the card then draws its own loading form (`EmployeeEntryCard`'s). */
+export type AiPromptCardProps =
+  (LoadedAiPromptCardProps & { loading?: boolean }) | (Partial<LoadedAiPromptCardProps> & { loading: true });
+
 /**
  * THE single Squawkbox prompt card: a thin binding over `EmployeeEntryCard`
  * that maps the publish date to the meta date and adds the department and step
  * count badges. Used by the people-hub dashboard (with owner `actions`) and the
  * related-content rail (with `anchorProps`), so the card cannot drift between them.
  */
-export function AiPromptCard({ entry, placeholderUrl, actions, anchorProps, className }: AiPromptCardProps) {
+export function AiPromptCard(props: AiPromptCardProps) {
+  if (props.loading) return <EmployeeEntryCard loading actions={props.actions} className={props.className} />;
+  const { entry, placeholderUrl, actions, anchorProps, className } = props;
   const departmentName = entry.department?.name?.trim();
   const steps = typeof entry.step_count === 'number' ? entry.step_count : 0;
   return (
@@ -60,6 +61,3 @@ export function AiPromptCard({ entry, placeholderUrl, actions, anchorProps, clas
     />
   );
 }
-
-/** Loading skeleton matching AiPromptCard's shape (the shared employee-entry skeleton). */
-export const AiPromptCardSkeleton = EmployeeEntryCardSkeleton;

package/src/components/chat/entity-cards/blog-card.tsx

@@ -41,12 +41,12 @@ import {
 } from '../utils/compact-card-classes';
 import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
-import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
+import { EntityPortraitCard } from './entity-portrait-card';
 import { useCoverImageFallback } from './use-cover-image-fallback';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
-export interface BlogCardProps {
+interface LoadedBlogCardProps {
   post: BlogPostSummary;
   /** Detail URL resolved by the caller (e.g. `buildContentURL`). */
   href: string;
@@ -73,6 +73,13 @@ export interface BlogCardProps {
   priority?: boolean;
 }
 
+/**
+ * The record and its link, or `loading` while the host reads it: the card then draws its own loading form, as it
+ * does in a loading scope.
+ */
+export type BlogCardProps =
+  (LoadedBlogCardProps & { loading?: boolean }) | (Partial<LoadedBlogCardProps> & { loading: true });
+
 // The default card's boxes, read by the card AND its skeleton, so the two are one size at every width.
 const BLOG_CARD_FRAME = 'flex h-full flex-col';
 const BLOG_CARD_COVER = `relative ${MEDIA_ASPECT.og} w-full overflow-hidden`;
@@ -95,7 +102,7 @@ const BLOG_POST_TYPE_LABEL = 'Blog Post';
  * lines; the summary as two `text-h6` lines; the byline's 32px avatar and `text-h6` line; the view count's icon is
  * drawn for real beside its bar). `portrait`: the shared portrait skeleton with the static chip.
  */
-export function BlogCardSkeleton({
+function BlogCardSkeleton({
   size = 'default',
   showTypeBadge = true,
   className,
@@ -107,7 +114,14 @@ export function BlogCardSkeleton({
 }) {
   if (size === 'portrait') {
     return (
-      <EntityPortraitCardSkeleton typeLabel={showTypeBadge ? BLOG_POST_TYPE_LABEL : undefined} className={className} />
+      <EntityPortraitCard
+        loading
+        href=""
+        imageAlt=""
+        title=""
+        typeLabel={showTypeBadge ? BLOG_POST_TYPE_LABEL : undefined}
+        className={className}
+      />
     );
   }
   if (size === 'sm') {
@@ -138,7 +152,15 @@ export function BlogCardSkeleton({
   );
 }
 
-export function BlogCard({
+/** ONE switch: in a loading scope (or `loading`) the card is its own loading form. */
+export function BlogCard(props: BlogCardProps) {
+  if (useLoadingScope() || props.loading) {
+    return <BlogCardSkeleton size={props.size} showTypeBadge={props.showTypeBadge} className={props.className} />;
+  }
+  return <LoadedBlogCard {...props} />;
+}
+
+function LoadedBlogCard({
   post,
   href,
   target: targetProp,
@@ -150,7 +172,7 @@ export function BlogCard({
   className,
   hasEmbeddedVideo = false,
   priority = false,
-}: BlogCardProps) {
+}: LoadedBlogCardProps) {
   const { target, rel } = useEntityCardLink({
     href,
     targetPlatform,
@@ -164,7 +186,6 @@ export function BlogCard({
   });
   // Shared cover → placeholder → hide chain (ONE fallback logic for all cards).
   const { src: displayImage, onError: onImageError } = useCoverImageFallback(post.featured_image, placeholderUrl);
-  if (useLoadingScope()) return <BlogCardSkeleton size={size} showTypeBadge={showTypeBadge} className={className} />;
 
   if (size === 'sm') {
     const dateStr = post.published_at ? formatDateWithTimezone(post.published_at, null, 'medium') : '';

package/src/components/chat/entity-cards/campaign-card-admin.tsx

@@ -94,6 +94,6 @@ export function CampaignCardAdmin({ campaign, className, anchorProps }: Campaign
   );
 }
 
-export function CampaignCardAdminSkeleton({ className }: { className?: string }) {
+function CampaignCardAdminSkeleton({ className }: { className?: string }) {
   return <CompactCardSkeleton rows={[{ width: 'w-1/2' }, { width: 'w-11/12' }]} className={className} />;
 }

package/src/components/chat/entity-cards/case-study-card.tsx

@@ -44,7 +44,7 @@ import {
 } from '../utils/compact-card-classes';
 import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
-import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
+import { EntityPortraitCard } from './entity-portrait-card';
 import { hideOnError } from './use-cover-image-fallback';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
@@ -189,7 +189,7 @@ function CaseStudyPersonRowSkeleton() {
  * A case study card while it is read, one per density, in the card's own boxes. Static words (the "Read" link, the
  * portrait chip) are drawn for real; the title, people, metric and summary are bars.
  */
-export function CaseStudyCardSkeleton({
+function CaseStudyCardSkeleton({
   size = 'default',
   showTypeBadge = true,
   className,
@@ -201,7 +201,14 @@ export function CaseStudyCardSkeleton({
 }) {
   if (size === 'portrait') {
     return (
-      <EntityPortraitCardSkeleton typeLabel={showTypeBadge ? CASE_STUDY_TYPE_LABEL : undefined} className={className} />
+      <EntityPortraitCard
+        loading
+        href=""
+        imageAlt=""
+        title=""
+        typeLabel={showTypeBadge ? CASE_STUDY_TYPE_LABEL : undefined}
+        className={className}
+      />
     );
   }
   if (size === 'result') {

package/src/components/chat/entity-cards/chat-ticket-item.tsx

@@ -6,8 +6,9 @@ import { TILE_SIZE } from '../../../styles/component-sizes';
 import { cn } from '../../../utils/cn';
 import { WrenchIcon } from '../../icons-v2-generated/household/wrench-icon';
 import { TextLineSkeleton } from '../../loading/unified-skeleton';
-import { useLoadingScope } from '../../ui/loading-scope';
-import { Tag, TagSkeleton } from '../../ui/tag';
+import { BUTTON_KIND_CLASS, Button } from '../../ui/button';
+import { loadingItemProps, useLoadingScope } from '../../ui/loading-scope';
+import { Tag } from '../../ui/tag';
 import { TicketStatusTag, resolveStatusTagProps, resolveTicketStatus } from '../../ui/ticket-status-tag';
 
 export interface ChatTicketItemData {
@@ -51,91 +52,73 @@ export interface ChatTicketItemData {
 }
 
 export interface ChatTicketItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
-  /** Optional while `isLoading` — the skeleton placeholder needs no data. */
+  /** Optional while `loading`: the loading row needs no data. */
   ticket?: ChatTicketItemData;
   onClick?: (ticketId: string) => void;
-  /** Render a non-interactive skeleton placeholder sized to a real row. */
-  isLoading?: boolean;
+  /** The ticket is still being read: the row draws its loading form (same box, its own text slots as bars). */
+  loading?: boolean;
 }
 
 const UNREAD_NOTICE = 'You have a new unread message';
 
-// The row's boxes, read by the row AND its skeleton, so the two are one size.
-const TICKET_ROW = cn('flex h-20 w-full items-center gap-4 px-4', 'border-b border-ods-border bg-ods-card');
+/** The ticket row's box: the lib's list row (`Button variant="row"`) at the row's height. The loading form draws the
+ *  same box as an inert `div`, so the two land on the same pixels. */
+const TICKET_ROW_HEIGHT = 'h-20';
+const TICKET_ROW = cn(BUTTON_KIND_CLASS.row, TICKET_ROW_HEIGHT);
 const TICKET_ROW_TEXT = 'flex min-w-0 flex-1 flex-col justify-center';
 const TICKET_ROW_CHEVRON = `flex ${TILE_SIZE.xl} shrink-0 items-center justify-center rounded-md border`;
 
 /**
- * A ticket row while it is read: the title as a `text-h3` line and the reference line as a `text-h6` line, the status
- * tag's box, and the chevron box with its icon (static) drawn for real.
+ * A ticket row. ONE switch (`useLoadingScope() || loading`): while the ticket is read the SAME row (an inert `div`, not
+ * a button) draws its title and reference line as `text-h3` / `text-h6` bars, its status tag in the tag's own loading
+ * form, and the chevron (static) for real.
  */
-export function ChatTicketItemSkeleton({ className }: { className?: string }) {
-  return (
-    <div aria-hidden className={cn(TICKET_ROW, className)}>
-      <div className={TICKET_ROW_TEXT}>
-        <TextLineSkeleton type="h3" className="w-1/2" />
-        <TextLineSkeleton type="h6" className="w-1/3" />
-      </div>
-      {/* The status is a `TicketStatusTag`, a default-size `Tag`: its own skeleton. */}
-      <TagSkeleton className="w-20" />
-      <div className={cn(TICKET_ROW_CHEVRON, 'border-ods-border bg-ods-card')}>
-        <ChevronRight className="size-6 text-ods-text-secondary" />
-      </div>
-    </div>
-  );
-}
-
 const ChatTicketItem = forwardRef<HTMLButtonElement, ChatTicketItemProps>(
-  ({ className, ticket, onClick, isLoading = false, ...props }, ref) => {
-    const scoped = useLoadingScope();
-    if (isLoading || scoped) return <ChatTicketItemSkeleton className={className} />;
-
-    if (!ticket) return null;
+  ({ className, ticket, onClick, loading: loadingProp = false, ...props }, ref) => {
+    const loading = useLoadingScope() || loadingProp;
+    if (!loading && !ticket) return null;
 
-    const statusTagProps = resolveStatusTagProps({
-      status: ticket.status,
-      statusKind: ticket.statusKind,
-      statusName: ticket.statusLabel,
-      statusColor: ticket.statusColor,
-    });
-    const isResolved = ticket.statusKind === 'RESOLVED' || resolveTicketStatus(ticket.status) === 'RESOLVED';
+    const statusTagProps = ticket
+      ? resolveStatusTagProps({
+          status: ticket.status,
+          statusKind: ticket.statusKind,
+          statusName: ticket.statusLabel,
+          statusColor: ticket.statusColor,
+        })
+      : null;
+    const isResolved =
+      !!ticket && (ticket.statusKind === 'RESOLVED' || resolveTicketStatus(ticket.status) === 'RESOLVED');
+    const composedSubtitle = ticket
+      ? [ticket.ticketNumber, ticket.category, ticket.timeAgo].filter(Boolean).join(' \u2022 ')
+      : '';
+    const subtitle = ticket?.subtitle ?? (ticket?.unread ? UNREAD_NOTICE : composedSubtitle);
+    const unread = !!ticket?.unread;
 
-    const composedSubtitle = [ticket.ticketNumber, ticket.category, ticket.timeAgo].filter(Boolean).join(' \u2022 ');
-    const subtitle = ticket.subtitle ?? (ticket.unread ? UNREAD_NOTICE : composedSubtitle);
-
-    return (
-      <button
-        ref={ref}
-        type="button"
-        onClick={() => onClick?.(ticket.id)}
-        className={cn(
-          TICKET_ROW,
-          'cursor-pointer transition-colors duration-150',
-          'hover:bg-ods-bg-hover',
-          // `focus-visible:` covers keyboard nav AND the post-click state
-          // jsdom/Chromium leave behind. Without it, the global focus
-          // ring (1.5px white) renders as a stray "white border" after
-          // clicking a row.
-          'focus:bg-ods-bg-hover focus:outline-none',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent',
-          className,
-        )}
-        {...props}
-      >
+    const content = (
+      <>
         <div className={cn(TICKET_ROW_TEXT, 'text-left')}>
-          <p
-            className={cn('truncate text-h3', isResolved ? 'text-ods-text-secondary' : 'text-ods-text-primary')}
-            title={ticket.title}
-          >
-            {ticket.title}
-          </p>
-          {subtitle && (
-            <p
-              className={cn('truncate text-h6', ticket.unread ? 'text-ods-open-yellow' : 'text-ods-text-secondary')}
-              title={subtitle}
-            >
-              {subtitle}
-            </p>
+          {loading || !ticket ? (
+            <>
+              <TextLineSkeleton type="h3" className="w-1/2" />
+              <TextLineSkeleton type="h6" className="w-1/3" />
+            </>
+          ) : (
+            <>
+              <p
+                className={cn('truncate text-h3', isResolved ? 'text-ods-text-secondary' : 'text-ods-text-primary')}
+                title={ticket.title}
+              >
+                {ticket.title}
+              </p>
+              {subtitle && (
+                <p
+                  className={cn('truncate text-h6', unread ? 'text-ods-open-yellow' : 'text-ods-text-secondary')}
+                  title={subtitle}
+                >
+                  {subtitle}
+                </p>
+              )}
+            </>
           )}
         </div>
 
@@ -145,28 +128,52 @@ const ChatTicketItem = forwardRef<HTMLButtonElement, ChatTicketItemProps>(
             tag so the canonical ticket status still wins the
             right-aligned slot. Hidden on small screens (sm:flex) to
             avoid crowding the row when both badges are present. */}
-        {ticket.linkedTaskLabel && (
+        {ticket?.linkedTaskLabel && (
           <Tag
+            data-loading-optional
             label={ticket.linkedTaskLabel}
             variant="outline"
             icon={<WrenchIcon size={14} color="var(--color-text-secondary)" />}
             className="hidden shrink-0 sm:inline-flex"
           />
         )}
-        {(statusTagProps.status || statusTagProps.label) && <TicketStatusTag {...statusTagProps} />}
+        {loading ? (
+          <TicketStatusTag status="" loading className="w-20" />
+        ) : (
+          statusTagProps && (statusTagProps.status || statusTagProps.label) && <TicketStatusTag {...statusTagProps} />
+        )}
 
         <div
           data-testid="chat-ticket-item-chevron"
           className={cn(
             TICKET_ROW_CHEVRON,
-            ticket.unread ? 'border-ods-open-yellow bg-ods-open-yellow' : 'border-ods-border bg-ods-card',
+            unread ? 'border-ods-open-yellow bg-ods-open-yellow' : 'border-ods-border bg-ods-card',
           )}
         >
-          <ChevronRight
-            className={cn('size-6', ticket.unread ? 'text-ods-text-on-accent' : 'text-ods-text-secondary')}
-          />
+          <ChevronRight className={cn('size-6', unread ? 'text-ods-text-on-accent' : 'text-ods-text-secondary')} />
+        </div>
+      </>
+    );
+
+    if (loading || !ticket) {
+      return (
+        <div aria-hidden className={cn(TICKET_ROW, className)} {...loadingItemProps(props)}>
+          {content}
         </div>
-      </button>
+      );
+    }
+
+    return (
+      <Button
+        variant="row"
+        ref={ref}
+        type="button"
+        onClick={() => onClick?.(ticket.id)}
+        className={cn(TICKET_ROW_HEIGHT, className)}
+        {...props}
+      >
+        {content}
+      </Button>
     );
   },
 );