@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.767

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

@@ -1,7 +1,11 @@
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
+import { AVATAR_SIZE } from '../../../styles/component-sizes';
 import type { EntityAuthor } from '../../../types/entity-author';
+import { cn } from '../../../utils/cn';
 import { formatDate, nameInitials } from '../../../utils/format';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { SquareAvatar } from '../../ui/square-avatar';
 
 /**
@@ -60,8 +64,11 @@ export interface EntityAuthorCardProps {
    * Use for entity-specific labels (e.g. onboarding-guide section/step,
    * webinar host, customer-interview customer). The grid auto-sizes via
    * `grid-cols-N`.
+   *
+   * `optional`: a cell only some records carry (a date a record may leave empty). It is not drawn in a loading scope
+   * (list the cells every record has there) and its loaded cell is marked `data-loading-optional`.
    */
-  extraCells?: Array<{ value: React.ReactNode; label: string; uppercase?: boolean }>;
+  extraCells?: Array<{ value: React.ReactNode; label: string; uppercase?: boolean; optional?: boolean }>;
   /** When true, render the author cell even when `author?.full_name` is
    *  missing — using the `EMPTY_AUTHOR_PLACEHOLDER` shape above. Used by
    *  catalog grids that must keep a fixed shape so skeleton alignment
@@ -75,26 +82,70 @@ export interface EntityAuthorCardProps {
  * `DM_Sans` 14px secondary label. A non-text value (a `DepartmentBadge`) renders
  * as given in the value slot.
  */
+/** The cells' layout, read by the cells and by their skeletons, so a skeleton is its cell's size. */
+const VALUE_CELL_CLASS = 'flex flex-col gap-3 p-4';
+const CELL_STACK_CLASS = 'flex flex-col gap-0';
+const VALUE_TEXT_CLASS = 'text-ods-text-primary text-h4';
+const VALUE_NODE_CLASS = 'flex min-h-6 items-center';
+const LABEL_TEXT_CLASS = 'text-ods-text-secondary text-h6';
+const AUTHOR_CELL_CLASS = 'flex items-center gap-3 p-4';
+const AUTHOR_TEXT_CLASS = 'flex min-w-0 flex-1 flex-col gap-0';
+const AUTHOR_NAME_CLASS = 'truncate text-ods-text-primary text-h3';
+const AUTHOR_AVATAR_SIZE = 'md';
+/** Every cell but the last: a divider below it on a phone, beside it from `md`. */
+const CELL_DIVIDER_CLASS = 'border-b md:border-b-0 md:border-r border-ods-border';
+const GRID_FRAME_CLASS = 'grid grid-cols-1 w-full overflow-hidden rounded-md border border-ods-border';
+
+/** `md:grid-cols-N` for a grid of `cells` cells, as static classes the build can see. */
+function gridColsClass(cells: number): string {
+  return cells >= 4
+    ? 'md:grid-cols-4'
+    : cells === 3
+      ? 'md:grid-cols-3'
+      : cells === 2
+        ? 'md:grid-cols-2'
+        : 'md:grid-cols-1';
+}
+
 export function EntityMetadataValueCell({
   value,
   label,
   className,
   uppercase = true,
+  optional = false,
 }: {
   value: React.ReactNode;
   label: string;
   className?: string;
   uppercase?: boolean;
+  /** A cell only some records carry: marked `data-loading-optional` (its loading state does not draw it). */
+  optional?: boolean;
 }) {
+  if (useLoadingScope()) return <EntityMetadataValueCellSkeleton label={label} className={className} />;
   return (
-    <div className={`flex flex-col gap-3 p-4 ${className ?? ''}`}>
-      <div className="flex flex-col gap-0">
+    <div className={cn(VALUE_CELL_CLASS, className)} data-loading-optional={optional || undefined}>
+      <div className={CELL_STACK_CLASS}>
         {typeof value === 'string' ? (
-          <p className="text-ods-text-primary text-h4">{uppercase ? value.toLocaleUpperCase() : value}</p>
+          <p className={VALUE_TEXT_CLASS}>{uppercase ? value.toLocaleUpperCase() : value}</p>
         ) : (
-          <div className="flex min-h-6 items-center">{value}</div>
+          <div className={VALUE_NODE_CLASS}>{value}</div>
         )}
-        <p className="text-ods-text-secondary text-h6">{label}</p>
+        <p className={LABEL_TEXT_CLASS}>{label}</p>
+      </div>
+    </div>
+  );
+}
+
+/** A value cell while its value is read: the label is the page's own words, the value a bar of its line. */
+export function EntityMetadataValueCellSkeleton({ label, className }: { label: string; className?: string }) {
+  return (
+    <div className={cn(VALUE_CELL_CLASS, className)}>
+      <div className={CELL_STACK_CLASS}>
+        {/* The value's own paragraph (a read value that wraps to more lines pairs with it line for line). */}
+        <p className={VALUE_TEXT_CLASS}>
+          <TextLineSkeleton as="span" type="inherit" className="w-24" />
+        </p>
+        <p className={LABEL_TEXT_CLASS}>{label}</p>
       </div>
     </div>
   );
@@ -115,24 +166,26 @@ export function EntityMetadataAuthorCell({
   authorHref?: string;
   className?: string;
 }) {
+  const loading = useLoadingScope();
+  if (loading) return <EntityMetadataAuthorCellSkeleton className={className} />;
   // Trimmed real name gates the LINK — a placeholder/unknown label must
   // never render as a clickable author (an authorHref passed alongside an
   // empty name would link "Unknown Author").
   const trimmedName = typeof author.full_name === 'string' ? author.full_name.trim() : '';
   const fullName = trimmedName || 'Unknown Author';
   return (
-    <div className={`flex items-center gap-3 p-4 ${className ?? ''}`}>
+    <div className={cn(AUTHOR_CELL_CLASS, className)}>
       <SquareAvatar
         src={author.avatar_url || ''}
         alt={fullName}
         fallback={nameInitials(fullName, '')}
-        size="md"
+        size={AUTHOR_AVATAR_SIZE}
         variant="round"
       />
-      <div className="flex min-w-0 flex-1 flex-col gap-0">
+      <div className={AUTHOR_TEXT_CLASS}>
         {/* title = full-name tooltip on truncation (carried over from the
             release page's cell when it adopted this shared one). */}
-        <p className="truncate text-ods-text-primary text-h3" title={fullName}>
+        <p className={AUTHOR_NAME_CLASS} title={fullName}>
           {authorHref && trimmedName ? (
             <Link href={authorHref} className="transition-colors hover:text-ods-accent">
               {fullName}
@@ -141,12 +194,62 @@ export function EntityMetadataAuthorCell({
             fullName
           )}
         </p>
-        <p className="text-ods-text-secondary text-h6">{author.job_title || roleLabel}</p>
+        <p className={LABEL_TEXT_CLASS}>{author.job_title || roleLabel}</p>
       </div>
     </div>
   );
 }
 
+/** The author cell while it is read: the avatar's box and a bar for the name and the role (both read data). */
+export function EntityMetadataAuthorCellSkeleton({ className }: { className?: string }) {
+  return (
+    <div className={cn(AUTHOR_CELL_CLASS, className)}>
+      <UnifiedSkeleton variant="circular" className={cn('shrink-0', AVATAR_SIZE[AUTHOR_AVATAR_SIZE])} />
+      <div className={AUTHOR_TEXT_CLASS}>
+        <TextLineSkeleton type="h3" className="w-32" />
+        <TextLineSkeleton type="h6" className="w-20" />
+      </div>
+    </div>
+  );
+}
+
+export interface EntityAuthorCardSkeletonProps {
+  /** The labels of the extra cells, in order (the page's own words: "Section", "Customer"). */
+  extraCellLabels?: string[];
+  /** The Published cell's label, or `null` when the card has no Published cell. Defaults to "Published". */
+  publishedLabel?: string | null;
+  /**
+   * How many optional cells the loaded card may add (cells only some records carry). They are not drawn, but they
+   * count in the grid's columns, so every drawn cell is as wide as on the loaded card. Default 0.
+   */
+  optionalCells?: number;
+  className?: string;
+}
+
+/**
+ * The card while it is read: the same grid, every label real, every value a bar, the author cell an avatar box and
+ * two bars. `EntityAuthorCard` draws it in a loading scope.
+ */
+export function EntityAuthorCardSkeleton({
+  extraCellLabels = [],
+  publishedLabel = 'Published',
+  optionalCells = 0,
+  className,
+}: EntityAuthorCardSkeletonProps) {
+  const totalCells = extraCellLabels.length + optionalCells + (publishedLabel === null ? 0 : 1) + 1;
+  return (
+    <div className={cn(GRID_FRAME_CLASS, gridColsClass(totalCells), className)}>
+      {extraCellLabels.map((label, i) => (
+        <EntityMetadataValueCellSkeleton key={`${label}-${i}`} label={label} className={CELL_DIVIDER_CLASS} />
+      ))}
+      {publishedLabel !== null && (
+        <EntityMetadataValueCellSkeleton label={publishedLabel} className={CELL_DIVIDER_CLASS} />
+      )}
+      <EntityMetadataAuthorCellSkeleton />
+    </div>
+  );
+}
+
 export function EntityAuthorCard({
   author,
   roleLabel = 'Author',
@@ -157,6 +260,19 @@ export function EntityAuthorCard({
   renderEmptyAuthor = false,
   className,
 }: EntityAuthorCardProps) {
+  const loading = useLoadingScope();
+  // In a loading scope the card is its skeleton: its cells are the ones the caller asked for (a Published cell
+  // when it passed `publishedAt` at all), never decided by data that is not read yet.
+  if (loading) {
+    return (
+      <EntityAuthorCardSkeleton
+        extraCellLabels={(extraCells ?? []).filter(cell => !cell.optional).map(cell => cell.label)}
+        optionalCells={(extraCells ?? []).filter(cell => cell.optional).length}
+        publishedLabel={publishedAt === undefined ? null : publishedLabel}
+        className={className}
+      />
+    );
+  }
   const hasAuthor = !!author?.full_name;
   if (!hasAuthor && !renderEmptyAuthor) return null;
   const effectiveAuthor = hasAuthor ? author : EMPTY_AUTHOR_PLACEHOLDER;
@@ -169,39 +285,29 @@ export function EntityAuthorCard({
 
   const showDateCell = !!dateLabel;
   const extras = extraCells ?? [];
-  // Total cell count = extras + (optional Published) + Author. Map to
-  // an explicit tailwind `md:grid-cols-N` class string so JIT picks it
-  // up at build time.
+  // Total cell count = extras + (optional Published) + Author. The last cell (Author) closes the grid without a
+  // trailing divider so the rounded corner stays clean.
   const totalCells = extras.length + (showDateCell ? 1 : 0) + 1;
-  const gridColsClass =
-    totalCells >= 4
-      ? 'md:grid-cols-4'
-      : totalCells === 3
-        ? 'md:grid-cols-3'
-        : totalCells === 2
-          ? 'md:grid-cols-2'
-          : 'md:grid-cols-1';
-
-  // Helper — every cell EXCEPT the last needs the dividers (bottom on
-  // mobile, right on desktop). The last cell (Author) closes the grid
-  // without a trailing divider so the rounded corner stays clean.
-  const dividerClass = 'border-b md:border-b-0 md:border-r border-ods-border';
 
   return (
-    <div
-      className={`grid grid-cols-1 ${gridColsClass} w-full overflow-hidden rounded-md border border-ods-border ${className ?? ''}`}
-    >
+    <div className={cn(GRID_FRAME_CLASS, gridColsClass(totalCells), className)}>
       {extras.map((cell, i) => (
         <EntityMetadataValueCell
           key={`${cell.label}-${i}`}
           value={cell.value}
           label={cell.label}
           uppercase={cell.uppercase ?? true}
-          className={dividerClass}
+          optional={cell.optional}
+          className={CELL_DIVIDER_CLASS}
         />
       ))}
       {showDateCell && (
-        <EntityMetadataValueCell value={dateLabel} label={publishedLabel} uppercase={false} className={dividerClass} />
+        <EntityMetadataValueCell
+          value={dateLabel}
+          label={publishedLabel}
+          uppercase={false}
+          className={CELL_DIVIDER_CLASS}
+        />
       )}
       <EntityMetadataAuthorCell author={effectiveAuthor} roleLabel={roleLabel} authorHref={authorHref} />
     </div>

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

@@ -37,15 +37,29 @@ import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
 import { useImageEdgeColor } from '../../../hooks/ui/use-image-edge-color';
 import { cn } from '../../../utils/cn';
+import { MediaSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Card } from '../../ui/card';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { StatusBadge } from '../../ui/status-badge';
-import { CONTENT_CARD_FRAME_CLASS } from './content-card-frame';
+import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
 import { useCoverImageFallback } from './use-cover-image-fallback';
 
 /** Sources narrower than this are "not wide" → contained on the edge-color
  *  fill. Wide covers are 1200/630 ≈ 1.9; squares are 1.0; 1.3 splits safely. */
 const MIN_WIDE_RATIO = 1.3;
 
+// The card's zones, read by the card AND its skeleton, so the two are one box.
+const PORTRAIT_BODY = 'flex h-full flex-col gap-6 p-6';
+const PORTRAIT_MEDIA =
+  'relative flex aspect-[1200/630] w-full shrink-0 items-center justify-center overflow-hidden rounded-sm';
+const PORTRAIT_TITLE_ZONE = 'flex h-[72px] shrink-0 flex-col justify-center gap-1.5';
+/** The title's line height, read by the title and by its skeleton's lines. */
+const PORTRAIT_TITLE_LEADING = 'leading-6';
+const PORTRAIT_TITLE = cn('break-words text-ods-text-primary text-h4', PORTRAIT_TITLE_LEADING);
+const PORTRAIT_FOOTER = 'flex h-[60px] shrink-0 items-center';
+const PORTRAIT_PERSON_ROW = 'flex w-full min-w-0 items-center gap-3';
+const PORTRAIT_PERSON_TEXT = 'flex min-w-0 flex-col';
+
 export interface EntityPortraitPerson {
   name: string;
   avatarUrl?: string | null;
@@ -87,6 +101,7 @@ export function EntityPortraitCard({
   person,
   className,
 }: EntityPortraitCardProps) {
+  const loading = useLoadingScope();
   const { src, onError: onMediaError } = useCoverImageFallback(imageUrl, placeholderUrl);
   // null = unknown (assume wide until the image reports its natural size).
   // The measurement carries the src it was taken from, so re-detection when the
@@ -107,13 +122,15 @@ export function EntityPortraitCard({
   // media/news cards use (og-link-preview.tsx).
   const edgeColor = useImageEdgeColor(isWide === false ? src : null, 'var(--color-bg-surface)');
 
+  if (loading) return <EntityPortraitCardSkeleton typeLabel={typeLabel} className={className} />;
+
   return (
     <Link href={href} target={target} rel={rel} className={cn('block h-full', className)}>
-      <Card className={cn(CONTENT_CARD_FRAME_CLASS, 'flex h-full flex-col gap-6 p-6')}>
+      <Card className={cn(CONTENT_CARD_FRAME_CLASS, PORTRAIT_BODY)}>
         {/* Media zone — the real cover always wins: wide → cover-fill;
             non-wide → contained on the edge-color fill (news-card treatment). */}
         <div
-          className="relative flex aspect-[1200/630] w-full shrink-0 items-center justify-center overflow-hidden rounded-sm bg-ods-bg transition-colors duration-300"
+          className={cn(PORTRAIT_MEDIA, 'bg-ods-bg transition-colors duration-300')}
           style={isWide === false ? { backgroundColor: edgeColor } : undefined}
         >
           {src && (
@@ -133,7 +150,7 @@ export function EntityPortraitCard({
         {/* Title zone — fixed box. Mixed rails: common StatusBadge eyebrow +
             2-line title (chip lives here, never on the artwork). Single-type
             rails (no typeLabel): centered 3-line title. */}
-        <div className="flex h-[72px] shrink-0 flex-col justify-center gap-1.5">
+        <div className={PORTRAIT_TITLE_ZONE}>
           {typeLabel && (
             <StatusBadge
               variant="button"
@@ -143,22 +160,14 @@ export function EntityPortraitCard({
               className="self-start"
             />
           )}
-          <h3
-            className={cn(
-              'break-words leading-6 text-ods-text-primary text-h4',
-              typeLabel ? 'line-clamp-2' : 'line-clamp-3',
-              titleClassName,
-            )}
-          >
-            {title}
-          </h3>
+          <h3 className={cn(PORTRAIT_TITLE, typeLabel ? 'line-clamp-2' : 'line-clamp-3', titleClassName)}>{title}</h3>
         </div>
 
         {/* Person/footer zone — fixed box (kept even when empty so every card
             in a rail shares baselines). */}
-        <div className="flex h-[60px] shrink-0 items-center">
+        <div className={PORTRAIT_FOOTER}>
           {person && (
-            <div className="flex w-full min-w-0 items-center gap-3">
+            <div className={PORTRAIT_PERSON_ROW}>
               <div className="relative h-12 w-12 shrink-0">
                 {person.avatarUrl ? (
                   <Image
@@ -187,7 +196,7 @@ export function EntityPortraitCard({
                   </div>
                 )}
               </div>
-              <div className="flex min-w-0 flex-col">
+              <div className={PORTRAIT_PERSON_TEXT}>
                 <span className="truncate font-bold text-ods-text-primary text-h6">{person.name}</span>
                 {person.subtitle && <span className="truncate text-ods-text-secondary text-h6">{person.subtitle}</span>}
               </div>
@@ -198,3 +207,39 @@ export function EntityPortraitCard({
     </Link>
   );
 }
+
+/**
+ * The portrait card while it is read: the same three zones. The content-type chip is the caller's static label and
+ * is drawn for real; the title (two lines under a chip, three without, at the 24px title leading) and the person
+ * (48px avatar, name and subtitle lines) are bars.
+ */
+export function EntityPortraitCardSkeleton({ typeLabel, className }: { typeLabel?: string; className?: string }) {
+  return (
+    <div className={cn('block h-full', className)} aria-hidden>
+      <Card className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, PORTRAIT_BODY)}>
+        <UnifiedSkeleton className={cn(PORTRAIT_MEDIA, 'rounded-sm')} />
+        <div className={PORTRAIT_TITLE_ZONE}>
+          {typeLabel && (
+            <StatusBadge
+              variant="button"
+              colorScheme="accentBorder"
+              singleLine
+              text={typeLabel}
+              className="self-start"
+            />
+          )}
+          <TextLineSkeleton type="h4" lines={typeLabel ? 2 : 3} className={cn('w-full', PORTRAIT_TITLE_LEADING)} />
+        </div>
+        <div className={PORTRAIT_FOOTER}>
+          <div className={PORTRAIT_PERSON_ROW}>
+            <MediaSkeleton.Avatar size="md" className="shrink-0" />
+            <div className={cn(PORTRAIT_PERSON_TEXT, 'gap-0')}>
+              <TextLineSkeleton type="h6" className="w-32" />
+              <TextLineSkeleton type="h6" className="w-24" />
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

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

@@ -12,18 +12,18 @@ import { ExternalLink } from 'lucide-react';
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { formatDateUTC as formatDate } from '../../../utils/format';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { StatusBadge } from '../../ui/status-badge';
 import {
   COMPACT_CARD_META_ROW,
   COMPACT_CARD_META_ROW_BOX,
   COMPACT_CARD_OUTER,
   COMPACT_CARD_OUTER_STATIC,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   safeHref,
 } from '../utils/compact-card-classes';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 
 type BadgeScheme = 'success' | 'error' | 'warning' | 'cyan' | 'default';
 
@@ -52,6 +52,7 @@ export interface GenericEntityCardProps {
 }
 
 export function GenericEntityCard({ item, className, anchorProps }: GenericEntityCardProps) {
+  if (useLoadingScope()) return <GenericEntityCardSkeleton className={className} />;
   const href = safeHref(item.url);
   const dateText = formatDate(item.dateUpdated, { fallback: '', timezone: 'local' });
   const body = (
@@ -125,22 +126,13 @@ export function GenericEntityCard({ item, className, anchorProps }: GenericEntit
 
 export function GenericEntityCardSkeleton({ className }: { className?: string }) {
   return (
-    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
-      <span className={COMPACT_CARD_TEXT_COL}>
-        <span className="flex min-w-0 items-center gap-1.5">
-          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
-          <UnifiedSkeleton as="span" className="h-4 w-16 rounded-full" />
-        </span>
-        <UnifiedSkeleton as="span" className="h-4 w-1/2 rounded" />
-        <span className="flex min-w-0 flex-col gap-0">
-          <UnifiedSkeleton as="span" className="h-5 w-5/6 rounded" />
-          <UnifiedSkeleton as="span" className="h-5 w-3/4 rounded" />
-        </span>
-        <UnifiedSkeleton as="span" className="h-3 w-1/4 rounded" />
-      </span>
-      <span className="flex h-5 shrink-0 items-center self-start">
-        <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
-      </span>
-    </span>
+    <CompactCardSkeleton
+      slot={false}
+      titleWidth="w-2/3"
+      titleBadges={['w-16']}
+      rows={[{ width: 'w-1/2' }, { width: 'w-5/6', lines: 2 }, { width: 'w-1/4' }]}
+      trailingIcon
+      className={className}
+    />
   );
 }

package/src/components/chat/entity-cards/github-activity-card.tsx

@@ -22,6 +22,7 @@ import Link from '../../../embed-shims/next-link';
 import { formatDateUTC as formatDate } from '../../../utils/format';
 import { GithubClassicIcon } from '../../icons-v2-generated/brand-logos/github-classic-icon';
 import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import type { GitHubActivityItem, GitHubActivityKind, PrReviewState } from '../types/entities/github-activity';
 import {
   COMPACT_CARD_ICON_SLOT,
@@ -30,14 +31,13 @@ import {
   COMPACT_CARD_OUTER,
   COMPACT_CARD_OUTER_STATIC,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW,
   safeHref,
 } from '../utils/compact-card-classes';
+import { ActivityRowSkeleton, CompactCardSkeleton } from '../utils/compact-card-skeleton';
 
 /** Extract owner/repo from a GitHub URL. */
 function parseRepoFromUrl(url: string | null | undefined): string | null {
@@ -188,6 +188,7 @@ export interface GitHubActivityCardProps {
 }
 
 export function GitHubActivityCard({ item, variant = 'compact', className, anchorProps }: GitHubActivityCardProps) {
+  if (useLoadingScope()) return <GitHubActivityCardSkeleton variant={variant} className={className} />;
   const kind = item.kind ?? 'commit';
   const repo = item.repo ?? parseRepoFromUrl(item.url) ?? '';
   const dateText = formatDate(item.dateUpdated, { fallback: '', timezone: 'local' });
@@ -296,34 +297,17 @@ export function GitHubActivityCardSkeleton({
 }) {
   if (variant === 'row') {
     return (
-      <div className={`flex min-w-0 items-center gap-3 ${className ?? ''}`}>
-        <div className="flex w-28 shrink-0 items-center gap-2">
-          <UnifiedSkeleton className="h-3.5 w-3.5 rounded" />
-          <UnifiedSkeleton className="h-3 w-16 rounded" />
-        </div>
-        <UnifiedSkeleton className="h-3 w-2/3 flex-1 rounded" />
-        <UnifiedSkeleton className="h-3 w-40 shrink-0 rounded" />
-        <UnifiedSkeleton className="h-3 w-20 shrink-0 rounded" />
-      </div>
+      <ActivityRowSkeleton
+        lead={
+          <div className="flex w-28 shrink-0 items-center gap-2">
+            <UnifiedSkeleton className="h-3.5 w-3.5 rounded" />
+            <UnifiedSkeleton className="h-3 w-16 rounded" />
+          </div>
+        }
+        trailingWidths={['w-40', 'w-20']}
+        className={className}
+      />
     );
   }
-  return (
-    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
-      <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
-      <span className={COMPACT_CARD_TEXT_COL}>
-        <span className={COMPACT_CARD_TITLE_ROW}>
-          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
-        </span>
-        <span className={COMPACT_CARD_META_ROW_BOX}>
-          <UnifiedSkeleton as="span" className="h-3 w-1/2 rounded" />
-        </span>
-        <span className={COMPACT_CARD_META_ROW_BOX}>
-          <span className={COMPACT_CARD_SUMMARY}>{COMPACT_CARD_ROW_FILLER}</span>
-        </span>
-      </span>
-      <span className="flex h-5 shrink-0 items-center self-start">
-        <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
-      </span>
-    </span>
-  );
+  return <CompactCardSkeleton titleWidth="w-2/3" rows={[{ width: 'w-1/2' }, {}]} trailingIcon className={className} />;
 }

package/src/components/chat/entity-cards/hubspot-ticket-card.tsx

@@ -14,6 +14,7 @@ import React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { formatDateUTC as formatDate } from '../../../utils/format';
 import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { StatusBadge } from '../../ui/status-badge';
 import type { HubspotTicketItem } from '../types/entities/hubspot-ticket';
 import {
@@ -21,11 +22,11 @@ import {
   COMPACT_CARD_META_ROW_BOX,
   COMPACT_CARD_OUTER,
   COMPACT_CARD_OUTER_STATIC,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   safeHref,
 } from '../utils/compact-card-classes';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 
 export interface HubspotTicketCardAnchorProps {
   href: string;
@@ -65,6 +66,7 @@ function statusScheme(status: string | null | undefined): BadgeScheme {
 }
 
 export function HubspotTicketCard({ item, variant = 'compact', className, anchorProps }: HubspotTicketCardProps) {
+  if (useLoadingScope()) return <HubspotTicketCardSkeleton variant={variant} className={className} />;
   const statusText = item.statusLabel ?? formatToken(item.status);
   const priorityText = formatToken(item.priority);
   const dateText = formatDate(item.dateUpdated, { fallback: '', timezone: 'local' });
@@ -187,27 +189,13 @@ export function HubspotTicketCardSkeleton({
     );
   }
   return (
-    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
-      <span className={COMPACT_CARD_TEXT_COL}>
-        <span className="flex min-w-0 flex-wrap items-center gap-1.5">
-          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
-          <UnifiedSkeleton as="span" className="h-4 w-12 rounded-full" />
-          <UnifiedSkeleton as="span" className="h-4 w-16 rounded-full" />
-        </span>
-        <UnifiedSkeleton as="span" className="h-4 w-1/2 rounded" />
-        <span className="flex min-w-0 flex-col gap-0">
-          <UnifiedSkeleton as="span" className="h-5 w-5/6 rounded" />
-          <UnifiedSkeleton as="span" className="h-5 w-4/6 rounded" />
-          <UnifiedSkeleton as="span" className="h-5 w-3/4 rounded" />
-          <UnifiedSkeleton as="span" className="h-5 w-2/5 rounded" />
-        </span>
-        <span className={COMPACT_CARD_META_ROW_BOX}>
-          <UnifiedSkeleton as="span" className="h-3 w-1/3 rounded" />
-        </span>
-      </span>
-      <span className="flex h-5 shrink-0 items-center self-start">
-        <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
-      </span>
-    </span>
+    <CompactCardSkeleton
+      slot={false}
+      titleWidth="w-2/3"
+      titleBadges={['w-12', 'w-16']}
+      rows={[{ width: 'w-1/2' }, { width: 'w-5/6', lines: 4 }, { width: 'w-1/3' }]}
+      trailingIcon
+      className={className}
+    />
   );
 }