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

package/dist/components/related-content/related-content-section.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useSelfFetch } from "../../hooks/use-self-fetch.js";
 import {
   CONTENT_REF_GROUPS,
@@ -14,7 +14,9 @@ import { buildSuggestionUrl } from "../../utils/suggestion-url.js";
 import { decideNewTab } from "../chat/utils/decide-new-tab.js";
 import { accentSentenceMarks } from "../layout/page-heading.js";
 import { LoadingRegion } from "../loading/loading-region.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { Pagination } from "../pagination.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import {
   RELATED_CARD_REGISTRY,
   rowString
@@ -31,12 +33,12 @@ function DefaultLinkPropsProvider({
 function defaultResolveHref(ref) {
   return { href: ref.url || null, targetPlatform: ref.targetPlatform ?? null };
 }
-function renderSkeletonForType(type, size, adminCampaignCard) {
+function renderSkeletonForType(type, size, adminCampaignCard, extras) {
   if (type === "marketing_campaign") {
     return adminCampaignCard ? /* @__PURE__ */ jsx(adminCampaignCard.Skeleton, { size: size === "sm" ? "sm" : "default" }) : null;
   }
   const entry = RELATED_CARD_REGISTRY[type];
-  return entry ? entry.skeleton(size) : null;
+  return entry ? entry.skeleton(size, extras) : null;
 }
 function CardForType({
   type,
@@ -102,6 +104,36 @@ function resolveGroupConfig(type) {
   };
 }
 const GROUP_PAGE_SIZE = 12;
+const GROUP_CLASS = "space-y-4";
+const GROUP_LIST_CLASS = "space-y-4";
+const GROUP_HEADING_CLASS = "font-semibold text-ods-text-secondary text-h5";
+const RAIL_CLASS = "flex flex-col gap-8";
+const RAIL_SKELETON_CARDS = 3;
+const RAIL_LIST_FOLD = 2;
+const RAIL_GRID_FOLD_ROWS = 2;
+const UNKNOWN_TYPE_CARD = "blog_post_existing";
+const GRID_COLUMNS_BY_STEP = { 2: [1, 2, 2], 3: [1, 2, 3] };
+function gridFoldClass(index, columns) {
+  const [phone, sm, lg] = GRID_COLUMNS_BY_STEP[columns].map((c) => c * RAIL_GRID_FOLD_ROWS);
+  if (index < phone) return void 0;
+  if (index < sm) return "hidden sm:block";
+  if (index < lg) return "hidden lg:block";
+  return "hidden";
+}
+function GroupHeading({ type }) {
+  return /* @__PURE__ */ jsx("h3", { className: GROUP_HEADING_CLASS, children: getContentRefLabelOrTitleCase(type) });
+}
+function orderRailTypes(types, entityType) {
+  let ordered = orderContentRefTypes(types);
+  if (entityType) {
+    const canonicalEntityType = canonicalContentRefType(entityType);
+    const sameType = ordered.filter((t) => canonicalContentRefType(t) === canonicalEntityType);
+    if (sameType.length > 0) {
+      ordered = [...sameType, ...ordered.filter((t) => canonicalContentRefType(t) !== canonicalEntityType)];
+    }
+  }
+  return ordered;
+}
 function ContentGroup({
   type,
   refs,
@@ -111,7 +143,8 @@ function ContentGroup({
   LinkProvider,
   extras,
   adminCampaignCard,
-  heading
+  heading,
+  onLoadingChange
 }) {
   const config = resolveGroupConfig(type);
   const isListLayout = config.layout === "list";
@@ -127,13 +160,20 @@ function ContentGroup({
   const pageRefs = refs.slice((page - 1) * GROUP_PAGE_SIZE, page * GROUP_PAGE_SIZE);
   const { items, isLoading } = useGroupItems(type, pageRefs, buildUrl);
   const groupPagination = totalGroupPages > 1 ? /* @__PURE__ */ jsx(Pagination, { currentPage: page, totalPages: totalGroupPages, onPageChange: setPage }) : null;
+  useEffect(() => {
+    onLoadingChange(type, isLoading);
+    return () => onLoadingChange(type, false);
+  }, [onLoadingChange, type, isLoading]);
   if (isLoading) {
-    const skeletons = pageRefs.map((r) => /* @__PURE__ */ jsx("div", { children: renderSkeletonForType(type, cardSize, adminCampaignCard) }, r.id));
-    return /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading related content", className: "space-y-4", children: [
-      heading,
-      isListLayout ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: skeletons }) : /* @__PURE__ */ jsx("div", { className: gridClassFor(columns), children: skeletons }),
-      groupPagination
-    ] });
+    const skeletons = pageRefs.map((r) => /* @__PURE__ */ jsx("div", { "data-loading-item": true, children: renderSkeletonForType(type, cardSize, adminCampaignCard, extras) }, r.id));
+    return (
+      // The rail announces for every group (`announce={false}`): one rail, one "loading".
+      /* @__PURE__ */ jsxs(LoadingRegion, { announce: false, className: GROUP_CLASS, "data-loading-item": true, children: [
+        heading,
+        isListLayout ? /* @__PURE__ */ jsx("div", { className: GROUP_LIST_CLASS, children: skeletons }) : /* @__PURE__ */ jsx("div", { className: gridClassFor(columns), children: skeletons }),
+        groupPagination
+      ] })
+    );
   }
   if (!items) return null;
   const rowKey = (it) => {
@@ -149,7 +189,7 @@ function ContentGroup({
     const resolved = resolveHref(contentRef);
     const href = resolved.href ?? "";
     const targetPlatform = resolved.targetPlatform ?? contentRef.targetPlatform ?? null;
-    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(LinkProvider, { href: href || null, targetPlatform, children: (linkProps) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { "data-loading-item": true, children: /* @__PURE__ */ jsx(LinkProvider, { href: href || null, targetPlatform, children: (linkProps) => /* @__PURE__ */ jsx(
       CardForType,
       {
         type,
@@ -165,19 +205,20 @@ function ContentGroup({
   }).filter(Boolean);
   if (cards.length === 0) {
     if (groupPagination) {
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      return /* @__PURE__ */ jsxs("div", { className: GROUP_CLASS, "data-loading-item": true, children: [
         heading,
         groupPagination
       ] });
     }
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: GROUP_CLASS, "data-loading-item": true, children: [
     heading,
-    isListLayout ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: cards }) : /* @__PURE__ */ jsx("div", { className: gridClassFor(columns), children: cards }),
+    isListLayout ? /* @__PURE__ */ jsx("div", { className: GROUP_LIST_CLASS, children: cards }) : /* @__PURE__ */ jsx("div", { className: gridClassFor(columns), children: cards }),
     groupPagination
   ] });
 }
+const RAIL_TITLE_CLASS = "text-ods-text-primary text-h2";
 function RelatedContentSection({
   contentRefs,
   entityType,
@@ -227,6 +268,17 @@ function RelatedContentSection({
     [initialItems, suggestionsDisabled]
   );
   const { data, isLoading } = useSelfFetch(suggestUrl, { initialData });
+  const inScope = useLoadingScope();
+  const [loadingTypes, setLoadingTypes] = useState(() => /* @__PURE__ */ new Set());
+  const onGroupLoadingChange = useCallback((type, loading) => {
+    setLoadingTypes((prev) => {
+      if (prev.has(type) === loading) return prev;
+      const next = new Set(prev);
+      if (loading) next.add(type);
+      else next.delete(type);
+      return next;
+    });
+  }, []);
   const effectiveBuildListUrl = useMemo(
     () => buildListUrl ?? ((type, ids) => libBuildListUrl(type, ids, apiBaseUrl)),
     [buildListUrl, apiBaseUrl]
@@ -235,14 +287,22 @@ function RelatedContentSection({
   const exclude = new Set(excludeTypes || []);
   const visibleRefs = exclude.size > 0 ? refs.filter((r) => !exclude.has(r.type)) : refs;
   if (!visibleRefs.length) {
-    if (!showWhenEmpty) return null;
-    if (isLoading) {
-      const skeletonType = includeTypes?.[0] ?? entityType ?? "blog_post_existing";
-      return /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading related content", className: "space-y-8", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-ods-text-primary text-h2", children: accentSentenceMarks(title) }),
-        /* @__PURE__ */ jsx("div", { className: gridClassFor(columns), children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx("div", { children: renderSkeletonForType(skeletonType, "default", adminCampaignCard) }, i)) })
-      ] });
+    if (isLoading || inScope) {
+      return /* @__PURE__ */ jsx(
+        RelatedContentSectionSkeleton,
+        {
+          title,
+          types: (includeTypes ?? []).filter((t) => !exclude.has(t)),
+          entityType,
+          minResults,
+          sameTypeMinResults,
+          columns,
+          adminCampaignCard,
+          extras
+        }
+      );
     }
+    if (!showWhenEmpty) return null;
     return /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-ods-text-primary", children: accentSentenceMarks(title) }),
       emptyState ?? /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary", children: emptyStateText })
@@ -253,16 +313,24 @@ function RelatedContentSection({
     if (!grouped[ref.type]) grouped[ref.type] = [];
     grouped[ref.type].push(ref);
   }
-  let orderedTypes = orderContentRefTypes(Object.keys(grouped));
-  if (entityType) {
-    const canonicalEntityType = canonicalContentRefType(entityType);
-    const sameType = orderedTypes.filter((t) => canonicalContentRefType(t) === canonicalEntityType);
-    if (sameType.length > 0) {
-      orderedTypes = [...sameType, ...orderedTypes.filter((t) => canonicalContentRefType(t) !== canonicalEntityType)];
-    }
+  const orderedTypes = orderRailTypes(Object.keys(grouped), entityType);
+  if (inScope) {
+    return /* @__PURE__ */ jsx(
+      RelatedContentSectionSkeleton,
+      {
+        title,
+        types: orderedTypes,
+        entityType,
+        minResults,
+        sameTypeMinResults,
+        columns,
+        adminCampaignCard,
+        extras
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-ods-text-primary text-h2", children: accentSentenceMarks(title) }),
+  return /* @__PURE__ */ jsxs(LoadingRegion, { as: "section", label: "Loading related content", announce: loadingTypes.size > 0, className: RAIL_CLASS, children: [
+    /* @__PURE__ */ jsx("h2", { className: RAIL_TITLE_CLASS, children: accentSentenceMarks(title) }),
     orderedTypes.map((type) => /* @__PURE__ */ jsx(
       ContentGroup,
       {
@@ -274,13 +342,57 @@ function RelatedContentSection({
         LinkProvider,
         extras,
         adminCampaignCard,
-        heading: /* @__PURE__ */ jsx("h3", { className: "font-semibold text-ods-text-secondary text-h5", children: getContentRefLabelOrTitleCase(type) })
+        heading: /* @__PURE__ */ jsx(GroupHeading, { type }),
+        onLoadingChange: onGroupLoadingChange
       },
       type
     ))
   ] });
 }
+function RelatedContentSectionSkeleton({
+  title = "Related Content",
+  types,
+  entityType,
+  minResults,
+  sameTypeMinResults,
+  columns = 2,
+  adminCampaignCard,
+  extras
+}) {
+  const canonicalEntityType = entityType ? canonicalContentRefType(entityType) : null;
+  const unknownGroup = types.length === 0 ? /* @__PURE__ */ jsxs("div", { className: GROUP_CLASS, "aria-hidden": true, "data-loading-item": true, children: [
+    /* @__PURE__ */ jsx("h3", { className: GROUP_HEADING_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-24" }) }),
+    /* @__PURE__ */ jsx("div", { className: gridClassFor(columns), children: Array.from({ length: Math.max(...GRID_COLUMNS_BY_STEP[columns]) * RAIL_GRID_FOLD_ROWS }, (_, i) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
+      /* @__PURE__ */ jsx("div", { className: gridFoldClass(i, columns), "data-loading-item": true, children: renderSkeletonForType(UNKNOWN_TYPE_CARD, "default", adminCampaignCard, extras) }, i)
+    )) })
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(LoadingRegion, { as: "section", label: "Loading related content", className: RAIL_CLASS, children: [
+    /* @__PURE__ */ jsx("h2", { className: RAIL_TITLE_CLASS, children: title ? accentSentenceMarks(title) : /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/2" }) }),
+    unknownGroup,
+    orderRailTypes(new Set(types), entityType).map((type) => {
+      const config = resolveGroupConfig(type);
+      const sameType = canonicalEntityType !== null && canonicalContentRefType(type) === canonicalEntityType;
+      const isList = config.layout === "list";
+      const fold = isList ? RAIL_LIST_FOLD : Math.max(...GRID_COLUMNS_BY_STEP[columns]) * RAIL_GRID_FOLD_ROWS;
+      const count = Math.min(
+        GROUP_PAGE_SIZE,
+        fold,
+        (sameType ? sameTypeMinResults ?? minResults : minResults) ?? RAIL_SKELETON_CARDS
+      );
+      const cards = Array.from({ length: count }, (_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
+        /* @__PURE__ */ jsx("div", { className: isList ? void 0 : gridFoldClass(i, columns), "data-loading-item": true, children: renderSkeletonForType(type, config.gridSize, adminCampaignCard, extras) }, i)
+      ));
+      return /* @__PURE__ */ jsxs("div", { className: GROUP_CLASS, "aria-hidden": true, "data-loading-item": true, children: [
+        /* @__PURE__ */ jsx(GroupHeading, { type }),
+        isList ? /* @__PURE__ */ jsx("div", { className: GROUP_LIST_CLASS, children: cards }) : /* @__PURE__ */ jsx("div", { className: gridClassFor(columns), children: cards })
+      ] }, type);
+    })
+  ] });
+}
 export {
   GROUP_PAGE_SIZE,
-  RelatedContentSection
+  RelatedContentSection,
+  RelatedContentSectionSkeleton
 };

package/dist/components/results-count.d.ts

@@ -6,4 +6,9 @@ export interface ResultsCountProps {
     sortingMessage?: string;
 }
 export declare function ResultsCount({ currentPage, pageSize, totalResults, resultType, sortingMessage }: ResultsCountProps): import("react").JSX.Element | null;
+/**
+ * The results count while the list is read: the same row and line, the words its own ("Showing", "of", the result
+ * type, the sorting message) and the two numbers as bars.
+ */
+export declare function ResultsCountSkeleton({ resultType, sortingMessage, }: Pick<ResultsCountProps, 'resultType' | 'sortingMessage'>): import("react").JSX.Element;
 //# sourceMappingURL=results-count.d.ts.map

package/dist/components/results-count.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"results-count.d.ts","sourceRoot":"","sources":["../../src/components/results-count.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,EAAE,iBAAiB,sCAuBlH"}
+{"version":3,"file":"results-count.d.ts","sourceRoot":"","sources":["../../src/components/results-count.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAUD,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,EAAE,iBAAiB,sCAwBlH;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,UAAU,EACV,cAAc,GACf,EAAE,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,gBAAgB,CAAC,+BAU1D"}

package/dist/components/results-count.js

@@ -1,15 +1,20 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TextLineSkeleton } from "./loading/unified-skeleton.js";
+import { useLoadingScope } from "./ui/loading-scope.js";
+const RESULTS_COUNT_ROW_CLASS = "mb-6";
+const RESULTS_COUNT_TEXT_CLASS = "text-ods-text-secondary text-h6";
+const RESULTS_COUNT_SORTING_CLASS = "ml-2 text-ods-accent";
+const resultLabel = (resultType, one) => resultType === "vendors" ? one ? "vendor" : "vendors" : one ? "post" : "posts";
 function ResultsCount({ currentPage, pageSize, totalResults, resultType, sortingMessage }) {
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(ResultsCountSkeleton, { resultType, sortingMessage });
   if (totalResults === 0) {
     return null;
   }
   const startIndex = (currentPage - 1) * pageSize + 1;
   const endIndex = Math.min(currentPage * pageSize, totalResults);
-  const plural = resultType === "vendors" ? "vendors" : "posts";
-  const singular = resultType === "vendors" ? "vendor" : "post";
-  const displayType = totalResults === 1 ? singular : plural;
-  return /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: totalResults > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+  const displayType = resultLabel(resultType, totalResults === 1);
+  return /* @__PURE__ */ jsx("div", { className: RESULTS_COUNT_ROW_CLASS, children: /* @__PURE__ */ jsx("p", { className: RESULTS_COUNT_TEXT_CLASS, children: totalResults > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
     "Showing ",
     startIndex,
     "-",
@@ -18,12 +23,31 @@ function ResultsCount({ currentPage, pageSize, totalResults, resultType, sorting
     totalResults,
     " ",
     displayType,
-    sortingMessage && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-ods-accent", children: [
+    sortingMessage && /* @__PURE__ */ jsxs("span", { className: RESULTS_COUNT_SORTING_CLASS, children: [
       "\u2022 ",
       sortingMessage
     ] })
   ] }) }) });
 }
+function ResultsCountSkeleton({
+  resultType,
+  sortingMessage
+}) {
+  return /* @__PURE__ */ jsx("div", { className: RESULTS_COUNT_ROW_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsxs("p", { className: RESULTS_COUNT_TEXT_CLASS, children: [
+    "Showing ",
+    /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "inline-block align-top w-10" }),
+    " of",
+    " ",
+    /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "inline-block align-top w-6" }),
+    " ",
+    resultLabel(resultType, false),
+    sortingMessage && /* @__PURE__ */ jsxs("span", { className: RESULTS_COUNT_SORTING_CLASS, children: [
+      "\u2022 ",
+      sortingMessage
+    ] })
+  ] }) });
+}
 export {
-  ResultsCount
+  ResultsCount,
+  ResultsCountSkeleton
 };

package/dist/components/shared/article-author-byline.d.ts

@@ -30,4 +30,12 @@ export interface ArticleAuthorBylineProps {
     className?: string;
 }
 export declare function ArticleAuthorByline({ author, avatar, bio, jobTitle, publishedAt, href, fallbackBio, size, proxyImageUrl, className, }: ArticleAuthorBylineProps): import("react").JSX.Element | null;
+/**
+ * The byline while its author is read: the card frame, the avatar circle at its size, and bars for the name (h5),
+ * the job title and three bio lines, each inside the loaded text's own element so it takes that line's height.
+ */
+export declare function ArticleAuthorBylineSkeleton({ size, className }: {
+    size?: 'md' | 'lg';
+    className?: string;
+}): import("react").JSX.Element;
 //# sourceMappingURL=article-author-byline.d.ts.map

package/dist/components/shared/article-author-byline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"article-author-byline.d.ts","sourceRoot":"","sources":["../../../src/components/shared/article-author-byline.tsx"],"names":[],"mappings":"AAkCA,MAAM,WAAW,wBAAwB;IACvC,uEAAuE;IACvE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,sDAAsD;IACtD,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACnC,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,MAAM,EACN,GAAG,EACH,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,WAAW,EACX,IAAW,EACX,aAAa,EACb,SAAS,GACV,EAAE,wBAAwB,sCAoF1B"}
+{"version":3,"file":"article-author-byline.d.ts","sourceRoot":"","sources":["../../../src/components/shared/article-author-byline.tsx"],"names":[],"mappings":"AAqCA,MAAM,WAAW,wBAAwB;IACvC,uEAAuE;IACvE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,sDAAsD;IACtD,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACnC,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,MAAM,EACN,GAAG,EACH,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,WAAW,EACX,IAAW,EACX,aAAa,EACb,SAAS,GACV,EAAE,wBAAwB,sCAgE1B;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAqBjH"}

package/dist/components/shared/article-author-byline.js

@@ -1,12 +1,25 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Calendar, User } from "lucide-react";
-import { useChatRuntime } from "../../contexts/chat-runtime-context.js";
 import Image from "../../embed-shims/next-image.js";
 import Link from "../../embed-shims/next-link.js";
+import { AVATAR_SIZE, AVATAR_SIZE_PX } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
 import { formatBioText, formatDateWithTimezone } from "../../utils/format.js";
-import { getProxiedImageUrl } from "../../utils/image-proxy.js";
+import { useProxiedImageUrl } from "../chat/hooks/use-proxied-image-url.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
+const BYLINE_FRAME_CLASS = cn(
+  "rounded-lg border border-ods-border bg-ods-card p-6",
+  "flex flex-col items-start gap-4 content-md:flex-row"
+);
+const BYLINE_AVATAR_SIZE = { md: "byline", lg: "xl" };
+const AVATAR_BORDER_CLASS = "rounded-full border-2 border-ods-border";
+const BODY_CLASS = "min-w-0 flex-1";
+const NAME_ROW_CLASS = "flex flex-wrap items-baseline gap-x-3 gap-y-1";
+const NAME_CLASS = "text-ods-text-primary text-h5";
+const JOB_TITLE_CLASS = "text-body-sm mt-0.5 font-body text-ods-text-secondary";
+const BIO_CLASS = "text-body-md mt-2 font-body leading-relaxed text-ods-text-secondary";
 function formatDate(value) {
   return formatDateWithTimezone(value, null, "long");
 }
@@ -22,61 +35,50 @@ function ArticleAuthorByline({
   proxyImageUrl,
   className
 }) {
-  const runtime = useChatRuntime();
+  const proxiedAvatar = useProxiedImageUrl(avatar, { proxyImageUrl });
+  const loading = useLoadingScope();
+  if (loading && !author) return /* @__PURE__ */ jsx(ArticleAuthorBylineSkeleton, { size, className });
   if (!author) return null;
-  const proxiedAvatar = avatar ? proxyImageUrl ? proxyImageUrl(avatar) : getProxiedImageUrl(avatar, {
-    proxyPrefix: runtime?.endpoints.imageProxyUrlPrefix,
-    skipDomains: runtime?.endpoints.imageProxySkipDomains,
-    directHttps: true
-  }) ?? avatar : "";
-  const avatarSizeClass = size === "lg" ? "w-16 h-16" : "w-14 h-14";
+  const avatarSizeClass = AVATAR_SIZE[BYLINE_AVATAR_SIZE[size]];
   const avatarIconClass = size === "lg" ? "w-8 h-8" : "w-7 h-7";
-  const avatarDim = size === "lg" ? 64 : 56;
+  const avatarDim = AVATAR_SIZE_PX[BYLINE_AVATAR_SIZE[size]];
   const formattedBio = formatBioText(bio ?? null);
   const dateLabel = publishedAt ? formatDate(publishedAt) : "";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "rounded-lg border border-ods-border bg-ods-card p-6",
-        "flex flex-col items-start gap-4 content-md:flex-row",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: avatar ? /* @__PURE__ */ jsx(
-          Image,
-          {
-            src: proxiedAvatar || avatar,
-            alt: author,
-            width: avatarDim,
-            height: avatarDim,
-            className: cn("rounded-full border-2 border-ods-border object-cover", avatarSizeClass)
-          }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex items-center justify-center rounded-full border-2 border-ods-border bg-ods-bg",
-              avatarSizeClass
-            ),
-            children: /* @__PURE__ */ jsx(User, { className: cn("text-ods-text-secondary", avatarIconClass) })
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-ods-text-primary text-h5", children: href ? /* @__PURE__ */ jsx(Link, { href, className: "transition-colors hover:text-ods-accent", children: author }) : author }),
-            dateLabel && /* @__PURE__ */ jsxs("span", { className: "text-body-sm inline-flex items-center gap-1 font-body text-ods-text-secondary", children: [
-              /* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3" }),
-              dateLabel
-            ] })
-          ] }),
-          jobTitle && /* @__PURE__ */ jsx("p", { className: "text-body-sm mt-0.5 font-body text-ods-text-secondary", children: jobTitle }),
-          formattedBio ? /* @__PURE__ */ jsx("p", { className: "text-body-md mt-2 font-body leading-relaxed text-ods-text-secondary", children: formattedBio }) : fallbackBio ? /* @__PURE__ */ jsx("p", { className: "text-body-md mt-2 font-body italic text-ods-text-secondary", children: fallbackBio }) : null
+  return /* @__PURE__ */ jsxs("div", { className: cn(BYLINE_FRAME_CLASS, className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: avatar ? /* @__PURE__ */ jsx(
+      Image,
+      {
+        src: proxiedAvatar || avatar,
+        alt: author,
+        width: avatarDim,
+        height: avatarDim,
+        className: cn(AVATAR_BORDER_CLASS, "object-cover", avatarSizeClass)
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center bg-ods-bg", AVATAR_BORDER_CLASS, avatarSizeClass), children: /* @__PURE__ */ jsx(User, { className: cn("text-ods-text-secondary", avatarIconClass) }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: BODY_CLASS, children: [
+      /* @__PURE__ */ jsxs("div", { className: NAME_ROW_CLASS, children: [
+        /* @__PURE__ */ jsx("h3", { className: NAME_CLASS, children: href ? /* @__PURE__ */ jsx(Link, { href, className: "transition-colors hover:text-ods-accent", children: author }) : author }),
+        dateLabel && /* @__PURE__ */ jsxs("span", { className: "text-body-sm inline-flex items-center gap-1 font-body text-ods-text-secondary", children: [
+          /* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3" }),
+          dateLabel
         ] })
-      ]
-    }
-  );
+      ] }),
+      jobTitle && /* @__PURE__ */ jsx("p", { className: JOB_TITLE_CLASS, children: jobTitle }),
+      formattedBio ? /* @__PURE__ */ jsx("p", { className: BIO_CLASS, children: formattedBio }) : fallbackBio ? /* @__PURE__ */ jsx("p", { className: "text-body-md mt-2 font-body italic text-ods-text-secondary", children: fallbackBio }) : null
+    ] })
+  ] });
+}
+function ArticleAuthorBylineSkeleton({ size = "md", className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(BYLINE_FRAME_CLASS, className), "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "circular", className: AVATAR_SIZE[BYLINE_AVATAR_SIZE[size]] }) }),
+    /* @__PURE__ */ jsxs("div", { className: cn(BODY_CLASS, "w-full"), children: [
+      /* @__PURE__ */ jsx("div", { className: NAME_ROW_CLASS, children: /* @__PURE__ */ jsx("h3", { className: NAME_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-40" }) }) }),
+      /* @__PURE__ */ jsx("p", { className: JOB_TITLE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-32" }) }),
+      /* @__PURE__ */ jsx("p", { className: BIO_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", lines: 3, className: "w-full" }) })
+    ] })
+  ] });
 }
 export {
-  ArticleAuthorByline
+  ArticleAuthorByline,
+  ArticleAuthorBylineSkeleton
 };

package/dist/components/shared/delivery/delivery-lists.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"delivery-lists.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/delivery/delivery-lists.tsx"],"names":[],"mappings":"AA+DA,MAAM,WAAW,kBAAkB;IACjC;qCACiC;IACjC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;uCACmC;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;kEAC8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;qEACiE;IACjE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAC5B,oBAAiD,EACjD,qBAAoD,EACpD,cAAyC,EACzC,gBAA8C,GAC/C,GAAE,kBAAuB,+BAqJzB"}
+{"version":3,"file":"delivery-lists.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/delivery/delivery-lists.tsx"],"names":[],"mappings":"AAgEA,MAAM,WAAW,kBAAkB;IACjC;qCACiC;IACjC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;uCACmC;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;kEAC8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;qEACiE;IACjE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAC5B,oBAAiD,EACjD,qBAAoD,EACpD,cAAyC,EACzC,gBAA8C,GAC/C,GAAE,kBAAuB,+BAiKzB"}

package/dist/components/shared/delivery/delivery-lists.js

@@ -10,6 +10,7 @@ import { usePageDataSync } from "../../layout/page-data-sync.js";
 import { ListEmptyState } from "../../list-empty-state.js";
 import { DataSyncLine } from "../../ui/data-attribution.js";
 import { LoadError } from "../../ui/error-state.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import { DeliveryTable } from "./delivery-table.js";
 const DEFAULT_COMPLETED_ENDPOINT = "/api/delivery/completed";
 const DEFAULT_IN_PROGRESS_ENDPOINT = "/api/delivery/in-progress";
@@ -25,12 +26,15 @@ function DeliveryLists({
   const router = useRouter();
   const pathname = usePathname();
   const [data, setData] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isFetching, setIsLoading] = useState(true);
+  const inScope = useLoadingScope();
+  const isLoading = inScope || isFetching;
   const [error, setError] = useState(null);
   const [sync, setSync] = useState(null);
   const searchQuery = searchParams.get(searchParamKey) || "";
   const taskTypeFilter = searchParams.get(taskTypeParamKey) || "all";
   useEffect(() => {
+    if (inScope) return void 0;
     let cancelled = false;
     async function fetchDeliveryData() {
       try {
@@ -74,7 +78,15 @@ function DeliveryLists({
     return () => {
       cancelled = true;
     };
-  }, [searchQuery, taskTypeFilter, completedApiEndpoint, inProgressApiEndpoint, searchParamKey, taskTypeParamKey]);
+  }, [
+    inScope,
+    searchQuery,
+    taskTypeFilter,
+    completedApiEndpoint,
+    inProgressApiEndpoint,
+    searchParamKey,
+    taskTypeParamKey
+  ]);
   const filteredCompleted = data?.completed || [];
   const filteredInProgress = data?.inProgress || [];
   useScrollToHash(data, { headerOffset: STICKY_HEADER_OFFSET_PX });

package/dist/components/shared/delivery/delivery-row.d.ts

@@ -24,4 +24,9 @@ export interface DeliveryRowProps {
     className?: string;
 }
 export declare function DeliveryRow({ item, href, target, caption, id, className }: DeliveryRowProps): import("react").JSX.Element;
+/**
+ * A delivery row while its task is read: the same row, its caption for real, the title, subtitle and description
+ * as bars at their type steps, and the two badges as their skeletons.
+ */
+export declare function DeliveryRowSkeleton({ caption, className }: Pick<DeliveryRowProps, 'caption' | 'className'>): import("react").JSX.Element;
 //# sourceMappingURL=delivery-row.d.ts.map

package/dist/components/shared/delivery/delivery-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"delivery-row.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/delivery/delivery-row.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAE,KAAK,YAAY,EAA2C,MAAM,yBAAyB,CAAC;AAuBrG,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,YAAY,CAAC;IACnB;;;;+CAI2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;4DACwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;oDAKgD;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;oFAEgF;IAChF,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAwG3F"}
+{"version":3,"file":"delivery-row.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/delivery/delivery-row.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,KAAK,YAAY,EAA2C,MAAM,yBAAyB,CAAC;AAyBrG,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,YAAY,CAAC;IACnB;;;;+CAI2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;4DACwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;oDAKgD;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;oFAEgF;IAChF,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BA0G3F;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,CAAC,+BAuB1G"}