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

package/src/components/shared/product-release/release-detail-page.tsx

@@ -14,7 +14,7 @@ import type { ChangelogEntry } from '../../../types/product-release';
 import type { VideoTeaser } from '../../../types/video-processing';
 import { formatReleaseDate } from '../../../utils/date-formatters';
 import { contentFetch } from '../../../utils/embed-content-fetch';
-import { EntityMetadataAuthorCell } from '../../chat/entity-cards/entity-author-card';
+import { EntityMetadataAuthorCell, EntityMetadataValueCell } from '../../chat/entity-cards/entity-author-card';
 import type { CaptionSrtFields } from '../../features/captions-url';
 import { EntityTagBadges } from '../../features/entity-tag-badges';
 import { useCaptions } from '../../features/use-captions';
@@ -27,11 +27,13 @@ import {
 import { GithubClassicIcon } from '../../icons-v2-generated/brand-logos/github-classic-icon';
 import { PageShell } from '../../layout/article-detail-layout';
 import { PageLayout } from '../../layout/page-layout';
+import { LoadingRegion } from '../../loading/loading-region';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Card, CardContent } from '../../ui/card';
 import { FadePreview } from '../../ui/fade-preview';
+import { LoadingScope, useLoadingScope } from '../../ui/loading-scope';
 import { RichMarkdownRenderer } from '../../ui/markdown';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
-import { DetailPageSkeleton } from '../detail-page-skeleton';
 import { MediaGalleryStrip } from '../media-gallery-strip';
 
 // Types for injectable components
@@ -48,13 +50,6 @@ import type { DeliveryResponse } from '../../../types/delivery';
 // type fixes the collision while keeping the same import path for
 // downstream consumers of `./release-detail-page`.
 import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
-// Re-export both types for source-compat with consumers importing
-// through this module. Canonical sources:
-//   - RoadmapItem  → `../../chat/types/entities/roadmap-item`
-//   - DeliveryResponse → `../../../types/delivery` (single source of
-//     truth, shared with the lib `<DeliveryLists>` / `<DeliveryTable>`
-//     components and the new types barrel).
-export type { RoadmapItem, DeliveryResponse };
 
 /** Wire shape of `${roadmapApiEndpoint}?task_ids=…` — `{ items, count }`. */
 interface RoadmapTasksResponse {
@@ -147,6 +142,78 @@ export interface ReleaseDetailPageProps {
 // override via the `MarkdownRenderer` prop.
 const DefaultMarkdownRenderer = RichMarkdownRenderer;
 
+/** The page's layout, read by the page and by its parts' skeletons, so the loading state is the page's size. */
+const CONTENT_STACK_CLASS = 'space-y-6 content-md:space-y-8';
+/**
+ * A release title's typical lines at the page's `text-h1` (a name, a version and a headline): the median of sampled
+ * releases is seven on a phone's 342px, four from `content-md` (820px), two from `content-lg`.
+ */
+const RELEASE_TITLE_SKELETON_LINES = { phone: 7, md: 4, lg: 2 } as const;
+const METADATA_GRID_CLASS =
+  'grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border content-md:grid-cols-4';
+/** A metadata cell's edge (divider + card fill); the cell's own frame is the shared value cell's. */
+const METADATA_CELL_EDGE_CLASS = 'border-b border-ods-border bg-ods-card content-md:border-b-0 content-md:border-r';
+const SUMMARY_CLASS = 'text-ods-text-primary text-h4';
+/**
+ * The tags the tag row shows before its "+N" badge, on every width (the case study's and the blog's capped row): a
+ * release carries more tags than a phone's line holds (three badges), so the row is capped to that line and drawn the
+ * same while it is read: the badges and the "+N" never move the page under them.
+ */
+const RELEASE_TAG_ROW_FOLD = 3;
+/**
+ * A release tag's typical label width while it is read: a release is tagged with product areas, longer than most tags
+ * (sampled badges measure 64 to 155px, typically about 105px: ten characters of the badge's type), so its row wraps
+ * where a typical release's row wraps (on a phone, the tag row's phone cap and the "+N" on one line).
+ */
+const RELEASE_TAG_SKELETON_WIDTH_CLASS = 'w-[10ch]';
+/** The metadata grid's value labels (static copy). */
+const RELEASE_TYPE_LABEL = 'Release Type';
+const RELEASE_STATUS_LABEL = 'Release Status';
+const RELEASE_DATE_LABEL = 'Release Date';
+/**
+ * The release the page renders while it is read: every field empty, so each part draws its own skeleton (a host's
+ * empty placeholder, in its loading scope, takes its place).
+ */
+const EMPTY_RELEASE: Record<string, unknown> = {
+  title: '',
+  version: '',
+  summary: null,
+  content: null,
+  release_date: '',
+  release_type: '',
+  release_status: '',
+};
+
+/**
+ * The release's summary: its own skeleton while the release is read (`useLoadingScope()`), a typical summary of about
+ * 350 characters (seven lines on a phone, three on a wide screen); nothing when the release has none.
+ */
+function ReleaseSummary({ summary }: { summary: string | null }) {
+  if (useLoadingScope()) {
+    return (
+      <div className={SUMMARY_CLASS}>
+        <p>
+          <TextLineSkeleton type="inherit" as="span" lines={7} className="w-full content-md:hidden" />
+          <TextLineSkeleton type="inherit" as="span" lines={3} className="hidden w-full content-md:block" />
+        </p>
+      </div>
+    );
+  }
+  if (!summary) return null;
+  return (
+    <div className={SUMMARY_CLASS}>
+      <p>{summary}</p>
+    </div>
+  );
+}
+/**
+ * The delivery tables' collapsed preview (px): about the first rows of a table and the start of the next. The loaded
+ * tables and their loading state both sit in a `FadePreview` this high, so the section is one height in both.
+ */
+const DELIVERY_PREVIEW_HEIGHT = 300;
+/** The completed / in-progress table gap inside the preview (the section's own `space-y` stops at the wrapper). */
+const DELIVERY_TABLES_STACK_CLASS = 'space-y-4';
+
 /** Single-release route — the hub's public API shape, mirroring `<ProductReleasesView>`. */
 const DEFAULT_ENDPOINT = '/api/releases';
 
@@ -200,6 +267,8 @@ export function ReleaseDetailPage({
   const [deliveryData, setDeliveryData] = useState<DeliveryResponse | null>(null);
   const [roadmapLoading, setRoadmapLoading] = useState(false);
   const [deliveryLoading, setDeliveryLoading] = useState(false);
+  // In a loading scope the page is its skeleton and the linked tasks are not fetched.
+  const scoped = useLoadingScope();
 
   useEffect(() => {
     // `release` is a fresh object identity whenever the release read resolves
@@ -209,7 +278,7 @@ export function ReleaseDetailPage({
     let cancelled = false;
 
     async function fetchLinkedTasks() {
-      if (!release) return;
+      if (!release || scoped) return;
 
       try {
         // Fetch roadmap tasks if linked
@@ -261,23 +330,14 @@ export function ReleaseDetailPage({
     return () => {
       cancelled = true;
     };
-  }, [release, RoadmapSection, DeliverySection, roadmapApiEndpoint, deliveryApiEndpoint]);
+  }, [release, scoped, RoadmapSection, DeliverySection, roadmapApiEndpoint, deliveryApiEndpoint]);
 
   // `isLoading` is false whenever `initialData` seeded the read, so a
-  // pre-fetched (SSR / admin-preview) release never flashes the skeleton.
-  if (isLoading && !release) {
-    // `bare` + `PageShell` so the loading state matches the loaded page's full
-    // width / padding / min-height (the wrapper supplies the page chrome).
-    return renderShell(
-      // Match the loaded page's top offset (TitleBlock's
-      // `pt-[var(--spacing-system-l)]`) so content doesn't jump on load.
-      <div className="pt-[var(--spacing-system-l)]">
-        <DetailPageSkeleton bare metadataColumns={4} showImageGallery={true} />
-      </div>,
-    );
-  }
+  // pre-fetched (SSR / admin-preview) release never flashes the loading state.
+  // In a loading scope the host's record is empty: the scope alone decides.
+  const loading = scoped || (isLoading && !release);
 
-  if (error || !release) {
+  if (!loading && (error || !release)) {
     return renderShell(
       <div className="py-16 text-center">
         <h1 className="mb-4 text-ods-text-primary text-h1">Release Not Found</h1>
@@ -285,82 +345,84 @@ export function ReleaseDetailPage({
       </div>,
     );
   }
+  // While loading: the host's empty placeholder (in its scope) or the page's own empty release.
+  const view = release ?? EMPTY_RELEASE;
 
-  const hasBreakingChanges = Array.isArray(release.breaking_changes) && release.breaking_changes.length > 0;
+  const hasBreakingChanges = Array.isArray(view.breaking_changes) && view.breaking_changes.length > 0;
 
   // Type assertions for release data
-  const releaseTitle = release.title as string;
-  const releaseVersion = release.version as string;
-  const releaseSummary = release.summary as string | null;
-  const releaseContent = release.content as string | null;
-  const releaseDate = release.release_date as string;
-  const releaseType = release.release_type as string;
-  const releaseStatus = release.release_status as string;
-  const releaseMedia = release.release_media as
+  const releaseTitle = view.title as string;
+  const releaseVersion = view.version as string;
+  const releaseSummary = view.summary as string | null;
+  const releaseContent = view.content as string | null;
+  const releaseDate = view.release_date as string;
+  const releaseType = view.release_type as string;
+  const releaseStatus = view.release_status as string;
+  const releaseMedia = view.release_media as
     Array<{ id?: string; media_type: string; media_url: string; title?: string }> | undefined;
   // Field-cast per this file's loose-release idiom (release_type etc. above)
   // — but to the SHARED EntityAuthor, never an inline shadow author shape.
-  const author = release.author as EntityAuthor | undefined;
-  const githubReleases = release.github_releases as Array<{ id: string; github_release_url: string }> | undefined;
-  const knowledgeBaseLinks = release.knowledge_base_links as
+  const author = view.author as EntityAuthor | undefined;
+  const githubReleases = view.github_releases as Array<{ id: string; github_release_url: string }> | undefined;
+  const knowledgeBaseLinks = view.knowledge_base_links as
     Array<{ id?: string; kb_article_path: string }> | string[] | undefined;
-  const migrationGuideUrl = release.migration_guide_url as string | undefined;
-  const documentationUrl = release.documentation_url as string | undefined;
-  const youtubeUrl = release.youtube_url as string | undefined;
-  const mainVideoUrl = release.main_video_url as string | undefined;
-  const videoBites = release.video_bites as VideoTeaser[] | undefined;
-  const highlightVideoUrl = release.highlight_video_url as string | undefined;
-  const highlightVideoThumbnail = release.highlight_video_thumbnail as string | undefined;
+  const migrationGuideUrl = view.migration_guide_url as string | undefined;
+  const documentationUrl = view.documentation_url as string | undefined;
+  const youtubeUrl = view.youtube_url as string | undefined;
+  const mainVideoUrl = view.main_video_url as string | undefined;
+  const videoBites = view.video_bites as VideoTeaser[] | undefined;
+  const highlightVideoUrl = view.highlight_video_url as string | undefined;
+  const highlightVideoThumbnail = view.highlight_video_thumbnail as string | undefined;
   // Caption tracks — host-provided values win (the hub's wrapper enriches
   // them); otherwise built HERE from the release's SRT columns, based on
   // `runtime.endpoints.captionsUrlPrefix` (standard runtime-endpoint wiring),
   // so embedders get correctly proxied `<track>` URLs with zero per-host code.
-  const entityCaptions = captions.forEntity('product_release', release as unknown as CaptionSrtFields);
-  const captionsUrl = (release.captionsUrl as string | undefined) ?? entityCaptions.captionsUrl;
-  const highlightCaptionsUrl =
-    (release.highlightCaptionsUrl as string | undefined) ?? entityCaptions.highlightCaptionsUrl;
-  const breakingChanges = release.breaking_changes as ChangelogEntry[] | undefined;
-  const featuresAdded = release.features_added as ChangelogEntry[] | undefined;
-  const bugFixed = release.bugs_fixed as ChangelogEntry[] | undefined;
-  const improvements = release.improvements as ChangelogEntry[] | undefined;
-
-  return renderShell(
+  const entityCaptions = captions.forEntity('product_release', view as unknown as CaptionSrtFields);
+  const captionsUrl = (view.captionsUrl as string | undefined) ?? entityCaptions.captionsUrl;
+  const highlightCaptionsUrl = (view.highlightCaptionsUrl as string | undefined) ?? entityCaptions.highlightCaptionsUrl;
+  const breakingChanges = view.breaking_changes as ChangelogEntry[] | undefined;
+  const featuresAdded = view.features_added as ChangelogEntry[] | undefined;
+  const bugFixed = view.bugs_fixed as ChangelogEntry[] | undefined;
+  const improvements = view.improvements as ChangelogEntry[] | undefined;
+
+  const page = (
     <PageLayout
       title={releaseTitle}
-      subtitle={`Version: ${releaseVersion}`}
+      subtitle={loading ? undefined : `Version: ${releaseVersion}`}
+      loading={loading}
+      subtitleRow="always"
       titleSize="h1"
       titleWrap
+      titleSkeletonLines={RELEASE_TITLE_SKELETON_LINES}
       backButton={showBackButton ? { label: backLabel, onClick: () => router.push(backHref) } : undefined}
     >
-      <div className="space-y-6 content-md:space-y-8">
+      <div className={CONTENT_STACK_CLASS}>
         {/* Tags — flat product_release_tags[] from entity_tags */}
-        <EntityTagBadges tags={release.product_release_tags as TagAssoc[] | undefined} />
+        <EntityTagBadges
+          tags={view.product_release_tags as TagAssoc[] | undefined}
+          max={RELEASE_TAG_ROW_FOLD}
+          skeletonItemClassName={RELEASE_TAG_SKELETON_WIDTH_CLASS}
+        />
 
         {/* Metadata Grid */}
-        <div className="grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border content-md:grid-cols-4">
-          {/* Release Type */}
-          <div className="flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 content-md:border-b-0 content-md:border-r">
-            <div className="flex flex-col gap-0">
-              <p className="text-ods-text-primary text-h4">{releaseType.toLocaleUpperCase()}</p>
-              <p className="text-ods-text-secondary text-h6">Release Type</p>
-            </div>
-          </div>
-
-          {/* Release Status */}
-          <div className="flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 content-md:border-b-0 content-md:border-r">
-            <div className="flex flex-col gap-0">
-              <p className="text-ods-text-primary text-h4">{releaseStatus.toLocaleUpperCase()}</p>
-              <p className="text-ods-text-secondary text-h6">Release Status</p>
-            </div>
-          </div>
-
-          {/* Release Date */}
-          <div className="flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 content-md:border-b-0 content-md:border-r">
-            <div className="flex flex-col gap-0">
-              <p className="text-ods-text-primary text-h4">{formatReleaseDate(releaseDate)}</p>
-              <p className="text-ods-text-secondary text-h6">Release Date</p>
-            </div>
-          </div>
+        <div className={METADATA_GRID_CLASS}>
+          {/* Release Type, Status and Date: the shared value cell (its own skeleton in a loading scope). */}
+          <EntityMetadataValueCell
+            value={releaseType}
+            label={RELEASE_TYPE_LABEL}
+            className={METADATA_CELL_EDGE_CLASS}
+          />
+          <EntityMetadataValueCell
+            value={releaseStatus}
+            label={RELEASE_STATUS_LABEL}
+            className={METADATA_CELL_EDGE_CLASS}
+          />
+          <EntityMetadataValueCell
+            value={releaseDate ? formatReleaseDate(releaseDate) : ''}
+            label={RELEASE_DATE_LABEL}
+            className={METADATA_CELL_EDGE_CLASS}
+            uppercase={false}
+          />
 
           {/* Author — the shared metadata-grid author cell (it was extracted
               FROM this page; rendering the export instead of an inline copy
@@ -373,62 +435,71 @@ export function ReleaseDetailPage({
           />
         </div>
 
-        {/* Image gallery — shared strip + lightbox (images) / inline clips. */}
-        <MediaGalleryStrip items={releaseMedia ?? []} />
+        {/* Image gallery — shared strip + lightbox (images) / inline clips. Every release carries media (22 of 22
+            published on 2026-10-19), so the strip is drawn while the release is read: in the loading scope it is its
+            own skeleton. */}
+        {(loading || (releaseMedia && releaseMedia.length > 0)) && <MediaGalleryStrip items={releaseMedia ?? []} />}
 
         {/* Summary */}
-        {releaseSummary && (
-          <div className="text-ods-text-primary text-h4">
-            <p>{releaseSummary}</p>
-          </div>
-        )}
+        <ReleaseSummary summary={releaseSummary} />
 
         {/* Video Display Section - Injectable or fallback */}
-        {VideoDisplaySection ? (
-          <VideoDisplaySection
-            mainVideoUrl={mainVideoUrl}
-            youtubeUrl={youtubeUrl}
-            highlightVideoUrl={highlightVideoUrl}
-            highlightVideoThumbnail={highlightVideoThumbnail}
-            title={releaseTitle}
-            videoBites={videoBites}
-            bitesTitle={DEFAULT_VIDEO_BITES_TITLE}
-            filterPublishedBites={true}
-            bitesProfile={toStripProfile(author)}
-            bitesHref={typeof release.slug === 'string' ? `/releases/${release.slug}` : undefined}
-            captionsUrl={captionsUrl}
-            highlightCaptionsUrl={highlightCaptionsUrl}
-          />
-        ) : (
-          <>
-            {/*
+        {/* A release's video is optional: the loading state leaves it out, so the gate leaves it out too. */}
+        {/* A block of the page's own stack spacing (its videos keep their gaps), hidden when the slot draws nothing. */}
+        {loading ? null : (
+          <div data-loading-optional className={`${CONTENT_STACK_CLASS} empty:hidden`}>
+            {VideoDisplaySection ? (
+              <VideoDisplaySection
+                mainVideoUrl={mainVideoUrl}
+                youtubeUrl={youtubeUrl}
+                highlightVideoUrl={highlightVideoUrl}
+                highlightVideoThumbnail={highlightVideoThumbnail}
+                title={releaseTitle}
+                videoBites={videoBites}
+                bitesTitle={DEFAULT_VIDEO_BITES_TITLE}
+                filterPublishedBites={true}
+                bitesProfile={toStripProfile(author)}
+                bitesHref={typeof view.slug === 'string' ? `/releases/${view.slug}` : undefined}
+                captionsUrl={captionsUrl}
+                highlightCaptionsUrl={highlightCaptionsUrl}
+              />
+            ) : (
+              <>
+                {/*
               Fallback when no `VideoDisplaySection` is injected. `<Video>` is the
               SSoT for every video surface — single source of truth across YouTube,
               HLS, and MP4 paths.
             */}
-            {youtubeUrl && <Video kind="youtube" url={youtubeUrl} title={`${releaseTitle} - Video`} layout="native" />}
-            {!youtubeUrl && mainVideoUrl && <Video url={mainVideoUrl} captionsUrl={captionsUrl} layout="centered" />}
-            {highlightVideoUrl && (
-              <Video
-                url={highlightVideoUrl}
-                poster={highlightVideoThumbnail}
-                captionsUrl={highlightCaptionsUrl}
-                layout="centered"
-              />
+                {youtubeUrl && (
+                  <Video kind="youtube" url={youtubeUrl} title={`${releaseTitle} - Video`} layout="native" />
+                )}
+                {!youtubeUrl && mainVideoUrl && (
+                  <Video url={mainVideoUrl} captionsUrl={captionsUrl} layout="centered" />
+                )}
+                {highlightVideoUrl && (
+                  <Video
+                    url={highlightVideoUrl}
+                    poster={highlightVideoThumbnail}
+                    captionsUrl={highlightCaptionsUrl}
+                    layout="centered"
+                  />
+                )}
+              </>
             )}
-          </>
+          </div>
         )}
 
         {/* Content */}
+        {/* Record-dependent blocks the loading state does not draw carry `data-loading-optional`. */}
         {releaseContent && (
-          <div className="text-ods-text-primary text-h4">
+          <div className="text-ods-text-primary text-h4" data-loading-optional>
             <MarkdownRenderer content={releaseContent} />
           </div>
         )}
 
         {/* Breaking Changes Warning */}
         {hasBreakingChanges && (
-          <Card className="border-ods-error bg-ods-error/10">
+          <Card className="border-ods-error bg-ods-error/10" data-loading-optional>
             <CardContent className="p-6">
               <div className="flex items-center gap-3">
                 <AlertTriangle className="h-6 w-6 text-ods-error" />
@@ -446,14 +517,18 @@ export function ReleaseDetailPage({
         {/* Changelog Sections — icons match the catalog card's changelog
             strip taxonomy (Sparkles/Wrench/TrendingUp/AlertTriangle) so the
             user sees a consistent visual signature across catalog → detail. */}
-        <ReleaseChangelogSection
-          title="Breaking Changes"
-          entries={breakingChanges || []}
-          isBreaking
-          hideTitle
-          icon={<AlertTriangle className="h-6 w-6" />}
-          MarkdownRenderer={MarkdownRenderer}
-        />
+        {/* Breaking changes are optional per release: the loading state leaves them out (`loadingOptional`). */}
+        {loading ? null : (
+          <ReleaseChangelogSection
+            title="Breaking Changes"
+            entries={breakingChanges || []}
+            isBreaking
+            hideTitle
+            loadingOptional
+            icon={<AlertTriangle className="h-6 w-6" />}
+            MarkdownRenderer={MarkdownRenderer}
+          />
+        )}
         {/* Features / Bugs / Improvements use `previewFirst` — same
             progressive-disclosure pattern as the investor-update detail
             page's Key Highlights / Financial Notes sections. Shows the
@@ -484,7 +559,7 @@ export function ReleaseDetailPage({
 
         {/* Related Roadmap Items */}
         {RoadmapSection && (roadmapLoading || roadmapTasks.length > 0) && (
-          <div className="w-full space-y-4">
+          <div className="w-full space-y-4" data-loading-optional>
             <p className="tracking-[-0.28px] text-ods-text-secondary text-h5">Related Roadmap Items</p>
             <RoadmapSection
               items={roadmapTasks}
@@ -503,17 +578,27 @@ export function ReleaseDetailPage({
         {DeliverySection &&
           (deliveryLoading ||
             (deliveryData && (deliveryData.completed.length > 0 || deliveryData.inProgress.length > 0))) && (
-            <div className="w-full space-y-4">
+            <div className="w-full space-y-4" data-loading-optional>
               <p className="tracking-[-0.28px] text-ods-text-secondary text-h5">Related Enhancements and Bug-fixes</p>
               {(() => {
                 const deliveryCount = deliveryData ? deliveryData.completed.length + deliveryData.inProgress.length : 0;
                 return deliveryLoading ? (
-                  <DeliverySection data={deliveryData} isLoading={deliveryLoading} />
+                  // The loaded preview's frame, its height written into the markup (`fixedHeight`), so the tables'
+                  // loading state takes the collapsed preview's place, toggle row included. Inert: nothing to open yet.
+                  <div inert>
+                    <FadePreview fixedHeight collapsedHeight={DELIVERY_PREVIEW_HEIGHT}>
+                      <div className={DELIVERY_TABLES_STACK_CLASS}>
+                        <DeliverySection data={deliveryData} isLoading={deliveryLoading} />
+                      </div>
+                    </FadePreview>
+                  </div>
                 ) : (
-                  <FadePreview hiddenCount={deliveryCount - 1} collapsedHeight={300} resetKey={deliveryCount}>
-                    {/* space-y-4 restores the completed/in-progress table gap the
-                      parent's space-y used to provide before the fade wrapper. */}
-                    <div className="space-y-4">
+                  <FadePreview
+                    hiddenCount={deliveryCount - 1}
+                    collapsedHeight={DELIVERY_PREVIEW_HEIGHT}
+                    resetKey={deliveryCount}
+                  >
+                    <div className={DELIVERY_TABLES_STACK_CLASS}>
                       <DeliverySection data={deliveryData} isLoading={false} />
                     </div>
                   </FadePreview>
@@ -524,7 +609,7 @@ export function ReleaseDetailPage({
 
         {/* Related Links */}
         {(githubReleases?.length || knowledgeBaseLinks?.length || migrationGuideUrl || documentationUrl) && (
-          <div className="w-full space-y-1">
+          <div className="w-full space-y-1" data-loading-optional>
             <p className="tracking-[-0.28px] text-ods-text-secondary text-h5">Related Links</p>
             <Card className="border-ods-border bg-ods-card p-6">
               <div className="space-y-4">
@@ -630,6 +715,16 @@ export function ReleaseDetailPage({
        * A keyed Fragment emits no DOM, so output is byte-identical either way.
        */}
       <Fragment key="related-content">{relatedContent}</Fragment>
-    </PageLayout>,
+    </PageLayout>
+  );
+  // The loading state is the page itself in a scope, announced once unless a host's scope already did.
+  return renderShell(
+    loading ? (
+      <LoadingRegion label="Loading the release" announce={!scoped}>
+        <LoadingScope>{page}</LoadingScope>
+      </LoadingRegion>
+    ) : (
+      page
+    ),
   );
 }

package/src/components/shared/roadmap/roadmap-grid-skeleton.tsx

@@ -6,6 +6,17 @@ import { LoadingRegion } from '../../loading/loading-region';
  * `RoadmapCardSkeleton`.
  */
 
+/**
+ * The grid's box, read by `RoadmapGrid` and by its skeleton: one column, two from `content-md` when `columns` is 2,
+ * and the desktop left margin that aligns it with the page hero's title. LITERAL class strings: an interpolated
+ * `content-md:grid-cols-${n}` is invisible to Tailwind's scanner and is never generated.
+ */
+export function roadmapGridClass(columns: 1 | 2, showLeftMargin: boolean): string {
+  return `grid grid-cols-1 gap-6 ${columns === 2 ? 'content-md:grid-cols-2' : ''} ${
+    showLeftMargin ? 'content-md:ml-[120px]' : ''
+  }`;
+}
+
 export interface RoadmapGridSkeletonProps {
   /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
   region?: boolean;
@@ -15,15 +26,18 @@ export interface RoadmapGridSkeletonProps {
    *  the page hero's title block. Default `true`. Related-content rails
    *  inside narrower surfaces (e.g. the release detail page) pass `false`. */
   showLeftMargin?: boolean;
+  /** The grid's columns from `content-md` (`RoadmapGrid`'s `columns`). Default `2`. */
+  columns?: 1 | 2;
 }
 
-export function RoadmapGridSkeleton({ region = true, count = 4, showLeftMargin = true }: RoadmapGridSkeletonProps) {
+export function RoadmapGridSkeleton({
+  region = true,
+  count = 4,
+  showLeftMargin = true,
+  columns = 2,
+}: RoadmapGridSkeletonProps) {
   return (
-    <LoadingRegion
-      label="Loading the roadmap"
-      announce={region}
-      className={`grid grid-cols-1 gap-6 content-md:grid-cols-2 ${showLeftMargin ? 'content-md:ml-[120px]' : ''}`}
-    >
+    <LoadingRegion label="Loading the roadmap" announce={region} className={roadmapGridClass(columns, showLeftMargin)}>
       {Array.from({ length: count }).map((_, i) => (
         <RoadmapCardSkeleton key={i} />
       ))}