@flamingo-stack/openframe-frontend-core 0.0.668-snapshot.20260925231935 → 0.0.668

package/dist/components/help-center-pages/trust-center-sections.d.ts

@@ -12,17 +12,7 @@
  * server answers as one flat, grouped, counted list.
  */
 import { type ReactNode } from 'react';
-import { type TrustCenterAiPractice, type TrustCenterControlsPage, type TrustCenterDocument, type TrustCenterFramework, type TrustCenterSectionId, type TrustCenterSubprocessor } from '../../types/trust-center';
-/**
- * The page body's layout, ONE copy for the loaded page and its skeleton, so the
- * skeleton cannot drift from what replaces it: the status row, then the sections
- * beside the section rail.
- */
-export declare const TRUST_STATUS_ROW_CLASS = "flex flex-col gap-[var(--spacing-system-xs)] md:flex-row md:items-center md:justify-between";
-export declare const TRUST_BODY_GRID_CLASS = "grid grid-cols-1 gap-[var(--spacing-system-xl)] lg:grid-cols-[minmax(0,1fr)_12rem]";
-export declare const TRUST_SECTIONS_COLUMN_CLASS = "flex min-w-0 flex-col gap-[var(--spacing-system-xxl)]";
-/** Each section's one-line lead under its heading (the page and its skeleton read the same copy). */
-export declare const TRUST_SECTION_LEADS: Partial<Record<TrustCenterSectionId, string>>;
+import { type TrustCenterAiPractice, type TrustCenterControlsPage, type TrustCenterDocument, type TrustCenterFramework, type TrustCenterSubprocessor } from '../../types/trust-center';
 /** One anchored page section: an `h2` + optional lead line + content. */
 export declare function TrustSection({ id, title, lead, children, }: {
     id: string;
@@ -94,11 +84,6 @@ export declare function SubprocessorsSection({ subprocessors }: {
 export declare function ContactSection({ onContact }: {
     onContact: () => void;
 }): import("react").JSX.Element;
-/**
- * The page BODY while the trust center loads: built on the loaded body's own
- * layout classes and the real section headings and panels, so nothing moves when
- * the content replaces it. The status row, then Compliance, Controls and
- * Documents (what fills the first screens), beside the section rail.
- */
+/** Mirrors the page: a card row, then the controls grid. */
 export declare function TrustCenterSkeleton(): import("react").JSX.Element;
 //# sourceMappingURL=trust-center-sections.d.ts.map

package/dist/components/help-center-pages/trust-center-sections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trust-center-sections.d.ts","sourceRoot":"","sources":["../../../src/components/help-center-pages/trust-center-sections.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhE,OAAO,EAOL,KAAK,qBAAqB,EAE1B,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAE7B,MAAM,0BAA0B,CAAC;AAiClC;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,gGAC4D,CAAC;AAChG,eAAO,MAAM,qBAAqB,uFACoD,CAAC;AACvF,eAAO,MAAM,2BAA2B,0DAA0D,CAAC;AAEnG,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAM7E,CAAC;AAWF,yEAAyE;AACzE,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAkBA;AAMD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,qBAAqB,EAAE,CAAA;CAAE,+BAkB9E;AAMD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,oBAAoB,EAAE,CAAA;CAAE,+BA0BvF;AAkED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,uBAAuB,CAAA;CAAE,+BAkFtG;AAMD,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,WAAW,EACX,SAAS,GACV,EAAE;IACD,SAAS,EAAE,mBAAmB,EAAE,CAAC;IACjC,kGAAkG;IAClG,WAAW,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9D,oEAAoE;IACpE,SAAS,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD,+BA0CA;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,6GAA6G;IAC7G,QAAQ,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,+BAgCA;AA8BD,wBAAgB,oBAAoB,CAAC,EAAE,aAAa,EAAE,EAAE;IAAE,aAAa,EAAE,uBAAuB,EAAE,CAAA;CAAE,+BA4BnG;AAMD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,IAAI,CAAA;CAAE,+BA8BtE;AAoGD;;;;;GAKG;AACH,wBAAgB,mBAAmB,gCAmClC"}
+{"version":3,"file":"trust-center-sections.d.ts","sourceRoot":"","sources":["../../../src/components/help-center-pages/trust-center-sections.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhE,OAAO,EAML,KAAK,qBAAqB,EAE1B,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAE7B,MAAM,0BAA0B,CAAC;AA4ClC,yEAAyE;AACzE,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAkBA;AAMD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,qBAAqB,EAAE,CAAA;CAAE,+BAkB9E;AAMD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,oBAAoB,EAAE,CAAA;CAAE,+BA0BvF;AAkED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,uBAAuB,CAAA;CAAE,+BAkFtG;AAMD,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,WAAW,EACX,SAAS,GACV,EAAE;IACD,SAAS,EAAE,mBAAmB,EAAE,CAAC;IACjC,kGAAkG;IAClG,WAAW,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9D,oEAAoE;IACpE,SAAS,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD,+BA0CA;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,6GAA6G;IAC7G,QAAQ,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,+BAgCA;AA8BD,wBAAgB,oBAAoB,CAAC,EAAE,aAAa,EAAE,EAAE;IAAE,aAAa,EAAE,uBAAuB,EAAE,CAAA;CAAE,+BA4BnG;AAMD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,IAAI,CAAA;CAAE,+BA8BtE;AAED,4DAA4D;AAC5D,wBAAgB,mBAAmB,gCAOlC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.668-snapshot.20260925231935",
+  "version": "0.0.668",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/help-center-pages/__tests__/trust-center-page.test.tsx

@@ -14,8 +14,7 @@ import {
   type TrustCenterPublic,
 } from '../../../types/trust-center';
 import { TRUST_CENTER_FIXTURE_WINDOW_MS, makeTrustCenterData } from '../__fixtures__/trust-center';
-import { TrustCenterPage, TrustCenterPageSkeleton } from '../trust-center-page';
-import { TRUST_SECTION_LEADS } from '../trust-center-sections';
+import { TrustCenterPage } from '../trust-center-page';
 
 // The real ContactForm needs the endpoints + chat runtimes; the page only
 // decides WHAT it is handed, so a stub that echoes its props is the honest
@@ -115,32 +114,6 @@ describe('TrustCenterPage', () => {
     expect(String(fetchMock.mock.calls[0][0])).toBe('/content/api/trust-center');
   });
 
-  it('while it loads, the skeleton shows the real section headings and leads the content will fill', async () => {
-    let answer: (response: Response) => void = () => {};
-    fetchMock.mockReturnValueOnce(new Promise<Response>(resolve => (answer = resolve)));
-    render(<TrustCenterPage endpoint="/content/api/trust-center" />);
-    const loading = await screen.findByLabelText('Loading the trust center');
-    for (const [label, lead] of [
-      ['Compliance', TRUST_SECTION_LEADS.compliance],
-      ['Controls', TRUST_SECTION_LEADS.controls],
-      ['Documents', TRUST_SECTION_LEADS.documents],
-    ] as const) {
-      expect(within(loading).getByRole('heading', { level: 2, name: label, hidden: true })).toBeInTheDocument();
-      expect(within(loading).getByText(lead as string)).toBeInTheDocument();
-    }
-    act(() => answer(jsonResponse(makeData())));
-    expect(await screen.findByText('SOC 2 Type II')).toBeInTheDocument();
-    expect(screen.queryByLabelText('Loading the trust center')).toBeNull();
-  });
-
-  it('TrustCenterPageSkeleton wears the page chrome it is given: no title and subtitle means no header at all', () => {
-    const { rerender } = render(<TrustCenterPageSkeleton shell={false} title="" subtitle="" />);
-    expect(screen.queryByRole('heading', { level: 1 })).toBeNull();
-    expect(screen.getByLabelText('Loading the trust center')).toBeInTheDocument();
-    rerender(<TrustCenterPageSkeleton shell={false} />);
-    expect(screen.getByRole('heading', { level: 1, name: TRUST_CENTER_TITLE })).toBeInTheDocument();
-  });
-
   it('is ONE page: every section is an anchored h2, in reading order — AI & data use after Subprocessors, Contact before FAQ', () => {
     render(<TrustCenterPage initialData={makeData()} />);
     const headings = screen.getAllByRole('heading', { level: 2 }).map(h => h.textContent);

package/src/components/help-center-pages/index.ts

@@ -21,7 +21,7 @@ export { RoadmapPage, type RoadmapPageProps } from './roadmap-page';
 export { ProductReleasesListPage, type ProductReleasesListPageProps } from './product-releases-list-page';
 export { DeliveryPage, type DeliveryPageProps } from './delivery-page';
 export { OnboardingGuidesCatalogPage, type OnboardingGuidesCatalogPageProps } from './onboarding-guides-catalog-page';
-export { TrustCenterPage, TrustCenterPageSkeleton, type TrustCenterPageProps } from './trust-center-page';
+export { TrustCenterPage, type TrustCenterPageProps } from './trust-center-page';
 
 // Existing full-pages re-exported for a single Help Center import site.
 export { FaqDocumentPage, type FaqDocumentPageProps } from '../faq';

package/src/components/help-center-pages/trust-center-page.tsx

@@ -61,10 +61,6 @@ import {
   DocumentRequestModal,
   DocumentsSection,
   SubprocessorsSection,
-  TRUST_BODY_GRID_CLASS,
-  TRUST_SECTIONS_COLUMN_CLASS,
-  TRUST_SECTION_LEADS,
-  TRUST_STATUS_ROW_CLASS,
   TrustCenterSkeleton,
   TrustSection,
 } from './trust-center-sections';
@@ -150,6 +146,7 @@ export function TrustCenterPage({
   title = TRUST_CENTER_TITLE,
   subtitle = TRUST_CENTER_TAGLINE,
 }: TrustCenterPageProps) {
+  const router = useRouter();
   const { data, isLoading, error, reload } = useSelfFetch<TrustCenterPublic>(endpoint, {
     initialData,
     revalidateOnVisibleAfterMs: TRUST_CENTER_CACHE_SECONDS * 1000,
@@ -194,6 +191,11 @@ export function TrustCenterPage({
   const openRequest = useCallback((documentTitle: string | null) => setRequest({ open: true, documentTitle }), []);
   const closeRequest = useCallback(() => setRequest(current => ({ ...current, open: false })), []);
 
+  const backCfg =
+    backButton === false
+      ? undefined
+      : { label: backButton.label ?? 'Back to home', onClick: () => router.push(backButton.href ?? '/') };
+
   const hasGatedDocuments = data?.documents.some(document => document.access === 'request') ?? false;
   const actions = hasGatedDocuments
     ? [{ label: 'Request access', variant: 'accent' as const, onClick: () => openRequest(null) }]
@@ -203,19 +205,19 @@ export function TrustCenterPage({
   // sections show comes from `visibleSections` — this map only says what each renders.
   const views: Record<TrustCenterSectionId, TrustSectionView> = {
     ai: {
-      lead: TRUST_SECTION_LEADS.ai,
+      lead: 'How customer data is handled by the AI in our products.',
       render: d => <AiSection practices={d.aiPractices} />,
     },
     compliance: {
-      lead: TRUST_SECTION_LEADS.compliance,
+      lead: 'Frameworks we are audited against, and what is next.',
       render: d => <ComplianceSection frameworks={d.frameworks} />,
     },
     controls: {
-      lead: TRUST_SECTION_LEADS.controls,
+      lead: 'Security controls currently passing in continuous monitoring (via Vanta).',
       render: d => <ControlsSection endpoint={endpoint} seed={controlsSeed(d)} />,
     },
     documents: {
-      lead: TRUST_SECTION_LEADS.documents,
+      lead: 'Public documents open directly. Gated documents are shared under NDA after one short request.',
       render: d => (
         <DocumentsSection
           documents={d.documents}
@@ -225,7 +227,7 @@ export function TrustCenterPage({
       ),
     },
     subprocessors: {
-      lead: TRUST_SECTION_LEADS.subprocessors,
+      lead: 'Third parties that process customer data on our behalf.',
       render: d => <SubprocessorsSection subprocessors={d.subprocessors} />,
     },
     faq: { render: d => <FaqSection initialFaqs={d.faqs} heading={null} /> },
@@ -241,7 +243,7 @@ export function TrustCenterPage({
     const status = monitoringStatus(data, hydrated, nowMs);
     body = (
       <>
-        <div className={TRUST_STATUS_ROW_CLASS}>
+        <div className="flex flex-col gap-[var(--spacing-system-xs)] md:flex-row md:items-center md:justify-between">
           <StatusIndicator status={status.status} label={status.label} />
           {data.connected ? (
             <DataAttribution
@@ -261,8 +263,8 @@ export function TrustCenterPage({
           ) : null}
         </div>
 
-        <div className={TRUST_BODY_GRID_CLASS}>
-          <div className={TRUST_SECTIONS_COLUMN_CLASS}>
+        <div className="grid grid-cols-1 gap-[var(--spacing-system-xl)] lg:grid-cols-[minmax(0,1fr)_12rem]">
+          <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxl)]">
             {sections.map(section => {
               const view = views[section.id];
               return (
@@ -294,34 +296,6 @@ export function TrustCenterPage({
     );
   }
 
-  return (
-    <TrustCenterChrome shell={shell} title={title} subtitle={subtitle} backButton={backButton} actions={actions}>
-      {body}
-    </TrustCenterChrome>
-  );
-}
-
-/**
- * The page's chrome, ONE copy for the page and its skeleton: the standalone
- * `PageShell` or the host's padded box (`shell`), and the frozen `PageLayout`
- * header (title, subtitle, back button, actions).
- */
-function TrustCenterChrome({
-  shell,
-  title,
-  subtitle,
-  backButton,
-  actions,
-  children,
-}: Required<Pick<TrustCenterPageProps, 'shell' | 'title' | 'subtitle' | 'backButton'>> & {
-  actions?: Array<{ label: string; variant: 'accent'; onClick: () => void }>;
-  children: ReactNode;
-}) {
-  const router = useRouter();
-  const backCfg =
-    backButton === false
-      ? undefined
-      : { label: backButton.label ?? 'Back to home', onClick: () => router.push(backButton.href ?? '/') };
   const inner = (
     <PageLayout
       title={title}
@@ -332,26 +306,9 @@ function TrustCenterChrome({
       actions={actions}
       actionsVariant="primary-buttons"
     >
-      {children}
+      {body}
     </PageLayout>
   );
-  return shell ? <PageShell>{inner}</PageShell> : <div className="page-shell-content">{inner}</div>;
-}
 
-/**
- * The whole page while a host loads the data itself (the hub's admin preview):
- * the SAME chrome and the same body skeleton `TrustCenterPage` shows while it
- * self-fetches. Pass the chrome props the page will get.
- */
-export function TrustCenterPageSkeleton({
-  shell = true,
-  backButton = false,
-  title = TRUST_CENTER_TITLE,
-  subtitle = TRUST_CENTER_TAGLINE,
-}: Pick<TrustCenterPageProps, 'shell' | 'backButton' | 'title' | 'subtitle'>) {
-  return (
-    <TrustCenterChrome shell={shell} title={title} subtitle={subtitle} backButton={backButton}>
-      <TrustCenterSkeleton />
-    </TrustCenterChrome>
-  );
+  return shell ? <PageShell>{inner}</PageShell> : <div className="page-shell-content">{inner}</div>;
 }

package/src/components/help-center-pages/trust-center-sections.tsx

@@ -19,7 +19,6 @@ import { useDebounce } from '../../hooks/ui/use-debounce';
 import { useSelfFetch } from '../../hooks/use-self-fetch';
 import {
   TRUST_CENTER_SEARCH_DEBOUNCE_MS,
-  TRUST_CENTER_SECTIONS,
   normalizeTrustControlQuery,
   trustCenterControlsUrl,
   trustFrameworkBadge,
@@ -29,7 +28,6 @@ import {
   type TrustCenterControlsPage,
   type TrustCenterDocument,
   type TrustCenterFramework,
-  type TrustCenterSectionId,
   type TrustCenterSubprocessor,
   type TrustFrameworkMonitoringEntry,
 } from '../../types/trust-center';
@@ -45,7 +43,8 @@ import { ShieldCheckIcon } from '../icons-v2-generated/security/shield-check-ico
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
 import { SECTION_HEADING_CLASS } from '../layout/page-heading';
 import { ListEmptyState } from '../list-empty-state';
-import { TextSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { CardSkeletonGrid } from '../loading/card-skeleton';
+import { TextSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button/button';
 import { ComplianceLogo } from '../ui/compliance-badge';
 import { EntityImage } from '../ui/entity-image';
@@ -63,27 +62,8 @@ const FRAMEWORK_ICONS: Record<TrustFrameworkMonitoringEntry['icon'], typeof Shie
   'file-shield': FileShieldIcon,
 };
 
+const STACK_CLASSES = 'flex flex-col gap-[var(--spacing-system-l)]';
 const BODY_TEXT = 'text-h6 text-ods-text-secondary';
-
-/**
- * The page body's layout, ONE copy for the loaded page and its skeleton, so the
- * skeleton cannot drift from what replaces it: the status row, then the sections
- * beside the section rail.
- */
-export const TRUST_STATUS_ROW_CLASS =
-  'flex flex-col gap-[var(--spacing-system-xs)] md:flex-row md:items-center md:justify-between';
-export const TRUST_BODY_GRID_CLASS =
-  'grid grid-cols-1 gap-[var(--spacing-system-xl)] lg:grid-cols-[minmax(0,1fr)_12rem]';
-export const TRUST_SECTIONS_COLUMN_CLASS = 'flex min-w-0 flex-col gap-[var(--spacing-system-xxl)]';
-
-/** Each section's one-line lead under its heading (the page and its skeleton read the same copy). */
-export const TRUST_SECTION_LEADS: Partial<Record<TrustCenterSectionId, string>> = {
-  compliance: 'Frameworks we are audited against, and what is next.',
-  controls: 'Security controls currently passing in continuous monitoring (via Vanta).',
-  documents: 'Public documents open directly. Gated documents are shared under NDA after one short request.',
-  subprocessors: 'Third parties that process customer data on our behalf.',
-  ai: 'How customer data is handled by the AI in our products.',
-};
 /**
  * The right-hand action / status column: ONE width from tablet up, so every
  * panel's rows line up; on phones it hugs its content so the title keeps the room.
@@ -560,143 +540,12 @@ export function ContactSection({ onContact }: { onContact: () => void }) {
   );
 }
 
-// ---------------------------------------------------------------------------
-// Skeleton
-// ---------------------------------------------------------------------------
-
-/** A section's heading and lead, exactly as `TrustSection` renders them (real text: it does not load). */
-function SkeletonSection({ id, children }: { id: TrustCenterSectionId; children: ReactNode }) {
-  const label = TRUST_CENTER_SECTIONS.find(section => section.id === id)?.label ?? id;
-  const lead = TRUST_SECTION_LEADS[id];
-  return (
-    <section aria-hidden="true" className="flex flex-col gap-[var(--spacing-system-m)]">
-      <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-        <h2 className={SECTION_HEADING_CLASS}>{label}</h2>
-        {lead ? <p className={BODY_TEXT}>{lead}</p> : null}
-      </div>
-      {children}
-    </section>
-  );
-}
-
-/**
- * Rows of the REAL `StackedRowsPanel` (its own row heights and borders) whose
- * cells hold bars: a mark (a 40px compliance logo or a 24px glyph), a value over
- * a label, and the right-hand badge or button in the page's `ACTION_COLUMN`.
- */
-function skeletonRows(count: number, shape: { mark: 'logo' | 'glyph'; action: 'badge' | 'button' }): PanelRow[] {
-  return Array.from({ length: count }, (_, index) => ({
-    id: `skeleton-${index}`,
-    columns: [
-      {
-        key: 'item',
-        content: (
-          <div className="flex w-full items-center gap-[var(--spacing-system-s)]">
-            <UnifiedSkeleton
-              className={shape.mark === 'logo' ? 'size-10 shrink-0 rounded-full' : 'size-6 shrink-0 rounded'}
-            />
-            <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-              <UnifiedSkeleton variant="text" className="h-5 w-1/3 md:h-6" />
-              <TextSkeleton.Body className="w-1/2" />
-            </div>
-          </div>
-        ),
-      },
-      {
-        key: 'action',
-        width: ACTION_COLUMN,
-        align: 'right',
-        content:
-          shape.action === 'badge' ? (
-            <UnifiedSkeleton className="h-4 w-28 rounded" />
-          ) : (
-            <UnifiedSkeleton className="h-6 w-16 rounded md:h-8" />
-          ),
-      },
-    ],
-  }));
-}
-
-/** The Controls section while loading: its tab strip, its summary and search, and the list box's own skeleton. */
-function ControlsSectionSkeleton() {
-  return (
-    <div className="flex flex-col gap-[var(--spacing-system-m)]">
-      <div className="flex items-center gap-[var(--spacing-system-xxs)] overflow-hidden">
-        {[0, 1, 2, 3].map(index => (
-          <div key={index} className="shrink-0 p-[var(--spacing-system-m)]">
-            <UnifiedSkeleton variant="text" className="h-5 w-36 md:h-6" />
-          </div>
-        ))}
-      </div>
-      <div className="flex flex-col gap-[var(--spacing-system-s)] md:flex-row md:items-center md:justify-between">
-        <TextSkeleton.Body className="w-48" />
-        <UnifiedSkeleton className="h-11 w-full rounded-[6px] md:h-12 md:w-80" />
-      </div>
-      <div className={CONTROLS_LIST_HEIGHT}>
-        <ControlsListSkeleton />
-      </div>
-    </div>
-  );
-}
-
-/** The section rail while loading: `StickySectionNav`'s line and its 40px items. */
-function SectionRailSkeleton() {
-  return (
-    <div className="sticky" style={{ top: STICKY_HEADER_OFFSET_PX }}>
-      <div className="relative">
-        <div
-          className="absolute -left-0.5 top-0 w-px bg-ods-border"
-          style={{ height: TRUST_CENTER_SECTIONS.length * 40 }}
-        />
-        {TRUST_CENTER_SECTIONS.map(section => (
-          <div key={section.id} className="flex h-10 items-center px-3 py-2">
-            <TextSkeleton.Body className="w-24" />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/**
- * The page BODY while the trust center loads: built on the loaded body's own
- * layout classes and the real section headings and panels, so nothing moves when
- * the content replaces it. The status row, then Compliance, Controls and
- * Documents (what fills the first screens), beside the section rail.
- */
+/** Mirrors the page: a card row, then the controls grid. */
 export function TrustCenterSkeleton() {
   return (
-    <>
-      <div className={TRUST_STATUS_ROW_CLASS} aria-hidden="true">
-        <div className="flex items-center gap-1.5">
-          <UnifiedSkeleton className="size-3 rounded-full" />
-          <TextSkeleton.Body className="w-44" />
-        </div>
-        {/* `DataAttribution`'s own layout: two lines below `sm`, one row above it. */}
-        <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] sm:flex-row sm:items-center sm:gap-[var(--spacing-system-sf)]">
-          <div className="flex items-center gap-[var(--spacing-system-xsf)]">
-            <UnifiedSkeleton className="size-4 rounded" />
-            <TextSkeleton.Body className="w-36" />
-          </div>
-          <TextSkeleton.Body className="w-44" />
-        </div>
-      </div>
-      <div className={TRUST_BODY_GRID_CLASS} aria-busy="true" aria-label="Loading the trust center">
-        <div className={TRUST_SECTIONS_COLUMN_CLASS}>
-          <SkeletonSection id="compliance">
-            <StackedRowsPanel rows={skeletonRows(3, { mark: 'logo', action: 'badge' })} />
-          </SkeletonSection>
-          <SkeletonSection id="controls">
-            <ControlsSectionSkeleton />
-          </SkeletonSection>
-          <SkeletonSection id="documents">
-            <StackedRowsPanel rows={skeletonRows(2, { mark: 'glyph', action: 'button' })} />
-          </SkeletonSection>
-        </div>
-        <aside className="hidden lg:block" aria-hidden="true">
-          <SectionRailSkeleton />
-        </aside>
-      </div>
-    </>
+    <div className={STACK_CLASSES}>
+      <CardSkeletonGrid count={2} variant="category" />
+      <CardSkeletonGrid count={4} variant="category" />
+    </div>
   );
 }