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

package/dist/components/help-center-pages/trust-center-sections.js

@@ -3,14 +3,15 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement, useState } from "react";
 import { useDebounce } from "../../hooks/ui/use-debounce.js";
 import { useSelfFetch } from "../../hooks/use-self-fetch.js";
+import { ICON_SIZE } from "../../styles/component-sizes.js";
 import {
   TRUST_CENTER_SEARCH_DEBOUNCE_MS,
-  TRUST_CENTER_SECTIONS,
   normalizeTrustControlQuery,
   trustCenterControlsUrl,
   trustFrameworkBadge,
   trustFrameworkMonitoringEntry
 } from "../../types/trust-center.js";
+import { cn } from "../../utils/cn.js";
 import { getFlagFromCountryName } from "../../utils/country-phone-utils.js";
 import { RESCUE_FORMS } from "../../utils/form-rescue.js";
 import { STICKY_HEADER_OFFSET_PX } from "../../utils/same-page-hash-nav.js";
@@ -25,17 +26,18 @@ import { CheckIcon } from "../icons-v2-generated/signs-and-symbols/check-icon.js
 import { SECTION_HEADING_CLASS } from "../layout/page-heading.js";
 import { ListEmptyState } from "../list-empty-state.js";
 import { LoadingRegion } from "../loading/loading-region.js";
-import { TextSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { InteractiveSkeleton, TextLineSkeleton, TextSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/button/button.js";
-import { ComplianceLogo } from "../ui/compliance-badge.js";
+import { COMPLIANCE_LOGO_SIZE_CLASS, ComplianceLogo } from "../ui/compliance-badge.js";
 import { EntityImage } from "../ui/entity-image.js";
 import { LoadError } from "../ui/error-state.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { ModalV2, ModalV2Content, ModalV2Header, ModalV2Title } from "../ui/modal-v2.js";
 import { ScrollShadow } from "../ui/scroll-fade.js";
 import { SearchInput } from "../ui/search-input.js";
 import { StackedRowsPanel } from "../ui/stacked-rows-panel.js";
-import { StatusBadge } from "../ui/status-badge.js";
-import { TabNavigation } from "../ui/tab-navigation.js";
+import { StatusBadge, StatusBadgeSkeleton } from "../ui/status-badge.js";
+import { TabNavigation, TabNavigationSkeleton } from "../ui/tab-navigation.js";
 const FRAMEWORK_ICONS = {
   "shield-check": ShieldCheckIcon,
   "file-shield": FileShieldIcon
@@ -76,7 +78,11 @@ function TrustSection({
     }
   );
 }
-function AiSection({ practices }) {
+function AiSection({
+  practices,
+  skeletonRows
+}) {
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(TrustPanelSkeleton, { panel: "ai", rows: skeletonRows });
   const rows = practices.map((practice) => ({
     id: practice.label,
     columns: [
@@ -89,9 +95,13 @@ function AiSection({ practices }) {
       }
     ]
   }));
-  return /* @__PURE__ */ jsx(StackedRowsPanel, { rows });
+  return /* @__PURE__ */ jsx(StackedRowsPanel, { rows, listItems: true });
 }
-function ComplianceSection({ frameworks }) {
+function ComplianceSection({
+  frameworks,
+  skeletonRows
+}) {
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(TrustPanelSkeleton, { panel: "compliance", rows: skeletonRows });
   const rows = frameworks.map((framework) => {
     const entry = trustFrameworkMonitoringEntry(framework.monitoring);
     const Icon = FRAMEWORK_ICONS[entry.icon];
@@ -114,9 +124,9 @@ function ComplianceSection({ frameworks }) {
       ]
     };
   });
-  return /* @__PURE__ */ jsx(StackedRowsPanel, { rows });
+  return /* @__PURE__ */ jsx(StackedRowsPanel, { rows, listItems: true });
 }
-const CONTROL_ROW_CLASS = "h-14 content-md:h-20 overflow-hidden";
+const CONTROL_ROW_CLASS = "h-[var(--control-row-h)] overflow-hidden";
 function controlRows(controls) {
   return controls.map((control) => ({
     id: control.id,
@@ -134,12 +144,18 @@ function controlRows(controls) {
 function countLabel(n, noun) {
   return `${n} ${noun}${n === 1 ? "" : "s"}`;
 }
-const CONTROLS_LIST_HEIGHT = "h-[calc(5*3.5rem+7px)] content-md:h-[calc(5*5rem+7px)]";
+const CONTROLS_LIST_HEIGHT = "h-[calc(var(--controls-rows)*(var(--control-row-h)+1px)+2px)]";
+const CONTROLS_SECTION_CLASS = "flex flex-col gap-[var(--spacing-system-m)] [--control-row-h:3.5rem] content-md:[--control-row-h:5rem]";
+const CONTROLS_TOOLBAR_CLASS = "flex flex-col gap-[var(--spacing-system-s)] content-md:flex-row content-md:items-center content-md:justify-between";
+const CONTROLS_SEARCH_CLASS = "w-full content-md:w-80";
+const CONTROLS_SEARCH_PLACEHOLDER = "Search controls";
+const CONTROLS_SKELETON_TABS = 4;
 const CONTROLS_SKELETON_ROWS = 5;
+const controlsSectionStyle = { "--controls-rows": CONTROLS_SKELETON_ROWS };
 function controlsTabId(domain) {
   return `domain-${domain.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
 }
-function ControlsListSkeleton() {
+function ControlsListSkeleton({ region = true } = {}) {
   const rows = Array.from({ length: CONTROLS_SKELETON_ROWS }, (_, index) => ({
     id: `skeleton-${index}`,
     className: CONTROL_ROW_CLASS,
@@ -153,9 +169,13 @@ function ControlsListSkeleton() {
       }
     ]
   }));
-  return /* @__PURE__ */ jsx(StackedRowsPanel, { rows });
+  return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading the controls", announce: region, children: /* @__PURE__ */ jsx(StackedRowsPanel, { rows }) });
 }
 function ControlsSection({ endpoint, seed }) {
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(ControlsSectionSkeleton, {});
+  return /* @__PURE__ */ jsx(ControlsSectionLoaded, { endpoint, seed });
+}
+function ControlsSectionLoaded({ endpoint, seed }) {
   const [domain, setDomain] = useState(seed.domain);
   const [typed, setTyped] = useState("");
   const query = useDebounce(normalizeTrustControlQuery(typed), TRUST_CENTER_SEARCH_DEBOUNCE_MS);
@@ -175,7 +195,8 @@ function ControlsSection({ endpoint, seed }) {
   const activeTab = activeDomain ? controlsTabId(activeDomain) : "";
   let summary;
   if (answer.error && !current) summary = "Controls are unavailable";
-  else if (!current) summary = typedQuery ? `Searching for \u201C${typedQuery}\u201D\u2026` : "Loading\u2026";
+  else if (!current && typedQuery) summary = `Searching for \u201C${typedQuery}\u201D\u2026`;
+  else if (!current) summary = /* @__PURE__ */ jsx(ControlsSummarySkeleton, {});
   else if (query)
     summary = `${current.controls.length} in ${current.domain} match \u201C${query}\u201D \xB7 ${countLabel(total, "control")} in total`;
   else summary = `${countLabel(current.controls.length, "passing control")} in ${current.domain}`;
@@ -201,7 +222,7 @@ function ControlsSection({ endpoint, seed }) {
   } else {
     body = /* @__PURE__ */ jsx(StackedRowsPanel, { rows: controlRows(current.controls) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-m)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: CONTROLS_SECTION_CLASS, style: controlsSectionStyle, children: [
     /* @__PURE__ */ jsx(
       TabNavigation,
       {
@@ -210,12 +231,12 @@ function ControlsSection({ endpoint, seed }) {
         onTabChange: (tabId) => setDomain(categories.find((category) => controlsTabId(category.domain) === tabId)?.domain ?? null)
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-s)] content-md:flex-row content-md:items-center content-md:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: CONTROLS_TOOLBAR_CLASS, children: [
       /* @__PURE__ */ jsx("p", { className: BODY_TEXT, "aria-live": "polite", children: summary }),
-      /* @__PURE__ */ jsx("div", { className: "w-full content-md:w-80", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: CONTROLS_SEARCH_CLASS, children: /* @__PURE__ */ jsx(
         SearchInput,
         {
-          placeholder: "Search controls",
+          placeholder: CONTROLS_SEARCH_PLACEHOLDER,
           value: typed,
           onChange: setTyped,
           debounceMs: 0,
@@ -229,8 +250,10 @@ function ControlsSection({ endpoint, seed }) {
 function DocumentsSection({
   documents,
   documentUrl,
-  onRequest
+  onRequest,
+  skeletonRows
 }) {
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(TrustPanelSkeleton, { panel: "documents", rows: skeletonRows });
   const rows = documents.map((document) => {
     const gated = document.access === "request";
     const href = gated ? null : documentUrl(document);
@@ -262,7 +285,7 @@ function DocumentsSection({
       ]
     };
   });
-  return /* @__PURE__ */ jsx(StackedRowsPanel, { rows });
+  return /* @__PURE__ */ jsx(StackedRowsPanel, { rows, listItems: true });
 }
 function DocumentRequestModal({
   open,
@@ -293,16 +316,22 @@ function DocumentRequestModal({
     ] }) : null })
   ] });
 }
+const TRUST_GLYPH_SIZE_CLASS = ICON_SIZE.lg;
 function subprocessorMark({ name, logoUrl }) {
-  if (logoUrl) return /* @__PURE__ */ jsx(EntityImage, { src: logoUrl, alt: name, fallbackText: name, sizeClassName: "size-6" });
+  if (logoUrl)
+    return /* @__PURE__ */ jsx(EntityImage, { src: logoUrl, alt: name, fallbackText: name, sizeClassName: TRUST_GLYPH_SIZE_CLASS });
   const logo = brandLogoForName(name);
-  return logo ? /* @__PURE__ */ jsx("span", { role: "img", "aria-label": name, className: "flex", children: createElement(logo, { className: "size-6" }) }) : /* @__PURE__ */ jsx(EntityImage, { alt: name, fallbackText: name, sizeClassName: "size-6" });
+  return logo ? /* @__PURE__ */ jsx("span", { role: "img", "aria-label": name, className: "flex", children: createElement(logo, { className: TRUST_GLYPH_SIZE_CLASS }) }) : /* @__PURE__ */ jsx(EntityImage, { alt: name, fallbackText: name, sizeClassName: TRUST_GLYPH_SIZE_CLASS });
 }
 function countryWithFlag(country) {
   const flag = getFlagFromCountryName(country);
   return flag ? `${flag} ${country}` : country;
 }
-function SubprocessorsSection({ subprocessors }) {
+function SubprocessorsSection({
+  subprocessors,
+  skeletonRows
+}) {
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(TrustPanelSkeleton, { panel: "subprocessors", rows: skeletonRows });
   const anyLocation = subprocessors.some((subprocessor) => subprocessor.location);
   const rows = subprocessors.map((subprocessor) => ({
     id: subprocessor.name,
@@ -326,7 +355,7 @@ function SubprocessorsSection({ subprocessors }) {
       ] : []
     ]
   }));
-  return /* @__PURE__ */ jsx(StackedRowsPanel, { rows });
+  return /* @__PURE__ */ jsx(StackedRowsPanel, { rows, listItems: true });
 }
 function ContactSection({ onContact }) {
   return /* @__PURE__ */ jsx(
@@ -355,92 +384,91 @@ function ContactSection({ onContact }) {
     }
   );
 }
-function SkeletonSection({ id, children }) {
-  const label = TRUST_CENTER_SECTIONS.find((section) => section.id === id)?.label ?? id;
-  const lead = TRUST_SECTION_LEADS[id];
-  return /* @__PURE__ */ jsxs("section", { "aria-hidden": "true", className: "flex flex-col gap-[var(--spacing-system-m)]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
-      /* @__PURE__ */ jsx("h2", { className: SECTION_HEADING_CLASS, children: label }),
-      lead ? /* @__PURE__ */ jsx("p", { className: BODY_TEXT, children: lead }) : null
-    ] }),
-    children
-  ] });
+const TRUST_PANEL_FOLD = { phone: 4, wide: 5 };
+const TRUST_PANEL_SHAPES = {
+  compliance: { mark: "logo", action: "badge", lines: { phone: 4, wide: 1 } },
+  documents: { mark: "glyph", action: "button", lines: { phone: 1, wide: 1 } },
+  subprocessors: { mark: "glyph", action: "none", lines: { phone: 1, wide: 1 } },
+  ai: { mark: "glyph", action: "none", lines: { phone: 6, wide: 2 } }
+};
+function panelFold(rows) {
+  if (rows === void 0) return TRUST_PANEL_FOLD;
+  return typeof rows === "number" ? { phone: rows, wide: rows } : rows;
 }
-function skeletonRows(count, shape) {
-  return Array.from({ length: count }, (_, index) => ({
+function TrustPanelSkeleton({ panel, rows }) {
+  const shape = TRUST_PANEL_SHAPES[panel];
+  const fold = panelFold(rows);
+  const panelRows = Array.from({ length: Math.max(fold.phone, fold.wide) }, (_, index) => ({
     id: `skeleton-${index}`,
+    // A row past a breakpoint's fold is not drawn there; the last row drawn on a phone drops its divider like the
+    // panel's last row (`last:` cannot see a hidden sibling).
+    className: cn(
+      index >= fold.phone && "hidden content-md:flex",
+      index >= fold.wide && "content-md:hidden",
+      fold.phone < fold.wide && index === fold.phone - 1 && "content-max-md:border-b-0",
+      fold.wide < fold.phone && index === fold.wide - 1 && "content-md:border-b-0"
+    ),
     columns: [
       {
+        // The loaded rows' own cell (leading mark, `text-h4` value over a wrapping `text-h6` label): the panel lays
+        // the bars out exactly as it lays out the text.
         key: "item",
-        content: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-[var(--spacing-system-s)]", children: [
+        leadingIcon: /* @__PURE__ */ jsx(
+          UnifiedSkeleton,
+          {
+            className: shape.mark === "logo" ? cn(COMPLIANCE_LOGO_SIZE_CLASS, "shrink-0 rounded-full") : cn(TRUST_GLYPH_SIZE_CLASS, "shrink-0 rounded")
+          }
+        ),
+        value: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/3" }),
+        label: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", lines: shape.lines.phone, className: "w-full content-md:hidden" }),
           /* @__PURE__ */ jsx(
-            UnifiedSkeleton,
+            TextLineSkeleton,
             {
-              className: shape.mark === "logo" ? "size-10 shrink-0 rounded-full" : "size-6 shrink-0 rounded"
+              type: "inherit",
+              as: "span",
+              lines: shape.lines.wide,
+              className: "hidden w-full content-md:block"
             }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "text", className: "h-5 w-1/3 content-md:h-6" }),
-            /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-1/2" })
-          ] })
-        ] })
+          )
+        ] }),
+        wrap: true
       },
-      {
-        key: "action",
-        width: ACTION_COLUMN,
-        align: "right",
-        content: shape.action === "badge" ? /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-28 rounded" }) : /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-16 rounded content-md:h-8" })
-      }
+      ...shape.action === "none" ? [] : [
+        {
+          key: "action",
+          width: ACTION_COLUMN,
+          align: "right",
+          content: shape.action === "badge" ? /* @__PURE__ */ jsx(StatusBadgeSkeleton, {}) : (
+            // The rows' action is a `size="small"` Button: its own size classes.
+            /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "small", className: "w-16" })
+          )
+        }
+      ]
     ]
   }));
+  return /* @__PURE__ */ jsx(StackedRowsPanel, { rows: panelRows, listItems: true });
 }
-function ControlsSectionSkeleton() {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-m)]", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] overflow-hidden", children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ jsx("div", { className: "shrink-0 p-[var(--spacing-system-m)]", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "text", className: "h-5 w-36 content-md:h-6" }) }, index)) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-s)] content-md:flex-row content-md:items-center content-md:justify-between", children: [
-      /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-48" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-11 w-full rounded-[6px] content-md:h-12 content-md:w-80" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: CONTROLS_LIST_HEIGHT, children: /* @__PURE__ */ jsx(ControlsListSkeleton, {}) })
-  ] });
-}
-function SectionRailSkeleton() {
-  return /* @__PURE__ */ jsx("div", { className: "sticky", style: { top: STICKY_HEADER_OFFSET_PX }, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute -left-0.5 top-0 w-px bg-ods-border",
-        style: { height: TRUST_CENTER_SECTIONS.length * 40 }
-      }
-    ),
-    TRUST_CENTER_SECTIONS.map((section) => /* @__PURE__ */ jsx("div", { className: "flex h-10 items-center px-3 py-2", children: /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-24" }) }, section.id))
-  ] }) });
+function ControlsSummarySkeleton() {
+  return /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "h6", className: "w-48" });
 }
-function TrustCenterSkeleton({
-  region = true
-} = {}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: TRUST_STATUS_ROW_CLASS, "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-3 rounded-full" }),
-        /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-44" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-[var(--spacing-system-xsf)] content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4 rounded" }),
-          /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-36" })
-        ] }),
-        /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-44" })
-      ] })
+function ControlsSectionSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: CONTROLS_SECTION_CLASS, style: controlsSectionStyle, children: [
+    /* @__PURE__ */ jsx(TabNavigationSkeleton, { count: CONTROLS_SKELETON_TABS }),
+    /* @__PURE__ */ jsxs("div", { className: CONTROLS_TOOLBAR_CLASS, children: [
+      /* @__PURE__ */ jsx("p", { className: BODY_TEXT, children: /* @__PURE__ */ jsx(ControlsSummarySkeleton, {}) }),
+      /* @__PURE__ */ jsx("div", { className: CONTROLS_SEARCH_CLASS, children: /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          placeholder: CONTROLS_SEARCH_PLACEHOLDER,
+          value: "",
+          onChange: () => void 0,
+          debounceMs: 0,
+          showDropdown: false
+        }
+      ) })
     ] }),
-    /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading the trust center", announce: region, className: TRUST_BODY_GRID_CLASS, children: [
-      /* @__PURE__ */ jsxs("div", { className: TRUST_SECTIONS_COLUMN_CLASS, children: [
-        /* @__PURE__ */ jsx(SkeletonSection, { id: "compliance", children: /* @__PURE__ */ jsx(StackedRowsPanel, { rows: skeletonRows(3, { mark: "logo", action: "badge" }) }) }),
-        /* @__PURE__ */ jsx(SkeletonSection, { id: "controls", children: /* @__PURE__ */ jsx(ControlsSectionSkeleton, {}) }),
-        /* @__PURE__ */ jsx(SkeletonSection, { id: "documents", children: /* @__PURE__ */ jsx(StackedRowsPanel, { rows: skeletonRows(2, { mark: "glyph", action: "button" }) }) })
-      ] }),
-      /* @__PURE__ */ jsx("aside", { className: "hidden content-lg:block", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SectionRailSkeleton, {}) })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: CONTROLS_LIST_HEIGHT, children: /* @__PURE__ */ jsx(ControlsListSkeleton, { region: false }) })
   ] });
 }
 export {
@@ -455,6 +483,5 @@ export {
   TRUST_SECTIONS_COLUMN_CLASS,
   TRUST_SECTION_LEADS,
   TRUST_STATUS_ROW_CLASS,
-  TrustCenterSkeleton,
   TrustSection
 };

package/dist/components/icon-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-display.d.ts","sourceRoot":"","sources":["../../src/components/icon-display.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C;wEACwE;AACxE,MAAM,WAAW,eAAe;IAC9B,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CACxC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAS,EACT,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAoCf"}
+{"version":3,"file":"icon-display.d.ts","sourceRoot":"","sources":["../../src/components/icon-display.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQ1C;wEACwE;AACxE,MAAM,WAAW,eAAe;IAC9B,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CACxC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAS,EACT,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CA2Cf"}

package/dist/components/icon-display.js

@@ -4,12 +4,18 @@ import Image from "../embed-shims/next-image.js";
 import { cn } from "../utils/cn.js";
 import { AGENT_GLYPH_COLOR, AGENT_PICTURE_CLASS, useAgentIdentityIcon } from "./agent-identity.js";
 import { resolveIcon } from "./chat/utils/icon-library.js";
+import { UnifiedSkeleton } from "./loading/unified-skeleton.js";
+import { useLoadingScope } from "./ui/loading-scope.js";
 function EntityIcon({
   icon,
   size = 20,
   className
 }) {
   const identity = useAgentIdentityIcon(icon?.url ? null : icon?.name);
+  const held = useLoadingScope();
+  if (held) {
+    return /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", width: size, height: size, className: cn("inline-block shrink-0 rounded-md", className) });
+  }
   if (!icon?.url && identity?.url) {
     return /* @__PURE__ */ jsx(
       Image,