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

package/src/components/help-center-pages/download-apps-page.tsx

@@ -36,6 +36,7 @@ import type { ComponentType, ReactNode } from 'react';
 import { useRouter } from '../../embed-shims/next-navigation';
 import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard';
 import { useDownloads } from '../../hooks/use-downloads';
+import { TILE_SIZE } from '../../styles/component-sizes';
 import {
   DESKTOP_OS_LABELS,
   DOWNLOAD_ARCHITECTURE_LABELS,
@@ -53,18 +54,19 @@ import { cn } from '../../utils/cn';
 import { formatUrlForDisplay } from '../../utils/format';
 import { DESKTOP_OSES, type DesktopOs } from '../../utils/visitor-os';
 import { FaqSection, pageFaqProps, type PageFaqSlot } from '../faq/faq-section';
-import { CommandBox } from '../features/command-box';
+import { CommandBox, CommandBoxSkeleton } from '../features/command-box';
 import { AppleLogoIcon } from '../icons-v2-generated/brand-logos/apple-logo-icon';
 import { WindowsLogoGreyIcon } from '../icons-v2-generated/brand-logos/windows-logo-grey-icon';
 import { Download01Icon } from '../icons-v2-generated/interface/download-01-icon';
 import { PageShell } from '../layout/article-detail-layout';
 import { PageLayout } from '../layout/page-layout';
 import { LoadingRegion } from '../loading/loading-region';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button/button';
 import { LoadError } from '../ui/error-state';
+import { useLoadingScope } from '../ui/loading-scope';
 import { MobileAppQr } from '../ui/mobile-app-qr';
-import { StoreBadgeLinks } from '../ui/store-badges';
+import { AppStoreBadge, GooglePlayBadge, StoreBadgeLinks } from '../ui/store-badges';
 
 export interface DownloadAppsPageProps {
   /** GET endpoint for the public projection. Default `DOWNLOADS_API_PATH`. */
@@ -114,6 +116,13 @@ const CARD_CLASS =
 const CARD_HEADER_CLASS = 'flex items-center gap-[var(--spacing-system-sf)]';
 const BUTTONS_CLASS = 'flex flex-wrap gap-[var(--spacing-system-sf)]';
 const COMMANDS_CLASS = 'flex flex-col gap-[var(--spacing-system-mf)]';
+const SCAN_CARD_CLASS = 'content-md:flex-row content-md:items-center content-md:justify-between';
+const QR_CLASS = `${TILE_SIZE.qr} shrink-0`;
+/** `StoreBadgeLinks`' row and badge size, which the loading store card draws with the same artwork. */
+const STORE_BADGES_CLASS = 'flex flex-wrap items-center gap-[var(--spacing-system-lf)]';
+const STORE_BADGE_CLASS = 'h-12 w-auto';
+const MOBILE_STORE_CARD_LINE = 'Get alerts and respond to tickets on the go.';
+const MOBILE_SCAN_TITLE = 'Scan with your phone';
 
 const OS_ICONS: Partial<Record<DesktopOs, ComponentType<{ className?: string }>>> = {
   mac: AppleLogoIcon,
@@ -246,18 +255,61 @@ function WebCard({ web }: { web: DownloadAppsWebOption }) {
   );
 }
 
-/** A section's cards while the server's answer loads: the same grid and card frame, a button's box in each. */
-function CardsSkeleton({ label }: { label: string }) {
+/**
+ * The desktop cards while the server's answer loads: one card per system the page knows (`DESKTOP_OSES`, in the
+ * loaded grid's own rule), each with its real logo and name, the requirement line as a bar, the installer button's
+ * own skeleton and one install command's box (a system the deployment does not offer drops out when it lands).
+ */
+function SystemCardsSkeleton() {
+  return (
+    <div className={cardsGridClass(DESKTOP_OSES.length)}>
+      {DESKTOP_OSES.map(os => {
+        const Icon = OS_ICONS[os];
+        return (
+          <div key={os} className={CARD_CLASS}>
+            <div className={CARD_HEADER_CLASS}>
+              {Icon && <Icon className="h-6 w-6 shrink-0 text-ods-text-secondary" />}
+              <h3 className="m-0 text-ods-text-primary text-h3">{DESKTOP_OS_LABELS[os]}</h3>
+              <TextLineSkeleton type="h6" className="ml-auto w-32" />
+            </div>
+            <div className={BUTTONS_CLASS}>
+              <InteractiveSkeleton.Button size="default" className="w-56" />
+            </div>
+            <div className={COMMANDS_CLASS}>
+              <CommandBoxSkeleton lines={1} showCopy />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * The mobile cards while the server's answer loads: the store card (its line and both store badges, static artwork,
+ * real; the device name as a bar) and the scan card (its heading real, the address line and the code as skeletons).
+ */
+function MobileCardsSkeleton() {
   return (
-    <LoadingRegion label={label} className={CARDS_GRID_CLASS}>
-      {[0, 1].map(card => (
-        <div key={card} className={CARD_CLASS}>
-          <UnifiedSkeleton className="h-6 w-32 rounded" />
-          <UnifiedSkeleton className="h-12 w-56 rounded-md" />
-          <UnifiedSkeleton className="h-14 w-full rounded-md" />
+    <div className={cardsGridClass(2)}>
+      <div className={CARD_CLASS}>
+        <div className={CARD_HEADER_CLASS}>
+          <TextLineSkeleton type="h3" className="w-48" />
         </div>
-      ))}
-    </LoadingRegion>
+        <p className="m-0 text-ods-text-secondary text-h4">{MOBILE_STORE_CARD_LINE}</p>
+        <div className={STORE_BADGES_CLASS} inert aria-hidden>
+          <AppStoreBadge className={STORE_BADGE_CLASS} />
+          <GooglePlayBadge className={STORE_BADGE_CLASS} />
+        </div>
+      </div>
+      <div className={cn(CARD_CLASS, SCAN_CARD_CLASS)}>
+        <div className="flex flex-col gap-[var(--spacing-system-sf)]">
+          <CardHeader title={MOBILE_SCAN_TITLE} />
+          <TextLineSkeleton type="h4" lines={2} className="w-full" />
+        </div>
+        <UnifiedSkeleton className={QR_CLASS} />
+      </div>
+    </div>
   );
 }
 
@@ -292,6 +344,8 @@ export function DownloadAppsPage({
   faq,
 }: DownloadAppsPageProps) {
   const { data, isLoading, error, reload } = useDownloads({ endpoint, initialData });
+  // In a page's loading state the answer is read: the page draws its sections' skeletons, never nothing.
+  const scoped = useLoadingScope();
   // The page adapts to the server's answer: a section exists only for what it names.
   const systems = showDesktop && data ? rowsBySystem(data.desktop) : [];
   const mobile = data?.mobile ?? null;
@@ -300,21 +354,23 @@ export function DownloadAppsPage({
   const offersDesktop = showDesktop && (!data || systems.length > 0);
 
   let body: ReactNode;
-  if (error && !data) {
+  if (error && !data && !scoped) {
     body = <LoadError message="Could not load the downloads" onRetry={reload} />;
-  } else if (!data) {
-    body = isLoading ? (
-      <>
-        {showDesktop && (
-          <Section id="download-desktop" title="Desktop app">
-            <CardsSkeleton label="Loading the installers" />
+  } else if (!data || scoped) {
+    body =
+      isLoading || scoped ? (
+        // ONE region announces the page's loading; the sections inside it are silent.
+        <LoadingRegion label="Loading the downloads" className={SECTIONS_CLASS}>
+          {showDesktop && (
+            <Section id="download-desktop" title="Desktop app">
+              <SystemCardsSkeleton />
+            </Section>
+          )}
+          <Section id="download-mobile" title="Mobile app">
+            <MobileCardsSkeleton />
           </Section>
-        )}
-        <Section id="download-mobile" title="Mobile app">
-          <CardsSkeleton label="Loading the mobile app" />
-        </Section>
-      </>
-    ) : null;
+        </LoadingRegion>
+      ) : null;
   } else {
     body = (
       <>
@@ -333,7 +389,7 @@ export function DownloadAppsPage({
             <div className={cardsGridClass(mobile.install ? 2 : 1)}>
               <div className={CARD_CLASS}>
                 <CardHeader title={storeCardTitle(mobile)} />
-                <p className="m-0 text-ods-text-secondary text-h4">Get alerts and respond to tickets on the go.</p>
+                <p className="m-0 text-ods-text-secondary text-h4">{MOBILE_STORE_CARD_LINE}</p>
                 <StoreBadgeLinks
                   appStoreUrl={mobile.appStoreUrl}
                   googlePlayUrl={mobile.googlePlayUrl}
@@ -341,16 +397,14 @@ export function DownloadAppsPage({
                 />
               </div>
               {mobile.install && (
-                <div
-                  className={cn(CARD_CLASS, 'content-md:flex-row content-md:items-center content-md:justify-between')}
-                >
+                <div className={cn(CARD_CLASS, SCAN_CARD_CLASS)}>
                   <div className="flex flex-col gap-[var(--spacing-system-sf)]">
-                    <CardHeader title="Scan with your phone" />
+                    <CardHeader title={MOBILE_SCAN_TITLE} />
                     <p className="m-0 text-ods-text-secondary text-h4">
                       Point your camera at the code, or open {formatUrlForDisplay(mobile.install.url)} on your phone.
                     </p>
                   </div>
-                  <MobileAppQr install={mobile.install} className="h-[144px] w-[144px] shrink-0" />
+                  <MobileAppQr install={mobile.install} className={QR_CLASS} />
                 </div>
               )}
             </div>

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

@@ -6,8 +6,8 @@
  * ONE page, not tabs (2026 trust-center practice: buyers skim and Ctrl-F, and a
  * questionnaire needs a deep link per section): hero with the monitoring status
  * (with the page's PDF as a quiet link at its end) and the Request access action, then anchored sections in reading order
- * (`TRUST_CENTER_SECTIONS`: AI & data use → compliance → controls → documents →
- * subprocessors → FAQ → questions) with a sticky section rail on desktop
+ * (`TRUST_CENTER_SECTIONS`: compliance → controls → documents → subprocessors →
+ * AI & data use → contact → FAQ) with a sticky section rail on desktop
  * (`StickySectionNav` + `useScrollSpy`, the vendor-page / DocViewer pattern).
  * Built ONLY from existing lib components (see `trust-center-sections.tsx`); the
  * chrome is the canonical `PageShell` + frozen `PageLayout`.
@@ -24,6 +24,10 @@
  * revalidation. Before hydration the status is NEUTRAL (never a claim that
  * flips). The subtitle is the brand-neutral `TRUST_CENTER_TAGLINE` unless the
  * host overrides it.
+ *
+ * LOADING: the page is its own loading state. While the projection is read (or in a host's loading scope) it renders
+ * the SAME view over an empty projection (`EMPTY_TRUST_CENTER`) inside a `LoadingScope`, every section shown: each
+ * section's component draws its own skeleton, static copy (headings, leads, Contact, the rail) is real.
  */
 
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
@@ -35,6 +39,7 @@ import {
   TRUST_CENTER_API_PATH,
   TRUST_CENTER_CACHE_SECONDS,
   TRUST_CENTER_TAGLINE,
+  TRUST_CENTER_SECTIONS,
   TRUST_CENTER_TITLE,
   trustCenterMonitoringStatus,
   trustCenterDocumentUrl,
@@ -46,14 +51,16 @@ import {
 } from '../../types/trust-center';
 import { STICKY_HEADER_OFFSET_PX } from '../../utils/same-page-hash-nav';
 import { useScrollSpy } from '../docs/use-scroll-spy';
-import { FaqSection, type FaqSectionProps } from '../faq/faq-section';
+import { FaqSection, type FaqSectionProps, type FaqSkeletonShape } from '../faq/faq-section';
 import { PageShell } from '../layout/article-detail-layout';
 import { PageLayout } from '../layout/page-layout';
+import { LoadingRegion } from '../loading/loading-region';
 import { StickySectionNav } from '../navigation/sticky-section-nav';
 import { DataAttribution } from '../ui/data-attribution';
 import { DownloadButton } from '../ui/download-button';
 import { EntityImage } from '../ui/entity-image';
 import { LoadError } from '../ui/error-state';
+import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
 import { StatusIndicator } from '../ui/status-indicator';
 import {
   AiSection,
@@ -67,7 +74,8 @@ import {
   TRUST_SECTIONS_COLUMN_CLASS,
   TRUST_SECTION_LEADS,
   TRUST_STATUS_ROW_CLASS,
-  TrustCenterSkeleton,
+  type TrustCenterPanelId,
+  type TrustPanelRows,
   TrustSection,
 } from './trust-center-sections';
 
@@ -100,6 +108,13 @@ export interface TrustCenterPageProps {
    * them twice; the monitoring status stays.
    */
   attribution?: boolean;
+  /** The FAQ's loading state, group by group (the FAQ's `skeletonShape`). */
+  faqSkeletonShape?: FaqSkeletonShape;
+  /**
+   * Rows each panel's loading state draws, for a host whose lists are curated (it knows their lengths: the frameworks
+   * it is audited against). Absent: the layout's fold, the rows one screen holds.
+   */
+  panelSkeletonRows?: Partial<Record<TrustCenterPanelId, TrustPanelRows>>;
 }
 
 /** One section's page content. Its `h2` is the `TRUST_CENTER_SECTIONS` label — never a literal here. */
@@ -124,6 +139,26 @@ function controlsSeed(data: TrustCenterPublic): TrustCenterControlsPage {
   };
 }
 
+/**
+ * The projection the page renders while it is read: nothing listed, so every section's component, in the loading
+ * scope, draws its own skeleton. Never shown as data (the scope draws no read word).
+ */
+const EMPTY_TRUST_CENTER: TrustCenterPublic = {
+  frameworks: [],
+  controlDomains: [],
+  policies: [],
+  documents: [],
+  subprocessors: [],
+  aiPractices: [],
+  faqs: [],
+  checkedAt: null,
+  syncedAt: null,
+  monitoredWindowMs: 0,
+  connected: true,
+  dataSource: { name: '', logoUrl: null },
+  documentRequestCategory: '',
+};
+
 /** How often an open page re-judges "monitored" against the clock. */
 const MONITORING_CLOCK_TICK_MS = 60_000;
 
@@ -152,7 +187,11 @@ export function TrustCenterPage({
   ask,
   beforeFaq,
   attribution = true,
+  faqSkeletonShape,
+  panelSkeletonRows,
 }: TrustCenterPageProps) {
+  // In a page's loading state the projection is read (the host passes none): the page draws its skeleton.
+  const scoped = useLoadingScope();
   const { data, isLoading, error, reload } = useSelfFetch<TrustCenterPublic>(endpoint, {
     initialData,
     revalidateOnVisibleAfterMs: TRUST_CENTER_CACHE_SECONDS * 1000,
@@ -180,7 +219,13 @@ export function TrustCenterPage({
     documentTitle: null,
   });
 
-  const sections = useMemo(() => (data ? visibleTrustCenterSections(data) : []), [data]);
+  const loading = scoped || (!data && isLoading && !error);
+  // While loading every section is drawn (which ones the data fills is not known yet), each as its own skeleton.
+  const view = loading ? EMPTY_TRUST_CENTER : data;
+  const sections = useMemo<Array<(typeof TRUST_CENTER_SECTIONS)[number]>>(
+    () => (loading ? [...TRUST_CENTER_SECTIONS] : data ? visibleTrustCenterSections(data) : []),
+    [loading, data],
+  );
   // Anchors. The scroll spy lights the rail from whatever scrolls the sections
   // (the window, or a host shell's `<main overflow-y-auto>` — OpenFrame's
   // `AppLayout`) and keeps the URL's hash on the section in view (`syncHash`;
@@ -195,13 +240,13 @@ export function TrustCenterPage({
     syncHash: true,
     headerOffset: STICKY_HEADER_OFFSET_PX,
   });
-  useScrollToHash(sections.length > 0 ? sections.map(section => section.id).join('|') : null, {
+  useScrollToHash(!loading && sections.length > 0 ? sections.map(section => section.id).join('|') : null, {
     headerOffset: STICKY_HEADER_OFFSET_PX,
   });
   const openRequest = useCallback((documentTitle: string | null) => setRequest({ open: true, documentTitle }), []);
   const closeRequest = useCallback(() => setRequest(current => ({ ...current, open: false })), []);
 
-  const hasGatedDocuments = data?.documents.some(document => document.access === 'request') ?? false;
+  const hasGatedDocuments = view?.documents.some(document => document.access === 'request') ?? false;
   const actions = hasGatedDocuments
     ? [{ label: 'Request access', variant: 'accent' as const, onClick: () => openRequest(null) }]
     : undefined;
@@ -217,11 +262,11 @@ export function TrustCenterPage({
   const views: Record<TrustCenterSectionId, TrustSectionView> = {
     ai: {
       lead: TRUST_SECTION_LEADS.ai,
-      render: d => <AiSection practices={d.aiPractices} />,
+      render: d => <AiSection practices={d.aiPractices} skeletonRows={panelSkeletonRows?.ai} />,
     },
     compliance: {
       lead: TRUST_SECTION_LEADS.compliance,
-      render: d => <ComplianceSection frameworks={d.frameworks} />,
+      render: d => <ComplianceSection frameworks={d.frameworks} skeletonRows={panelSkeletonRows?.compliance} />,
     },
     controls: {
       lead: TRUST_SECTION_LEADS.controls,
@@ -234,14 +279,20 @@ export function TrustCenterPage({
           documents={d.documents}
           documentUrl={document => trustCenterDocumentUrl(endpoint, document)}
           onRequest={openRequest}
+          skeletonRows={panelSkeletonRows?.documents}
         />
       ),
     },
     subprocessors: {
       lead: TRUST_SECTION_LEADS.subprocessors,
-      render: d => <SubprocessorsSection subprocessors={d.subprocessors} />,
+      render: d => (
+        <SubprocessorsSection subprocessors={d.subprocessors} skeletonRows={panelSkeletonRows?.subprocessors} />
+      ),
+    },
+    // The FAQ's skeleton props shape only its loading state (in the scope it draws its own skeleton).
+    faq: {
+      render: d => <FaqSection initialFaqs={d.faqs} heading={null} ask={ask} skeletonShape={faqSkeletonShape} />,
     },
-    faq: { render: d => <FaqSection initialFaqs={d.faqs} heading={null} ask={ask} /> },
     contact: { render: () => <ContactSection onContact={() => openRequest(null)} /> },
   };
 
@@ -250,31 +301,42 @@ export function TrustCenterPage({
   const faqLast = Boolean(beforeFaq) && Boolean(faqSection);
   const columnSections = faqLast ? sections.filter(section => section.id !== 'faq') : sections;
 
+  // The page's view in its loading state: the same components in a loading scope (no element of its own in the
+  // layout: `contents`), announced once unless a host's scope already did.
+  const inLoadingScope = (node: ReactNode, label: string): ReactNode =>
+    loading ? (
+      <LoadingRegion label={label} announce={!scoped} className="contents">
+        <LoadingScope className="contents">{node}</LoadingScope>
+      </LoadingRegion>
+    ) : (
+      node
+    );
+
   let body: ReactNode;
-  if (error && !data) {
+  if (!loading && error && !data) {
     body = <LoadError message="Could not load the trust center" onRetry={reload} />;
-  } else if (!data) {
-    body = isLoading ? <TrustCenterSkeleton /> : null;
+  } else if (!view) {
+    body = null;
   } else {
-    const status = monitoringStatus(data, hydrated, nowMs);
-    body = (
+    const status = monitoringStatus(view, hydrated, nowMs);
+    body = inLoadingScope(
       <>
         <div className={TRUST_STATUS_ROW_CLASS}>
           <StatusIndicator status={status.status} label={status.label} />
-          {data.connected && attribution ? (
+          {view.connected && attribution ? (
             <DataAttribution
               icon={
-                data.dataSource.logoUrl ? (
+                view.dataSource.logoUrl ? (
                   <EntityImage
-                    src={data.dataSource.logoUrl}
-                    alt={data.dataSource.name}
-                    fallbackText={data.dataSource.name}
+                    src={view.dataSource.logoUrl}
+                    alt={view.dataSource.name}
+                    fallbackText={view.dataSource.name}
                     sizeClassName="size-4"
                   />
                 ) : undefined
               }
-              source={data.dataSource.name}
-              lastUpdated={data.syncedAt}
+              source={view.dataSource.name}
+              lastUpdated={view.syncedAt}
               action={download}
             />
           ) : attribution ? (
@@ -285,10 +347,10 @@ export function TrustCenterPage({
         <div className={TRUST_BODY_GRID_CLASS}>
           <div className={TRUST_SECTIONS_COLUMN_CLASS}>
             {columnSections.map(section => {
-              const view = views[section.id];
+              const sectionView = views[section.id];
               return (
-                <TrustSection key={section.id} id={section.id} title={section.label} lead={view.lead}>
-                  {view.render(data)}
+                <TrustSection key={section.id} id={section.id} title={section.label} lead={sectionView.lead}>
+                  {sectionView.render(view)}
                 </TrustSection>
               );
             })}
@@ -305,13 +367,16 @@ export function TrustCenterPage({
           </aside>
         </div>
 
-        <DocumentRequestModal
-          open={request.open}
-          documentTitle={request.documentTitle}
-          category={data.documentRequestCategory}
-          onClose={closeRequest}
-        />
-      </>
+        {loading ? null : (
+          <DocumentRequestModal
+            open={request.open}
+            documentTitle={request.documentTitle}
+            category={view.documentRequestCategory}
+            onClose={closeRequest}
+          />
+        )}
+      </>,
+      'Loading the trust center',
     );
   }
 
@@ -321,21 +386,44 @@ export function TrustCenterPage({
         {body}
       </TrustCenterChrome>
       {beforeFaq}
-      {faqLast && faqSection && data ? (
-        // The page's own content box at its FULL width (no section-rail column): a closing FAQ takes the
-        // same space the FAQ block takes at the foot of every other page.
-        <div className={shell ? 'bg-ods-bg' : undefined}>
-          <div className={shell ? 'page-shell-content mx-auto max-w-[1920px]' : 'page-shell-content'}>
-            <TrustSection id={faqSection.id} title={faqSection.label} lead={views.faq.lead}>
-              {views.faq.render(data)}
-            </TrustSection>
-          </div>
-        </div>
-      ) : null}
+      {faqLast && faqSection && view
+        ? // The page's own content box at its FULL width (no section-rail column): a closing FAQ takes the
+          // same space the FAQ block takes at the foot of every other page.
+          inLoadingScope(
+            <div className={shell ? 'bg-ods-bg' : undefined}>
+              <div className={shell ? 'page-shell-content mx-auto max-w-[1920px]' : 'page-shell-content'}>
+                <TrustSection id={faqSection.id} title={faqSection.label} lead={views.faq.lead}>
+                  {views.faq.render(view)}
+                </TrustSection>
+              </div>
+            </div>,
+            'Loading the FAQ',
+          )
+        : null}
     </>
   );
 }
 
+/**
+ * @deprecated Render `<TrustCenterPage>` inside a `LoadingScope`: the page draws its own loading state (this is what
+ * it does). Kept so hosts on an older release keep compiling; nothing in the lib uses it. `region` is ignored: the
+ * page announces its own loading state.
+ */
+// loading-standard-ok: deprecated re-export kept for external consumers
+export function TrustCenterPageSkeleton({
+  region: _region,
+  ...chrome
+}: Pick<TrustCenterPageProps, 'shell' | 'backButton' | 'title' | 'subtitle'> & {
+  /** Ignored: the page announces its own loading state. */
+  region?: boolean;
+}) {
+  return (
+    <LoadingScope>
+      <TrustCenterPage {...chrome} />
+    </LoadingScope>
+  );
+}
+
 /**
  * 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`
@@ -372,25 +460,3 @@ function TrustCenterChrome({
   );
   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,
-  region = true,
-}: Pick<TrustCenterPageProps, 'shell' | 'backButton' | 'title' | 'subtitle'> & {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-}) {
-  return (
-    <TrustCenterChrome shell={shell} title={title} subtitle={subtitle} backButton={backButton}>
-      <TrustCenterSkeleton region={region} />
-    </TrustCenterChrome>
-  );
-}