@flamingo-stack/openframe-frontend-core 0.0.668 → 0.0.669

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

@@ -12,7 +12,17 @@
  * server answers as one flat, grouped, counted list.
  */
 import { type ReactNode } from 'react';
-import { type TrustCenterAiPractice, type TrustCenterControlsPage, type TrustCenterDocument, type TrustCenterFramework, type TrustCenterSubprocessor } from '../../types/trust-center';
+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>>;
 /** One anchored page section: an `h2` + optional lead line + content. */
 export declare function TrustSection({ id, title, lead, children, }: {
     id: string;
@@ -84,6 +94,11 @@ export declare function SubprocessorsSection({ subprocessors }: {
 export declare function ContactSection({ onContact }: {
     onContact: () => void;
 }): import("react").JSX.Element;
-/** Mirrors the page: a card row, then the controls grid. */
+/**
+ * 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.
+ */
 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,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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.668",
+  "version": "0.0.669",
   "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,7 +14,8 @@ import {
   type TrustCenterPublic,
 } from '../../../types/trust-center';
 import { TRUST_CENTER_FIXTURE_WINDOW_MS, makeTrustCenterData } from '../__fixtures__/trust-center';
-import { TrustCenterPage } from '../trust-center-page';
+import { TrustCenterPage, TrustCenterPageSkeleton } from '../trust-center-page';
+import { TRUST_SECTION_LEADS } from '../trust-center-sections';
 
 // 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
@@ -114,6 +115,32 @@ 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, type TrustCenterPageProps } from './trust-center-page';
+export { TrustCenterPage, TrustCenterPageSkeleton, 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,6 +61,10 @@ 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';
@@ -146,7 +150,6 @@ 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,
@@ -191,11 +194,6 @@ 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) }]
@@ -205,19 +203,19 @@ export function TrustCenterPage({
   // sections show comes from `visibleSections` — this map only says what each renders.
   const views: Record<TrustCenterSectionId, TrustSectionView> = {
     ai: {
-      lead: 'How customer data is handled by the AI in our products.',
+      lead: TRUST_SECTION_LEADS.ai,
       render: d => <AiSection practices={d.aiPractices} />,
     },
     compliance: {
-      lead: 'Frameworks we are audited against, and what is next.',
+      lead: TRUST_SECTION_LEADS.compliance,
       render: d => <ComplianceSection frameworks={d.frameworks} />,
     },
     controls: {
-      lead: 'Security controls currently passing in continuous monitoring (via Vanta).',
+      lead: TRUST_SECTION_LEADS.controls,
       render: d => <ControlsSection endpoint={endpoint} seed={controlsSeed(d)} />,
     },
     documents: {
-      lead: 'Public documents open directly. Gated documents are shared under NDA after one short request.',
+      lead: TRUST_SECTION_LEADS.documents,
       render: d => (
         <DocumentsSection
           documents={d.documents}
@@ -227,7 +225,7 @@ export function TrustCenterPage({
       ),
     },
     subprocessors: {
-      lead: 'Third parties that process customer data on our behalf.',
+      lead: TRUST_SECTION_LEADS.subprocessors,
       render: d => <SubprocessorsSection subprocessors={d.subprocessors} />,
     },
     faq: { render: d => <FaqSection initialFaqs={d.faqs} heading={null} /> },
@@ -243,7 +241,7 @@ export function TrustCenterPage({
     const status = monitoringStatus(data, hydrated, nowMs);
     body = (
       <>
-        <div className="flex flex-col gap-[var(--spacing-system-xs)] md:flex-row md:items-center md:justify-between">
+        <div className={TRUST_STATUS_ROW_CLASS}>
           <StatusIndicator status={status.status} label={status.label} />
           {data.connected ? (
             <DataAttribution
@@ -263,8 +261,8 @@ export function TrustCenterPage({
           ) : null}
         </div>
 
-        <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)]">
+        <div className={TRUST_BODY_GRID_CLASS}>
+          <div className={TRUST_SECTIONS_COLUMN_CLASS}>
             {sections.map(section => {
               const view = views[section.id];
               return (
@@ -296,6 +294,34 @@ 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}
@@ -306,9 +332,26 @@ export function TrustCenterPage({
       actions={actions}
       actionsVariant="primary-buttons"
     >
-      {body}
+      {children}
     </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>
+  );
+}

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

@@ -19,6 +19,7 @@ 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,
@@ -28,6 +29,7 @@ import {
   type TrustCenterControlsPage,
   type TrustCenterDocument,
   type TrustCenterFramework,
+  type TrustCenterSectionId,
   type TrustCenterSubprocessor,
   type TrustFrameworkMonitoringEntry,
 } from '../../types/trust-center';
@@ -43,8 +45,7 @@ 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 { CardSkeletonGrid } from '../loading/card-skeleton';
-import { TextSkeleton } from '../loading/unified-skeleton';
+import { TextSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button/button';
 import { ComplianceLogo } from '../ui/compliance-badge';
 import { EntityImage } from '../ui/entity-image';
@@ -62,8 +63,27 @@ 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.
@@ -540,12 +560,143 @@ export function ContactSection({ onContact }: { onContact: () => void }) {
   );
 }
 
-/** Mirrors the page: a card row, then the controls grid. */
-export function TrustCenterSkeleton() {
+// ---------------------------------------------------------------------------
+// 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 (
-    <div className={STACK_CLASSES}>
-      <CardSkeletonGrid count={2} variant="category" />
-      <CardSkeletonGrid count={4} variant="category" />
+    <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.
+ */
+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>
+    </>
+  );
+}