@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.767

package/dist/components/features/video.d.ts

@@ -28,8 +28,7 @@
  *   layout="native"   → intrinsic aspect ratio. Bites grid, blog cards.
  */
 import type React from 'react';
-import { type VideoProps } from './video-shared';
-export { VIDEO_PLAYBACK_FAILED_EVENT, type VideoFailureKind, type VideoFailureReason, type VideoLayout, type VideoMutedFallbackState, type VideoPlaybackFailureDetail, type VideoPlayerHandle, type VideoProps, } from './video-shared';
+import { type VideoLayout, type VideoProps } from './video-shared';
 /**
  * Extract the YouTube video id from any common URL shape OR from a
  * bare 11-char id (carousels and some admin shapes pass that form
@@ -46,4 +45,12 @@ export { VIDEO_PLAYBACK_FAILED_EVENT, type VideoFailureKind, type VideoFailureRe
  */
 export declare function extractYouTubeId(url: string): string | null;
 export declare function Video(props: VideoProps): React.ReactElement | null;
+/**
+ * A video while it is read: the player's box in the player's own layout wrapper (so its size and frame are the
+ * player's), drawn as the skeleton's surface. `Video` draws it in a loading scope.
+ */
+export declare function VideoSkeleton({ layout, className }: {
+    layout?: VideoLayout;
+    className?: string;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 //# sourceMappingURL=video.d.ts.map

package/dist/components/features/video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/components/features/video.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAML,KAAK,UAAU,EAEhB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,2BAA2B,EAC3B,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,WAAW,EAChB,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,iBAAiB,EACtB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAC;AA6FxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CA0B3D;AAMD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAuDlE"}
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/components/features/video.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,UAAU,EAEhB,MAAM,gBAAgB,CAAC;AA6FxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CA0B3D;AAMD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA2DlE;AAyBD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAiB,EAAE,SAAS,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,WAAW,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,0EAE3G"}

package/dist/components/features/video.js

@@ -10,7 +10,10 @@ import {
   useSyncExternalStore
 } from "react";
 import { useNearViewport } from "../../hooks/use-near-viewport.js";
+import { cn } from "../../utils/cn.js";
 import { fetchPriorityProp } from "../../utils/fetch-priority.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { VideoPlayBadge } from "./video-center-badge.js";
 import {
   pickFilePlayback,
@@ -18,9 +21,6 @@ import {
   reportPlaybackFailure,
   VideoErrorOverlay
 } from "./video-shared.js";
-import {
-  VIDEO_PLAYBACK_FAILED_EVENT
-} from "./video-shared.js";
 let filePlayer = null;
 let filePlayerLoad = null;
 const filePlayerListeners = /* @__PURE__ */ new Set();
@@ -98,10 +98,12 @@ function extractYouTubeId(url) {
 }
 function Video(props) {
   const { ref: nearRef, isNear } = useNearViewport();
+  const loading = useLoadingScope();
   const url = props.url;
+  const layout = props.layout ?? "native";
+  if (loading && !url) return /* @__PURE__ */ jsx(VideoSkeleton, { layout, className: props.className });
   if (!url) return null;
   const effectiveKind = resolveKind(props, url);
-  const layout = props.layout ?? "native";
   if (props.lazy && !isNear) {
     return wrapWithLayout(
       /* @__PURE__ */ jsx(
@@ -155,6 +157,9 @@ function resolveKind(props, url) {
   if (BARE_YT_ID_RE.test(url)) return "youtube";
   return isYouTubeUrl(url) ? "youtube" : "file";
 }
+function VideoSkeleton({ layout = "native", className }) {
+  return wrapWithLayout(/* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "rectangular", className: cn("h-full w-full", className) }), layout);
+}
 function wrapWithLayout(inner, layout) {
   switch (layout) {
     case "centered":
@@ -395,7 +400,7 @@ function YouTubeFacadeInner({
   ) });
 }
 export {
-  VIDEO_PLAYBACK_FAILED_EVENT,
   Video,
+  VideoSkeleton,
   extractYouTubeId
 };

package/dist/components/features/walkthrough-video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"walkthrough-video.d.ts","sourceRoot":"","sources":["../../../src/components/features/walkthrough-video.tsx"],"names":[],"mappings":"AAkEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B;;6EAE6E;AAC7E,MAAM,WAAW,oBAAoB;IACnC;qDACiD;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC;4EACwE;IACxE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;CACpC;AASD,0EAA0E;AAC1E,UAAU,yBAAyB;IACjC,KAAK,EAAE,oBAAoB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;4DAKwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;;;;uEAQmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;mDAI+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,6BAA8B,SAAQ,yBAAyB;IAC9E;;mDAE+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;iFAC6E;IAC7E,SAAS,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IAC5C,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;8CAC0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,kFAAkF;AAClF,MAAM,MAAM,2BAA2B,GAAG,yBAAyB,CAAC;AAsmCpE;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,GAAG,KAAK,CAAC,YAAY,CAEjG;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,KAAK,CAAC,YAAY,CAE7F;AAED;;;GAGG;AACH,wBAAgB,8BAA8B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAExG"}
+{"version":3,"file":"walkthrough-video.d.ts","sourceRoot":"","sources":["../../../src/components/features/walkthrough-video.tsx"],"names":[],"mappings":"AAkEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmC/B;;6EAE6E;AAC7E,MAAM,WAAW,oBAAoB;IACnC;qDACiD;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC;4EACwE;IACxE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;CACpC;AASD,0EAA0E;AAC1E,UAAU,yBAAyB;IACjC,KAAK,EAAE,oBAAoB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;4DAKwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;;;;uEAQmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;mDAI+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,6BAA8B,SAAQ,yBAAyB;IAC9E;;mDAE+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;iFAC6E;IAC7E,SAAS,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IAC5C,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;8CAC0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,kFAAkF;AAClF,MAAM,MAAM,2BAA2B,GAAG,yBAAyB,CAAC;AA6mCpE;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,GAAG,KAAK,CAAC,YAAY,CAEjG;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,KAAK,CAAC,YAAY,CAE7F;AAED;;;GAGG;AACH,wBAAgB,8BAA8B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAExG"}

package/dist/components/features/walkthrough-video.js

@@ -2,7 +2,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { resizedImageUrl } from "../../embed-shims/next-image.js";
 import { useIsHydrated } from "../../hooks/ui/use-is-hydrated.js";
+import { MEDIA_ASPECT } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
 import {
   WALKTHROUGH_VIDEO_DISMISS_KEY,
@@ -18,12 +20,14 @@ import { XmarkIcon } from "../icons-v2-generated/signs-and-symbols/xmark-icon.js
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/button/index.js";
 import { DialogPortal, DialogOverlay } from "../ui/dialog.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { SquareAvatar } from "../ui/square-avatar.js";
 import { CardHitLayer } from "./card-hit-layer.js";
 import { Video } from "./video.js";
 import { VideoPlayBadge, VideoUnmuteGlyph } from "./video-center-badge.js";
 import { VideoHoverPreviewSurface } from "./video-hover-preview.js";
-const INLINE_CARD_BOX_CLASS = "aspect-video w-full rounded-md border border-ods-border";
+const CARD_POSTER_WIDTH_PX = 640;
+const INLINE_CARD_BOX_CLASS = `${MEDIA_ASPECT.video} w-full rounded-md border border-ods-border`;
 const FIRST_INTERACTION_EVENTS = ["scroll", "pointerdown", "keydown"];
 const isAtEnd = (duration, time) => duration > 0 && duration - time < 1;
 function theaterSeedFromLive(live, fallbackTime, fallbackMuted) {
@@ -60,6 +64,7 @@ function WalkthroughVideo({
   className
 }) {
   const inline = placement === "inline";
+  const inScope = useLoadingScope();
   const dismissEnabled = dismissal !== false;
   const storageKey = dismissEnabled && dismissal.storageKey || WALKTHROUGH_VIDEO_DISMISS_KEY;
   const dismissalId = video?.id != null ? String(video.id) : "dismissed";
@@ -438,6 +443,7 @@ function WalkthroughVideo({
   useEffect(() => {
     cardModeRef.current = cardMode;
   });
+  if (inScope) return inline ? /* @__PURE__ */ jsx(InlineWalkthroughVideoSkeleton, { className }) : null;
   if (!video || !video.mainVideoUrl && !video.youtubeUrl) return null;
   const showCard = mounted && !dismissed;
   const resumeHandoff = resumeMode ? handoff : null;
@@ -513,7 +519,7 @@ function WalkthroughVideo({
           VideoHoverPreviewSurface,
           {
             url: video.mainVideoUrl || "",
-            posterUrl: video.posterUrl,
+            posterUrl: video.posterUrl ? resizedImageUrl(video.posterUrl, CARD_POSTER_WIDTH_PX) : video.posterUrl,
             active: cardActive,
             isClone: false,
             badge: "play",

package/dist/components/help-center-pages/download-apps-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"download-apps-page.d.ts","sourceRoot":"","sources":["../../../src/components/help-center-pages/download-apps-page.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,EASL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EAErB,MAAM,uBAAuB,CAAC;AAI/B,OAAO,EAA4B,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAchF,MAAM,WAAW,qBAAqB;IACpC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B;gFAC4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACvD,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wGAAwG;IACxG,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACxD,0GAA0G;IAC1G,GAAG,CAAC,EAAE,qBAAqB,CAAC;IAC5B;;;;OAIG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,kGAAkG;AAClG,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,MAAM,EAAE,SAAS,CAAC;CACnB;AAgLD,wBAAgB,gBAAgB,CAAC,EAC/B,QAA6B,EAC7B,WAAW,EACX,KAAY,EACZ,UAAkB,EAClB,KAAK,EACL,QAAQ,EACR,WAAkB,EAClB,kBAAyB,EACzB,gBAAgB,EAChB,GAAG,EACH,GAAG,GACJ,EAAE,qBAAqB,+BAoFvB"}
+{"version":3,"file":"download-apps-page.d.ts","sourceRoot":"","sources":["../../../src/components/help-center-pages/download-apps-page.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,OAAO,EASL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EAErB,MAAM,uBAAuB,CAAC;AAI/B,OAAO,EAA4B,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAehF,MAAM,WAAW,qBAAqB;IACpC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B;gFAC4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACvD,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wGAAwG;IACxG,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACxD,0GAA0G;IAC1G,GAAG,CAAC,EAAE,qBAAqB,CAAC;IAC5B;;;;OAIG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,kGAAkG;AAClG,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,MAAM,EAAE,SAAS,CAAC;CACnB;AAkOD,wBAAgB,gBAAgB,CAAC,EAC/B,QAA6B,EAC7B,WAAW,EACX,KAAY,EACZ,UAAkB,EAClB,KAAK,EACL,QAAQ,EACR,WAAkB,EAClB,kBAAyB,EACzB,gBAAgB,EAChB,GAAG,EACH,GAAG,GACJ,EAAE,qBAAqB,+BAsFvB"}

package/dist/components/help-center-pages/download-apps-page.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRouter } from "../../embed-shims/next-navigation.js";
 import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard.js";
 import { useDownloads } from "../../hooks/use-downloads.js";
+import { TILE_SIZE } from "../../styles/component-sizes.js";
 import {
   DESKTOP_OS_LABELS,
   DOWNLOAD_ARCHITECTURE_LABELS,
@@ -16,18 +17,19 @@ import { cn } from "../../utils/cn.js";
 import { formatUrlForDisplay } from "../../utils/format.js";
 import { DESKTOP_OSES } from "../../utils/visitor-os.js";
 import { FaqSection, pageFaqProps } from "../faq/faq-section.js";
-import { CommandBox } from "../features/command-box.js";
+import { CommandBox, CommandBoxSkeleton } from "../features/command-box.js";
 import { AppleLogoIcon } from "../icons-v2-generated/brand-logos/apple-logo-icon.js";
 import { WindowsLogoGreyIcon } from "../icons-v2-generated/brand-logos/windows-logo-grey-icon.js";
 import { Download01Icon } from "../icons-v2-generated/interface/download-01-icon.js";
 import { PageShell } from "../layout/article-detail-layout.js";
 import { PageLayout } from "../layout/page-layout.js";
 import { LoadingRegion } from "../loading/loading-region.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/button/button.js";
 import { LoadError } from "../ui/error-state.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { MobileAppQr } from "../ui/mobile-app-qr.js";
-import { StoreBadgeLinks } from "../ui/store-badges.js";
+import { AppStoreBadge, GooglePlayBadge, StoreBadgeLinks } from "../ui/store-badges.js";
 const SECTIONS_CLASS = "flex flex-col gap-[var(--spacing-system-xlf)]";
 const SECTION_CLASS = "flex flex-col gap-[var(--spacing-system-lf)]";
 const CARDS_GRID_CLASS = "grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:grid-cols-2";
@@ -36,6 +38,12 @@ const CARD_CLASS = "flex flex-col gap-[var(--spacing-system-lf)] rounded-md bord
 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`;
+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 = {
   mac: AppleLogoIcon,
   windows: WindowsLogoGreyIcon
@@ -130,12 +138,38 @@ function WebCard({ web }) {
     }
   );
 }
-function CardsSkeleton({ label }) {
-  return /* @__PURE__ */ jsx(LoadingRegion, { label, className: CARDS_GRID_CLASS, children: [0, 1].map((card) => /* @__PURE__ */ jsxs("div", { className: CARD_CLASS, children: [
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-32 rounded" }),
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-56 rounded-md" }),
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-14 w-full rounded-md" })
-  ] }, card)) });
+function SystemCardsSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: cardsGridClass(DESKTOP_OSES.length), children: DESKTOP_OSES.map((os) => {
+    const Icon = OS_ICONS[os];
+    return /* @__PURE__ */ jsxs("div", { className: CARD_CLASS, children: [
+      /* @__PURE__ */ jsxs("div", { className: CARD_HEADER_CLASS, children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
+        /* @__PURE__ */ jsx("h3", { className: "m-0 text-ods-text-primary text-h3", children: DESKTOP_OS_LABELS[os] }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "ml-auto w-32" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: BUTTONS_CLASS, children: /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "default", className: "w-56" }) }),
+      /* @__PURE__ */ jsx("div", { className: COMMANDS_CLASS, children: /* @__PURE__ */ jsx(CommandBoxSkeleton, { lines: 1, showCopy: true }) })
+    ] }, os);
+  }) });
+}
+function MobileCardsSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: cardsGridClass(2), children: [
+    /* @__PURE__ */ jsxs("div", { className: CARD_CLASS, children: [
+      /* @__PURE__ */ jsx("div", { className: CARD_HEADER_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-48" }) }),
+      /* @__PURE__ */ jsx("p", { className: "m-0 text-ods-text-secondary text-h4", children: MOBILE_STORE_CARD_LINE }),
+      /* @__PURE__ */ jsxs("div", { className: STORE_BADGES_CLASS, inert: true, "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx(AppStoreBadge, { className: STORE_BADGE_CLASS }),
+        /* @__PURE__ */ jsx(GooglePlayBadge, { className: STORE_BADGE_CLASS })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn(CARD_CLASS, SCAN_CARD_CLASS), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-sf)]", children: [
+        /* @__PURE__ */ jsx(CardHeader, { title: MOBILE_SCAN_TITLE }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 2, className: "w-full" })
+      ] }),
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: QR_CLASS })
+    ] })
+  ] });
 }
 function Section({ id, title, children }) {
   return /* @__PURE__ */ jsxs("section", { "aria-labelledby": id, className: SECTION_CLASS, children: [
@@ -161,25 +195,29 @@ function DownloadAppsPage({
   faq
 }) {
   const { data, isLoading, error, reload } = useDownloads({ endpoint, initialData });
+  const scoped = useLoadingScope();
   const systems = showDesktop && data ? rowsBySystem(data.desktop) : [];
   const mobile = data?.mobile ?? null;
   const hasMobile = !!mobile && (!!mobile.appStoreUrl || !!mobile.googlePlayUrl);
   const offersDesktop = showDesktop && (!data || systems.length > 0);
   let body;
-  if (error && !data) {
+  if (error && !data && !scoped) {
     body = /* @__PURE__ */ jsx(LoadError, { message: "Could not load the downloads", onRetry: reload });
-  } else if (!data) {
-    body = isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      showDesktop && /* @__PURE__ */ jsx(Section, { id: "download-desktop", title: "Desktop app", children: /* @__PURE__ */ jsx(CardsSkeleton, { label: "Loading the installers" }) }),
-      /* @__PURE__ */ jsx(Section, { id: "download-mobile", title: "Mobile app", children: /* @__PURE__ */ jsx(CardsSkeleton, { label: "Loading the mobile app" }) })
-    ] }) : null;
+  } else if (!data || scoped) {
+    body = isLoading || scoped ? (
+      // ONE region announces the page's loading; the sections inside it are silent.
+      /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading the downloads", className: SECTIONS_CLASS, children: [
+        showDesktop && /* @__PURE__ */ jsx(Section, { id: "download-desktop", title: "Desktop app", children: /* @__PURE__ */ jsx(SystemCardsSkeleton, {}) }),
+        /* @__PURE__ */ jsx(Section, { id: "download-mobile", title: "Mobile app", children: /* @__PURE__ */ jsx(MobileCardsSkeleton, {}) })
+      ] })
+    ) : null;
   } else {
     body = /* @__PURE__ */ jsxs(Fragment, { children: [
       systems.length > 0 && /* @__PURE__ */ jsx(Section, { id: "download-desktop", title: "Desktop app", children: /* @__PURE__ */ jsx("div", { className: cardsGridClass(systems.length), children: systems.map((system) => /* @__PURE__ */ jsx(SystemCard, { system, onDownloadAction }, system.os)) }) }),
       mobile && hasMobile && /* @__PURE__ */ jsx(Section, { id: "download-mobile", title: "Mobile app", children: /* @__PURE__ */ jsxs("div", { className: cardsGridClass(mobile.install ? 2 : 1), children: [
         /* @__PURE__ */ jsxs("div", { className: CARD_CLASS, children: [
           /* @__PURE__ */ jsx(CardHeader, { title: storeCardTitle(mobile) }),
-          /* @__PURE__ */ jsx("p", { className: "m-0 text-ods-text-secondary text-h4", children: "Get alerts and respond to tickets on the go." }),
+          /* @__PURE__ */ jsx("p", { className: "m-0 text-ods-text-secondary text-h4", children: MOBILE_STORE_CARD_LINE }),
           /* @__PURE__ */ jsx(
             StoreBadgeLinks,
             {
@@ -189,23 +227,17 @@ function DownloadAppsPage({
             }
           )
         ] }),
-        mobile.install && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(CARD_CLASS, "content-md:flex-row content-md:items-center content-md:justify-between"),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-sf)]", children: [
-                /* @__PURE__ */ jsx(CardHeader, { title: "Scan with your phone" }),
-                /* @__PURE__ */ jsxs("p", { className: "m-0 text-ods-text-secondary text-h4", children: [
-                  "Point your camera at the code, or open ",
-                  formatUrlForDisplay(mobile.install.url),
-                  " on your phone."
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(MobileAppQr, { install: mobile.install, className: "h-[144px] w-[144px] shrink-0" })
-            ]
-          }
-        )
+        mobile.install && /* @__PURE__ */ jsxs("div", { className: cn(CARD_CLASS, SCAN_CARD_CLASS), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-sf)]", children: [
+            /* @__PURE__ */ jsx(CardHeader, { title: MOBILE_SCAN_TITLE }),
+            /* @__PURE__ */ jsxs("p", { className: "m-0 text-ods-text-secondary text-h4", children: [
+              "Point your camera at the code, or open ",
+              formatUrlForDisplay(mobile.install.url),
+              " on your phone."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(MobileAppQr, { install: mobile.install, className: QR_CLASS })
+        ] })
       ] }) })
     ] });
   }