@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/comment-card.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { TILE_SIZE } from '../styles/component-sizes';
 import { cn } from '../utils/cn';
 import { formatRelativeTime } from '../utils/date-utils';
 import { useAuth } from './auth-stub';
+import { TrashIcon } from './icons-v2-generated';
 import { TextLineSkeleton, UnifiedSkeleton } from './loading/unified-skeleton';
 import { Button } from './ui/button';
-import { useLoadingScope } from './ui/loading-scope';
+import { loadingItemProps, useLoadingScope } from './ui/loading-scope';
 import { UserSummary } from './user-summary-stub';
 import {
   VENDOR_DISPLAY_BUTTON_FRAME_CLASS,
@@ -42,8 +42,7 @@ export interface CommentCardComment {
   canDelete?: boolean;
 }
 
-interface CommentCardProps {
-  comment: CommentCardComment;
+interface CommentCardBaseProps {
   onViewProduct?: (vendorSlug: string) => void;
   onDeleteComment?: (commentId: string) => void;
   /** @deprecated Superseded by `leadWith`; the component ignores it. */
@@ -66,8 +65,19 @@ interface CommentCardProps {
   footer?: React.ReactNode;
   /** Rendered after the card — nested replies + reply composer (design-doc threads). */
   children?: React.ReactNode;
+  /** While `loading` with no comment: the card draws its title row (titled reviews). Default true. */
+  titleRow?: boolean;
+  /** List markers (`data-loading-item`), on the card's frame in both forms. */
+  [marker: `data-${string}`]: unknown;
 }
 
+/**
+ * A comment (`comment`), or, while it is read, `loading` with no comment: the card draws its skeleton in its own boxes,
+ * with the `footer` it is given (the host's static controls). A loading scope draws the skeleton too.
+ */
+type CommentCardProps = CommentCardBaseProps &
+  ({ comment: CommentCardComment; loading?: false } | { comment?: undefined; loading: true });
+
 // The card's boxes, read by the card AND its skeleton, so the two are one size at every width.
 const COMMENT_CARD_FRAME =
   'group box-border w-full max-w-full overflow-hidden rounded-lg border border-ods-border bg-ods-card p-4 transition-all hover:border-ods-accent';
@@ -83,8 +93,11 @@ const commentTitleRow = (compact: boolean) => (compact ? 'flex h-[20px] items-ce
 const commentBodyRow = (compact: boolean) => (compact ? 'flex h-[60px] items-center' : 'flex h-[72px] items-center');
 /** The commenter header's avatar (UserSummary `compact`, `avatarSize`). */
 const COMMENT_CARD_AVATAR_PX = 48;
-/** The delete button's box (`Button` size `icon`). */
-const COMMENT_CARD_DELETE_BOX = TILE_SIZE.touch;
+/**
+ * How many `text-h4` lines a thread comment read in full (`fullBody`) typically takes while it is read: a short
+ * thread comment wraps to about two lines. A typical count, not a measured one: the loaded body takes its own height.
+ */
+const COMMENT_CARD_FULL_BODY_LINES = 2;
 
 export function CommentCard({
   comment,
@@ -95,8 +108,12 @@ export function CommentCard({
   fullBody = false,
   footer,
   children,
+  loading,
+  titleRow = true,
+  ...markers
 }: CommentCardProps) {
   const { user: currentUser } = useAuth();
+  const inScope = useLoadingScope();
 
   // Use unified date formatting function
   const formatActivityTime = (timestamp: string) => {
@@ -110,31 +127,39 @@ export function CommentCard({
    * with their gate module and hand it in), and the default is the only rule
    * this component can honestly know by itself — your own comment.
    */
-  const canUserDeleteComment = () => {
+  const canUserDeleteComment = (shown: CommentCardComment) => {
     if (!currentUser) return false;
-    if (typeof comment.canDelete === 'boolean') return comment.canDelete;
-    return !!comment.user && currentUser.id === comment.user.id;
+    if (typeof shown.canDelete === 'boolean') return shown.canDelete;
+    return !!shown.user && currentUser.id === shown.user.id;
   };
 
-  const showDeleteButton = canUserDeleteComment();
-
-  if (useLoadingScope()) {
+  if (inScope || loading) {
     return (
       <>
         <CommentCardSkeleton
           leadWith={leadWith}
-          showTitle={!!comment.title}
-          showDelete={showDeleteButton && !!onDeleteComment}
+          showTitle={comment ? !!comment.title : titleRow}
+          // A host that may delete draws the delete button; with no comment yet who may is unknown, so it is held.
+          showDelete={!!onDeleteComment && (!comment || canUserDeleteComment(comment))}
           compact={compact}
+          fullBody={fullBody}
+          footer={loading ? footer : undefined}
+          {...loadingItemProps(markers)}
         />
         {children}
       </>
     );
   }
 
+  const showDeleteButton = canUserDeleteComment(comment);
+
   return (
     <>
-      <div className={COMMENT_CARD_FRAME} style={{ maxWidth: '100%', wordBreak: 'break-word' }}>
+      <div
+        className={COMMENT_CARD_FRAME}
+        style={{ maxWidth: '100%', wordBreak: 'break-word' }}
+        {...loadingItemProps(markers)}
+      >
         {/* Comment Header */}
         <div className={COMMENT_CARD_HEADER}>
           {/* Row 1: Info + Timestamp */}
@@ -175,32 +200,7 @@ export function CommentCard({
           {/* Row 2: Action Buttons */}
           <div className={COMMENT_CARD_ACTIONS}>
             {/* Delete Button - shown when user can delete the comment */}
-            {showDeleteButton && onDeleteComment && (
-              <Button
-                onClick={() => onDeleteComment(comment.id)}
-                variant="outline"
-                size="icon"
-                className="text-ods-text-primary"
-              >
-                <svg
-                  width="22"
-                  height="24"
-                  viewBox="0 0 22 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="text-ods-text-primary"
-                >
-                  <path
-                    d="M18.6025 4.37939C19.221 4.43597 19.6768 4.98399 19.6206 5.60254L18.5176 17.7358C18.4492 18.4886 18.3924 19.1183 18.3052 19.6299C18.2155 20.1552 18.0809 20.6447 17.8101 21.1021C17.4444 21.7195 16.9245 22.2292 16.3042 22.583L16.0317 22.7251C15.5519 22.9533 15.0526 23.0438 14.5215 23.0854C14.0042 23.126 13.3727 23.125 12.6172 23.125H9.38281C8.62726 23.125 7.9958 23.126 7.47852 23.0854C7.01357 23.049 6.57289 22.975 6.14844 22.8042L5.96826 22.7251C5.32037 22.4169 4.76543 21.9454 4.35693 21.3599L4.18994 21.1021C3.91912 20.6447 3.78445 20.1552 3.69482 19.6299C3.65123 19.3743 3.61556 19.0894 3.58203 18.7744L3.48242 17.7358L2.37939 5.60254L2.375 5.48682C2.38099 4.91684 2.81768 4.43244 3.39746 4.37939C3.97776 4.32664 4.496 4.72462 4.60449 5.28467L4.62061 5.39746L5.72363 17.5322C5.79528 18.3203 5.84358 18.8475 5.9126 19.252C5.97923 19.6424 6.05232 19.8298 6.12646 19.9551L6.28467 20.1836C6.45963 20.3987 6.68118 20.5732 6.93359 20.6934L7.04639 20.7388C7.17478 20.7822 7.35781 20.8195 7.6543 20.8428C8.06325 20.8749 8.59186 20.875 9.38281 20.875H12.6172C13.4081 20.875 13.9367 20.8749 14.3457 20.8428C14.7409 20.8117 14.9349 20.7559 15.0664 20.6934L15.3066 20.5557C15.5369 20.4008 15.7309 20.1958 15.8735 19.9551C15.9477 19.8298 16.0208 19.6424 16.0874 19.252C16.1564 18.8475 16.2047 18.3203 16.2764 17.5322L17.3794 5.39746C17.436 4.77903 17.984 4.32316 18.6025 4.37939Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M7.37451 15.9995V11C7.37451 10.3788 7.87842 9.87526 8.49951 9.875C9.12083 9.875 9.62451 10.3787 9.62451 11V15.9995C9.62451 16.6208 9.12083 17.1245 8.49951 17.1245C7.87842 17.1242 7.37451 16.6207 7.37451 15.9995ZM12.3755 15.9995V11C12.3755 10.3787 12.8792 9.875 13.5005 9.875C14.1216 9.87526 14.6255 10.3788 14.6255 11V15.9995C14.6255 16.6207 14.1216 17.1242 13.5005 17.1245C12.8792 17.1245 12.3755 16.6208 12.3755 15.9995ZM12.585 0.875C13.0174 0.879157 13.425 0.903301 13.8096 1.02881L14.1157 1.14746C14.4155 1.28159 14.6931 1.46221 14.9375 1.68359L15.0811 1.82568C15.4034 2.16872 15.6379 2.59872 15.8984 3.05469L16.6528 4.37451H20L20.1157 4.38037C20.6825 4.43826 21.1248 4.91747 21.125 5.49951C21.125 6.08174 20.6827 6.5607 20.1157 6.61865L20 6.62451H2C1.37868 6.62451 0.875 6.12083 0.875 5.49951C0.875264 4.87842 1.37884 4.37451 2 4.37451H5.34717L6.32129 2.6709C6.53952 2.29735 6.76267 1.95525 7.0625 1.68359L7.31738 1.47705C7.58262 1.28327 7.87687 1.1312 8.19043 1.02881L8.38525 0.974609C8.71199 0.896341 9.05467 0.878464 9.41504 0.875H12.585ZM9.85742 3.125C9.29191 3.125 9.08123 3.13201 8.97266 3.14844L8.88916 3.16748C8.83075 3.18655 8.77503 3.21301 8.72217 3.24365L8.57275 3.35205C8.53704 3.38448 8.50137 3.42629 8.42773 3.54102L8.05566 4.1709L7.93848 4.37451H14.0615L13.9443 4.1709C13.6645 3.68114 13.554 3.50141 13.4858 3.41504L13.4272 3.35205C13.3815 3.31062 13.3309 3.27443 13.2778 3.24365L13.1108 3.16748C13.019 3.13753 12.8946 3.125 12.1426 3.125H9.85742Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </Button>
-            )}
+            {showDeleteButton && onDeleteComment && <CommentDeleteButton onClick={() => onDeleteComment(comment.id)} />}
           </div>
         </div>
 
@@ -260,30 +260,52 @@ export function CommentCard({
   );
 }
 
+/** The comment's delete control: drawn for real in the loaded card, and inert in its loading form. */
+function CommentDeleteButton({ onClick }: { onClick?: () => void }) {
+  return (
+    <Button
+      onClick={onClick}
+      variant="outline"
+      size="icon"
+      aria-label="Delete comment"
+      className="text-ods-text-primary"
+    >
+      <TrashIcon size={24} className="text-ods-text-primary" />
+    </Button>
+  );
+}
+
 /**
  * A comment tile while it is read, in the card's own boxes: the header it leads with (the vendor button's outline
  * with its logo box and a name bar, then a time bar; or the commenter's 48px avatar box with name and time bars), the
- * delete button's box, the title as one `text-h3` line, and the body as the tile's three `text-h4` lines.
+ * delete button drawn for real (inert), the title as one `text-h3` line, and the body as the tile's three `text-h4`
+ * lines (or, read in full, a typical run of `text-h4` lines with no fixed box).
  */
-export function CommentCardSkeleton({
+function CommentCardSkeleton({
   leadWith = 'vendor',
   showTitle = true,
   showDelete = false,
   compact = false,
+  fullBody = false,
   footer,
   className,
+  ...markers
 }: {
   leadWith?: 'vendor' | 'commenter';
   showTitle?: boolean;
-  /** Draw the delete button's box (the viewer may delete the comment). */
+  /** Draw the delete button, real and inert (the viewer may delete the comment). */
   showDelete?: boolean;
   compact?: boolean;
+  /** The body read in full (thread reading): a typical run of lines with no fixed box, as the loaded body has none. */
+  fullBody?: boolean;
   /** The card's footer row as the loaded card draws it (its static controls, such as a thread's Reply). */
   footer?: React.ReactNode;
   className?: string;
+  /** List markers (`data-loading-item`), as the loaded card carries them. */
+  [marker: `data-${string}`]: unknown;
 }) {
   return (
-    <div className={cn(COMMENT_CARD_FRAME, className)} aria-hidden>
+    <div className={cn(COMMENT_CARD_FRAME, className)} aria-hidden {...loadingItemProps(markers)}>
       <div className={COMMENT_CARD_HEADER}>
         <div className={COMMENT_CARD_LEAD}>
           {leadWith === 'vendor' ? (
@@ -309,7 +331,11 @@ export function CommentCardSkeleton({
           )}
         </div>
         <div className={COMMENT_CARD_ACTIONS}>
-          {showDelete && <UnifiedSkeleton className={cn(COMMENT_CARD_DELETE_BOX, 'rounded-md')} />}
+          {showDelete && (
+            <span inert aria-hidden className="inline-flex">
+              <CommentDeleteButton />
+            </span>
+          )}
         </div>
       </div>
       <div className={COMMENT_CARD_CONTENT}>
@@ -318,9 +344,13 @@ export function CommentCardSkeleton({
             <TextLineSkeleton type="h3" className="w-2/3" />
           </div>
         )}
-        <div className={commentBodyRow(compact)}>
-          <TextLineSkeleton type="h4" lines={3} className="w-full" />
-        </div>
+        {fullBody ? (
+          <TextLineSkeleton type="h4" lines={COMMENT_CARD_FULL_BODY_LINES} className="w-full" />
+        ) : (
+          <div className={commentBodyRow(compact)}>
+            <TextLineSkeleton type="h4" lines={3} className="w-full" />
+          </div>
+        )}
         {footer ? <div className={COMMENT_CARD_FOOTER}>{footer}</div> : null}
       </div>
     </div>

package/src/components/comment-thread.tsx

@@ -2,15 +2,15 @@
 
 import { ChevronDown } from 'lucide-react';
 import { type ReactNode, useState } from 'react';
-import { CommentCard, CommentCardSkeleton, type CommentCardComment } from './comment-card';
+import { CommentCard, type CommentCardComment } from './comment-card';
 import { CommentComposer } from './comment-composer';
 import { TextLineSkeleton } from './loading/unified-skeleton';
 import { Button } from './ui/button';
-import { useLoadingScope } from './ui/loading-scope';
+import { LOADING_NOOP, LoadingItems, useLoadingScope } from './ui/loading-scope';
 
 /**
- * The comment cards a thread's skeleton draws: its first fold (about three root cards fill a section's screen). Never
- * the number of comments held: in a loading scope those are not read.
+ * The comment cards a thread draws while it is read: a typical count (a thread with comments usually holds a few root
+ * comments; it has no page size). Never the number of comments held: in a loading scope those are not read.
  */
 export const COMMENT_THREAD_SKELETON_COUNT = 3;
 // The thread's and the block's boxes, read by them AND their skeletons.
@@ -46,6 +46,12 @@ export interface CommentThreadProps {
   /** Which header each ROOT card leads with; replies always lead with the commenter. */
   leadWith?: 'vendor' | 'commenter';
   onViewProduct?: (vendorSlug: string) => void;
+  /**
+   * Whether the thread's comments carry a title line (titled vendor reviews), for the rows the thread draws while it
+   * is read; a design-doc or prompt thread's comments have none. Loaded cards draw a title when their comment has one.
+   * Default true.
+   */
+  showTitle?: boolean;
 }
 
 /**
@@ -69,9 +75,19 @@ export function CommentThread({
   pending = false,
   leadWith,
   onViewProduct,
+  showTitle = true,
 }: CommentThreadProps) {
   if (useLoadingScope()) {
-    return <CommentThreadSkeleton count={COMMENT_THREAD_SKELETON_COUNT} leadWith={leadWith} reply={Boolean(onReply)} />;
+    return (
+      <CommentThreadSkeleton
+        count={COMMENT_THREAD_SKELETON_COUNT}
+        leadWith={leadWith}
+        showTitle={showTitle}
+        reply={Boolean(onReply)}
+        deletable={Boolean(onDelete)}
+        footerSlots={Boolean(renderActions || renderBadges)}
+      />
+    );
   }
   if (comments.length === 0) {
     return emptyLabel ? <p className="text-ods-text-secondary text-h6">{emptyLabel}</p> : null;
@@ -115,7 +131,7 @@ function CommentThreadRow({
   pending,
   leadWith,
   onViewProduct,
-}: Omit<CommentThreadProps, 'comments' | 'emptyLabel'> & { comment: ThreadComment }) {
+}: Omit<CommentThreadProps, 'comments' | 'emptyLabel' | 'showTitle'> & { comment: ThreadComment }) {
   const [replyOpen, setReplyOpen] = useState(false);
   const replies = comment.replies ?? [];
   const actions = renderActions?.(comment);
@@ -140,6 +156,7 @@ function CommentThreadRow({
     <CommentCard
       fullBody
       comment={comment}
+      data-loading-item
       leadWith={leadWith}
       onViewProduct={onViewProduct}
       onDeleteComment={onDelete ? id => void onDelete(id) : undefined}
@@ -178,15 +195,17 @@ function CommentThreadRow({
 }
 
 /**
- * A thread while it is read: `count` comment rows, each `CommentCardSkeleton` in the thread's own list, with the
+ * A thread while it is read: `count` comment rows, each `CommentCard loading` in the thread's own list, with the
  * root's Reply button drawn for real when the thread takes replies (a root's reply count, badges and actions are read,
  * so they are not drawn).
  */
-export function CommentThreadSkeleton({
+function CommentThreadSkeleton({
   count = COMMENT_THREAD_SKELETON_COUNT,
   leadWith = 'commenter',
   showTitle = true,
   reply = false,
+  deletable = false,
+  footerSlots = false,
 }: {
   count?: number;
   leadWith?: 'vendor' | 'commenter';
@@ -194,17 +213,38 @@ export function CommentThreadSkeleton({
   showTitle?: boolean;
   /** The thread takes replies (`CommentThread`'s `onReply`): each root's footer carries its Reply button. */
   reply?: boolean;
+  /** The thread deletes comments (`CommentThread`'s `onDelete`): each row holds its delete button, inert. */
+  deletable?: boolean;
+  /** The thread's roots carry badges or actions (`renderBadges` / `renderActions`): the footer row is drawn, their
+   *  read content one bar. */
+  footerSlots?: boolean;
 }) {
-  const footer = reply ? (
-    <span className={COMMENT_THREAD_ACTIONS}>
-      <ReplyButton />
-    </span>
-  ) : undefined;
+  const footer =
+    reply || footerSlots ? (
+      <>
+        {footerSlots && <TextLineSkeleton type="h6" className="w-20" />}
+        {reply && (
+          <span className={COMMENT_THREAD_ACTIONS}>
+            <ReplyButton />
+          </span>
+        )}
+      </>
+    ) : undefined;
   return (
     <div className={COMMENT_THREAD_LIST} aria-hidden="true" inert>
-      {Array.from({ length: count }, (_, i) => (
-        <CommentCardSkeleton key={i} leadWith={leadWith} showTitle={showTitle} showDelete={false} footer={footer} />
-      ))}
+      <LoadingItems count={count}>
+        {() => (
+          <CommentCard
+            loading
+            fullBody
+            data-loading-item
+            leadWith={leadWith}
+            titleRow={showTitle}
+            footer={footer}
+            onDeleteComment={deletable ? LOADING_NOOP : undefined}
+          />
+        )}
+      </LoadingItems>
     </div>
   );
 }
@@ -292,34 +332,3 @@ function CommentsBlockHeader({ title, open }: { title: string; open: boolean })
     </Button>
   );
 }
-
-/**
- * The comments section while it is read: its real title, the summary as a bar, `count` comment rows (none: the
- * block is collapsed) and, with `composer`, the root composer's real static controls (inert).
- */
-export function CommentsBlockSkeleton({
-  title,
-  count = 0,
-  composer = false,
-  leadWith,
-  showTitle,
-}: {
-  title: string;
-  count?: number;
-  composer?: boolean;
-  leadWith?: 'vendor' | 'commenter';
-  showTitle?: boolean;
-}) {
-  const open = count > 0 || composer;
-  return (
-    <div className={COMMENTS_BLOCK} aria-hidden>
-      <CommentsBlockHeader title={title} open={open} />
-      {count > 0 && <CommentThreadSkeleton count={count} leadWith={leadWith} showTitle={showTitle} />}
-      {composer && (
-        <div inert>
-          <CommentComposer onSubmit={() => false} />
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/docs/docs-hub-page.tsx

@@ -28,10 +28,6 @@ export interface DocsHubPageProps extends Omit<DocViewerProps, 'renderContent' |
    *  "Unsupported document type" message. */
   fallbackRenderer?: DocRenderer;
 
-  /** Loading skeleton picker. Defaults: `markdown` / `undefined` →
-   *  `<MarkdownSkeleton>`, everything else → `<EmbedSkeleton>`. */
-  renderSkeleton?: (documentType: DocumentType | undefined) => React.ReactNode;
-
   /** Defaults to `true` (the embeddable wrapper favors the chat-enabled
    *  experience). Only mounts the in-source RAG search bar
    *  (`<DocSearchBar>`) — does NOT require `ChatRuntimeContext`. */
@@ -82,7 +78,8 @@ const defaultFileRenderer: DocRenderer = content => (
   />
 );
 
-const defaultRenderSkeleton = (documentType: DocumentType | undefined) =>
+/** The page's own loading form per document type: the markdown article's, else the embed viewer's. */
+const documentLoadingForm = (documentType: DocumentType | undefined) =>
   !documentType || documentType === 'markdown' ? (
     <MarkdownSkeleton />
   ) : (
@@ -108,7 +105,6 @@ export function DocsHubPage({
   title = DEFAULT_TITLE,
   documentTypeRenderers,
   fallbackRenderer = defaultFallbackRenderer,
-  renderSkeleton = defaultRenderSkeleton,
   showAIChat = true,
   className = 'min-h-screen',
   sidebarLabel = 'DOCUMENTATION',
@@ -136,7 +132,7 @@ export function DocsHubPage({
       className={className}
       sidebarLabel={sidebarLabel}
       renderContent={renderContent}
-      renderSkeleton={renderSkeleton}
+      renderSkeleton={documentLoadingForm}
     />
   );
 }

package/src/components/docs/index.ts

@@ -6,8 +6,6 @@ export type { DocViewerProps } from './doc-viewer';
 export { DocsHubPage } from './docs-hub-page';
 export type { DocsHubPageProps, DocumentTypeRenderers } from './docs-hub-page';
 
-export { MarkdownSkeleton, EmbedSkeleton } from './skeletons';
-
 export { useDocumentTree } from './use-document-tree';
 export type { UseDocumentTreeConfig } from './use-document-tree';
 

package/src/components/embeds/embed-viewer-frame.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { FullscreenSwitchController } from '../../utils/fullscreen-switch';
 import { Button } from '../ui/button/button';
+import { useLoadingScope } from '../ui/loading-scope';
 import { EmbedIframe, EmbedLoadingSkeleton } from './embed-iframe';
 
 /**
@@ -73,7 +74,7 @@ export function EmbedViewerFrame({
   titleVariant = 'h3',
   actions,
   src,
-  isLoading,
+  isLoading: isLoadingGiven,
   emptyIcon,
   emptyMessage = 'Content not available',
   height,
@@ -84,6 +85,8 @@ export function EmbedViewerFrame({
   className,
   fullscreenControl,
 }: EmbedViewerFrameProps) {
+  // ONE switch: a page's loading scope, or the viewer still resolving where its frame points.
+  const isLoading = useLoadingScope() || !!isLoadingGiven;
   const frameRef = useRef<HTMLDivElement>(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
 

package/src/components/embeds/index.ts

@@ -14,7 +14,7 @@ export type { FigmaEmbedProps } from './figma-embed';
 export { ClaudeEmbed } from './claude-embed';
 export type { ClaudeEmbedProps, ClaudeEmbedKind } from './claude-embed';
 
-export { OGLinkPreview, OGLinkErrorBoundary, OGLinkPreviewSkeleton, OGLinkTileSkeleton } from './og-link-preview';
+export { OGLinkPreview, OGLinkErrorBoundary } from './og-link-preview';
 export type { OGLinkPreviewProps, OGData } from './og-link-preview';
 
 export { FileDownloadCard } from './file-download-card';

package/src/components/embeds/og-link-preview.tsx

@@ -197,7 +197,7 @@ const DEFAULT_ROW_CLASS = 'flex items-start gap-3';
  * A link preview while its page is scraped (or drawn in a loading scope): the `compact` (120px row) or `default`
  * (16:9 hero) card's frame, the media box, and bars for the title, description and source line.
  */
-export function OGLinkPreviewSkeleton({
+function OGLinkPreviewSkeleton({
   variant = 'default',
   image = true,
 }: {
@@ -274,7 +274,7 @@ const TILE_SOURCE_ROW_CLASS = 'flex min-w-0 items-center gap-1.5 text-h6';
 const TILE_HEADLINE_CLASS = 'text-h3';
 const TILE_EXCERPT_CLASS = 'text-h6';
 
-export function OGLinkTileSkeleton() {
+function OGLinkTileSkeleton() {
   return (
     <div className={TILE_FRAME_CLASS} aria-hidden>
       <div className={TILE_SOURCE_ROW_CLASS}>

package/src/components/faq/faq-section.tsx

@@ -12,11 +12,11 @@ import { serializeJsonLd } from '../../utils/common';
 import { faqSectionSlug, parseFaqHash, type FaqHashTarget } from '../../utils/faq-anchor';
 import { navigateSamePageHash, STICKY_HEADER_OFFSET_PX } from '../../utils/same-page-hash-nav';
 import { buildSuggestionUrl } from '../../utils/suggestion-url';
-import { FAQ_ACCORDION_SKELETON_ROWS, FaqAccordion, FaqAccordionSkeleton, type FaqItem } from '../faq-accordion';
+import { FAQ_ACCORDION_SKELETON_ROWS, FaqAccordion, type FaqItem } from '../faq-accordion';
 import { SECTION_HEADING_CLASS } from '../layout/page-heading';
 import { LoadingRegion } from '../loading/loading-region';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
-import { useLoadingScope } from '../ui/loading-scope';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
 import { FaqAskCard, faqAskCardShown, type FaqAskOptions } from './faq-ask-card';
 import { buildFaqJsonLdFromFaqs, type FaqSchemaOptions } from './json-ld';
 
@@ -487,6 +487,7 @@ function GroupedFaqList({
         return (
           <Link
             key={group.slug}
+            data-loading-item
             href={`#${group.slug}`}
             aria-current={isActive ? 'true' : undefined}
             onClick={e => handleJump(e, group.slug as string)}
@@ -656,7 +657,7 @@ export function FaqSection({
   );
 }
 
-export interface FaqSectionSkeletonProps extends Pick<
+interface FaqSectionSkeletonProps extends Pick<
   FaqSectionProps,
   'heading' | 'topic' | 'showTopic' | 'aside' | 'className' | 'id'
 > {
@@ -673,7 +674,7 @@ export interface FaqSectionSkeletonProps extends Pick<
  */
 const DEFAULT_SKELETON_SHAPE: FaqSkeletonShape = [{}];
 
-export function FaqSectionSkeleton({
+function FaqSectionSkeleton({
   heading,
   topic,
   showTopic = false,
@@ -687,19 +688,22 @@ export function FaqSectionSkeleton({
   const CategoryHeading = heading === null ? 'h2' : 'h3';
   const groups = shape.length > 0 ? shape : DEFAULT_SKELETON_SHAPE;
   const named = groups.filter(group => group.heading).length;
-  const pill = (i: number) => (
-    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton pills never reorder
-    <span key={i} className={cn(CATEGORY_PILL_CLASS, 'shrink-0 border-ods-border bg-ods-card')}>
-      <TextLineSkeleton type="inherit" as="span" className="w-24" />
-    </span>
+  const pills = (count: number) => (
+    <LoadingItems count={count}>
+      {() => (
+        <span className={cn(CATEGORY_PILL_CLASS, 'shrink-0 border-ods-border bg-ods-card')} data-loading-item>
+          <TextLineSkeleton type="inherit" as="span" className="w-24" />
+        </span>
+      )}
+    </LoadingItems>
   );
   const nav = navRow ? (
     <div className={CATEGORY_NAV_SKELETON_LINE_CLASS} aria-hidden>
-      {Array.from({ length: FAQ_NAV_SKELETON_PILLS }, (_, i) => pill(i))}
+      {pills(FAQ_NAV_SKELETON_PILLS)}
     </div>
   ) : named > 1 ? (
     <div className={CATEGORY_NAV_CLASS} aria-hidden>
-      {Array.from({ length: named }, (_, i) => pill(i))}
+      {pills(named)}
     </div>
   ) : undefined;
   const questions = (
@@ -713,7 +717,11 @@ export function FaqSectionSkeleton({
                 <TextLineSkeleton type="inherit" as="span" className="w-1/3" />
               </CategoryHeading>
             )}
-            <FaqAccordionSkeleton count={Math.max(1, group.rows ?? FAQ_SECTION_SKELETON_QUESTIONS)} />
+            <FaqAccordion
+              loading
+              items={[]}
+              skeletonCount={Math.max(1, group.rows ?? FAQ_SECTION_SKELETON_QUESTIONS)}
+            />
           </section>
         );
       })}

package/src/components/faq/index.ts

@@ -11,12 +11,10 @@
 // block and exposed via "./components/faq/json-ld" in package.json#exports.)
 export {
   FaqSection,
-  FaqSectionSkeleton,
   FAQ_SECTION_SKELETON_QUESTIONS,
   PAGE_FAQ_SECTION_ID,
   pageFaqProps,
   type FaqSectionProps,
-  type FaqSectionSkeletonProps,
   type FaqSkeletonGroup,
   type FaqSkeletonShape,
   type PageFaqSlot,