@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

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}
+    />
   );
 }

package/src/components/chat/entity-cards/index.ts

@@ -12,13 +12,22 @@ export {
   EntityAuthorCard,
   EntityMetadataValueCell,
   EntityMetadataAuthorCell,
+  EntityAuthorCardSkeleton,
+  EntityMetadataValueCellSkeleton,
+  EntityMetadataAuthorCellSkeleton,
+  type EntityAuthorCardSkeletonProps,
   EMPTY_AUTHOR_PLACEHOLDER,
   type EntityAuthorCardProps,
 } from './entity-author-card';
 export { BlogImagePlaceholder } from './blog-image-placeholder';
-export { EntityPortraitCard, type EntityPortraitCardProps, type EntityPortraitPerson } from './entity-portrait-card';
+export {
+  EntityPortraitCard,
+  EntityPortraitCardSkeleton,
+  type EntityPortraitCardProps,
+  type EntityPortraitPerson,
+} from './entity-portrait-card';
 export { useCoverImageFallback, hideOnError, type CoverImageFallback } from './use-cover-image-fallback';
-export { AdminContentCard } from './admin-content-card';
+export { AdminContentCard, AdminContentCardSkeleton } from './admin-content-card';
 export {
   CONTENT_CARD_FRAME_CLASS,
   CONTENT_CARD_SKELETON_FRAME_CLASS,
@@ -28,7 +37,6 @@ export {
 export {
   AdminContentCardGrid,
   AdminContentCardGridSkeleton,
-  AdminContentCardSkeleton,
   ADMIN_CONTENT_CARD_GRID_CLASS,
   type AdminContentCardGridProps,
   type AdminContentCardGridSkeletonProps,
@@ -44,15 +52,20 @@ export type { AiPromptCardData, AiPromptCardProps } from './ai-prompt-card';
 
 // Moved-into-subdir flat cards
 export { BlockCard, type BlockCardProps } from './block-card';
-export { ChatTicketItem, type ChatTicketItemData, type ChatTicketItemProps } from './chat-ticket-item';
+export {
+  ChatTicketItem,
+  ChatTicketItemSkeleton,
+  type ChatTicketItemData,
+  type ChatTicketItemProps,
+} from './chat-ticket-item';
 export { ChatVideoEntityCard, type ChatVideoEntityCardProps } from './chat-video-entity-card';
 export {
   ProductReleaseCard,
-  ProductReleaseCardSkeleton,
   type ProductReleaseCardProps,
   type ProductReleaseCardSize,
   type ProductReleaseCardAnchorProps,
-} from './product-release-card';
+} from '../../shared/product-release/product-release-card';
+export { ProductReleaseCardSkeleton } from '../../shared/product-release/product-release-card-skeleton';
 // Card-prop builders: `defaultBuildProductReleaseCardProps` (sm chat default) +
 // `buildProductReleaseCardProps` (RICH lg builder — the ProductReleasesView
 // default; lifted from the hub so embedders get the full metadata grid).
@@ -140,5 +153,5 @@ export {
 // Program author-ref + video-bites profile adapter — re-exported through the
 // PACKAGE-EXPORTED chat barrel so the hub can value-import them (deep paths
 // into chat/types/* are not in the package exports map and 404 at runtime).
-export { programItemToStripProfile, type ProgramAuthorRef } from '../types/entities/program-types';
+export { programItemToStripProfile, type ProgramAuthorRef } from '../../features/video-bites-shared';
 export { type MingoInfoCardAction, MingoInfoCardActionProvider } from '../mingo-info-card';

package/src/components/chat/entity-cards/investor-update-card.tsx

@@ -11,24 +11,25 @@
 import { Calendar } from 'lucide-react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { formatInvestorUpdatePeriod, type InvestorUpdate } from '../types/entities/investor-update';
 import {
   COMPACT_CARD_IMAGE_SLOT,
   COMPACT_CARD_META_ROW_BOX,
   COMPACT_CARD_OUTER,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUBTITLE,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW,
 } from '../utils/compact-card-classes';
-import { AdminContentCard } from './admin-content-card';
-import { CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
-import { EntityPortraitCard } from './entity-portrait-card';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
+import { AdminContentCard, AdminContentCardSkeleton } from './admin-content-card';
+import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
+
+/** The content-type chip a portrait investor update shows (a static label). */
+const INVESTOR_UPDATE_TYPE_LABEL = 'Investor Update';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
@@ -48,38 +49,41 @@ export interface InvestorUpdateCardProps {
   className?: string;
 }
 
-/** `portrait` shares the default skeleton shape (same zone boxes). */
-export function InvestorUpdateCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' }) {
-  if (size === 'sm') {
+/**
+ * An investor update card while it is read, one per density: `default` is the admin card's own skeleton (the card is
+ * an `AdminContentCard`), `portrait` the shared portrait skeleton with the static chip, `sm` the compact card's rows.
+ */
+export function InvestorUpdateCardSkeleton({
+  size = 'default',
+  showTypeBadge = true,
+  className,
+}: {
+  size?: 'default' | 'sm' | 'portrait';
+  /** `portrait`: the card shows the "Investor Update" chip. */
+  showTypeBadge?: boolean;
+  className?: string;
+}) {
+  if (size === 'portrait') {
     return (
-      <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
-        <span className={COMPACT_CARD_TEXT_COL}>
-          <span className={`${COMPACT_CARD_TITLE_ROW} flex-nowrap gap-2`}>
-            <UnifiedSkeleton as="span" className="h-3.5 w-1/2 rounded" />
-            <UnifiedSkeleton as="span" className="h-4 w-8 shrink-0 rounded" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-1/3 rounded" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-11/12 rounded" />
-          </span>
-        </span>
-      </span>
+      <EntityPortraitCardSkeleton
+        typeLabel={showTypeBadge ? INVESTOR_UPDATE_TYPE_LABEL : undefined}
+        className={className}
+      />
     );
   }
-  return (
-    <div className={`h-full ${CONTENT_CARD_SKELETON_FRAME_CLASS}`}>
-      <UnifiedSkeleton className="aspect-[1200/630]" />
-      <div className="space-y-3 p-4">
-        <UnifiedSkeleton className="h-5 w-3/4 rounded" />
-        <UnifiedSkeleton className="h-3 w-full rounded" />
-        <UnifiedSkeleton className="h-3 w-4/5 rounded" />
-        <UnifiedSkeleton className="h-4 w-1/3 rounded" />
+  if (size === 'default') {
+    return (
+      <div className={`block h-full ${className ?? ''}`}>
+        <AdminContentCardSkeleton actions={false} subtitleRow={false} />
       </div>
-    </div>
-  );
+    );
+  }
+  if (size === 'sm') {
+    return (
+      <CompactCardSkeleton titleWidth="w-1/2" titleBadges={['w-8']} rows={[{ width: 'w-1/3' }, { width: 'w-11/12' }]} className={className} />
+    );
+  }
+  return null;
 }
 
 export function InvestorUpdateCard({
@@ -105,6 +109,9 @@ export function InvestorUpdateCard({
     aspect: size === 'sm' ? 'square' : 'wide',
   });
   const coverImage = update.featured_image || placeholderUrl || null;
+  if (useLoadingScope()) {
+    return <InvestorUpdateCardSkeleton size={size} showTypeBadge={showTypeBadge} className={className} />;
+  }
 
   if (size === 'sm') {
     const periodText = formatInvestorUpdatePeriod(update.period_start, update.period_end);
@@ -164,7 +171,7 @@ export function InvestorUpdateCard({
         href={href}
         target={target}
         rel={rel}
-        typeLabel={showTypeBadge ? 'Investor Update' : undefined}
+        typeLabel={showTypeBadge ? INVESTOR_UPDATE_TYPE_LABEL : undefined}
         imageUrl={update.featured_image}
         placeholderUrl={placeholderUrl}
         imageAlt={update.title ?? 'Investor update'}