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

package/src/components/chat/utils/index.ts

@@ -82,7 +82,8 @@ export { decideNewTab, type DecideNewTabInput, type NavSurface, type RuntimeMode
 
 // Pure content helpers
 export { flattenAssistantContent } from './flatten-assistant-content';
-export { SCROLL_ANCHOR, type ScrollAnchor, SCROLL_ANCHOR_WIRE_KEY, parseScrollAnchor } from './scroll-anchor';
+export { SCROLL_ANCHOR_WIRE_KEY, parseScrollAnchor } from './scroll-anchor';
+export { SCROLL_ANCHOR, type ScrollAnchor } from '../types/message.types';
 export {
   AUTO_CONTINUATION_DIRECTIVE_PREFIX,
   buildAutoContinuationDirective,
@@ -157,7 +158,8 @@ export {
 // Library icon resolver — `icons-v2-generated`-backed, shared by the chat
 // empty-state chips, the slash-command autocomplete, AND the admin icon picker
 // (`ICON_OPTIONS`), so picked icons always display.
-export { resolveIcon, findIcon, ICON_ALIASES, ICON_OPTIONS, type IconComponent, type IconOption } from './icon-library';
+export { resolveIcon, findIcon, ICON_ALIASES, ICON_OPTIONS, type IconOption } from './icon-library';
+export { type IconComponent } from './icon-loading';
 export {
   SOURCE_ICON_NAMES,
   getSourceIconName,
@@ -165,7 +167,7 @@ export {
   getSourceLabel,
   DEFAULT_DOCUMENT_TYPE_TO_TABLE_ID,
   defaultTableIdForDocumentType,
-} from './source-icons';
+} from '../../../utils/source-icons';
 export {
   type SourceRowInput,
   type SourceRowContext,

package/src/components/chat/utils/scroll-anchor.ts

@@ -20,8 +20,6 @@
 
 import { SCROLL_ANCHOR, type ScrollAnchor } from '../types/message.types';
 
-export { SCROLL_ANCHOR, type ScrollAnchor };
-
 /** Wire-frame key for the `scrollAnchor` field on the metadata leading
  *  frame. Used as a computed property name on both the emit side
  *  (server) and the parse side (client) so a rename is one-file. */

package/src/components/chat/utils/source-row-cta.ts

@@ -27,10 +27,10 @@ import { getPlatformUrl } from '../../../platform-domains';
 import type { ComposeContentUrl } from '../../../utils/content-href';
 import { canonicalContentRefType } from '../../../utils/list-url';
 import { DOC_TABLE_TYPES } from '../../../utils/source-grouping';
+import { getSourceIconName } from '../../../utils/source-icons';
 import type { ChatRef } from '../chat-ref.types';
 import { safeHref } from './compact-card-classes';
 import { resolveIcon } from './icon-library';
-import { getSourceIconName } from './source-icons';
 
 /** Path sanitization — keep alphanumerics, slash, dash, dot, underscore;
  *  strip everything else. Defends against a hostile mapper returning a
@@ -155,10 +155,6 @@ function pickSourceIcon(sourceRepo: string | null, documentType: string | null |
   return { icon, iconLabel };
 }
 
-// Declared once in `utils/source-grouping`; re-exported so embedders that key
-// `docPlatformTargets` by it keep their import.
-export { DOC_TABLE_TYPES };
-
 /**
  * Only doc-table rows (DOC_TABLE_TYPES) fall back to doc-viewer navigation when no
  * `externalUrl` is set; the in-app/per-platform viewer can render them. Entity-table

package/src/components/comment-card.tsx

@@ -1,10 +1,18 @@
 '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 { TextLineSkeleton, UnifiedSkeleton } from './loading/unified-skeleton';
 import { Button } from './ui/button';
+import { useLoadingScope } from './ui/loading-scope';
 import { UserSummary } from './user-summary-stub';
-import { VendorDisplayButton } from './vendor-display-button';
+import {
+  VENDOR_DISPLAY_BUTTON_FRAME_CLASS,
+  VENDOR_DISPLAY_BUTTON_LOGO_CLASS,
+  VendorDisplayButton,
+} from './vendor-display-button';
 
 /** The comment shape every comment surface renders (vendor reviews, design-doc and prompt threads). */
 export interface CommentCardComment {
@@ -60,6 +68,24 @@ interface CommentCardProps {
   children?: React.ReactNode;
 }
 
+// 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';
+const COMMENT_CARD_HEADER =
+  'mb-3 flex w-full flex-col gap-3 min-[420px]:flex-row min-[420px]:items-center min-[420px]:justify-between min-[420px]:gap-2';
+const COMMENT_CARD_LEAD = 'flex min-w-0 flex-1 items-center gap-2';
+const COMMENT_CARD_ACTIONS = 'flex justify-start gap-2 min-[420px]:justify-end';
+const COMMENT_CARD_TIME = 'flex-shrink-0 whitespace-nowrap text-ods-text-secondary text-h6';
+const COMMENT_CARD_CONTENT = 'w-full max-w-full space-y-2 overflow-hidden';
+/** The card's footer row (a thread's reply count, badges and Reply), loaded and loading. */
+const COMMENT_CARD_FOOTER = 'flex flex-wrap items-center gap-2 pt-2';
+const commentTitleRow = (compact: boolean) => (compact ? 'flex h-[20px] items-center' : 'flex h-[24px] items-center');
+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;
+
 export function CommentCard({
   comment,
   onViewProduct,
@@ -92,32 +118,41 @@ export function CommentCard({
 
   const showDeleteButton = canUserDeleteComment();
 
+  if (useLoadingScope()) {
+    return (
+      <>
+        <CommentCardSkeleton
+          leadWith={leadWith}
+          showTitle={!!comment.title}
+          showDelete={showDeleteButton && !!onDeleteComment}
+          compact={compact}
+        />
+        {children}
+      </>
+    );
+  }
+
   return (
     <>
-      <div
-        className="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"
-        style={{ maxWidth: '100%', wordBreak: 'break-word' }}
-      >
+      <div className={COMMENT_CARD_FRAME} style={{ maxWidth: '100%', wordBreak: 'break-word' }}>
         {/* Comment Header */}
-        <div className="mb-3 flex w-full flex-col gap-3 min-[420px]:flex-row min-[420px]:items-center min-[420px]:justify-between min-[420px]:gap-2">
+        <div className={COMMENT_CARD_HEADER}>
           {/* Row 1: Info + Timestamp */}
-          <div className="flex min-w-0 flex-1 items-center gap-2">
+          <div className={COMMENT_CARD_LEAD}>
             {leadWith === 'vendor' && comment.vendor ? (
               <>
                 {/* Vendor Button - Icon + Name */}
                 <VendorDisplayButton vendor={comment.vendor} onClick={onViewProduct || (() => {})} />
 
                 {/* Timestamp */}
-                <span className="flex-shrink-0 whitespace-nowrap text-ods-text-secondary text-h6">
-                  {formatActivityTime(comment.createdAt)}
-                </span>
+                <span className={COMMENT_CARD_TIME}>{formatActivityTime(comment.createdAt)}</span>
               </>
             ) : comment.user ? (
               <UserSummary
                 name={comment.user.name}
                 email=""
                 compact
-                avatarSize={48}
+                avatarSize={COMMENT_CARD_AVATAR_PX}
                 subtitle={formatActivityTime(comment.createdAt)}
                 avatarUrl={comment.user.profilePicture ?? null}
                 mspPreview={
@@ -138,7 +173,7 @@ export function CommentCard({
           </div>
 
           {/* Row 2: Action Buttons */}
-          <div className="flex justify-start gap-2 min-[420px]:justify-end">
+          <div className={COMMENT_CARD_ACTIONS}>
             {/* Delete Button - shown when user can delete the comment */}
             {showDeleteButton && onDeleteComment && (
               <Button
@@ -170,12 +205,9 @@ export function CommentCard({
         </div>
 
         {/* Comment Content */}
-        <div
-          className="w-full max-w-full space-y-2 overflow-hidden"
-          style={{ maxWidth: '100%', wordBreak: 'break-word' }}
-        >
+        <div className={COMMENT_CARD_CONTENT} style={{ maxWidth: '100%', wordBreak: 'break-word' }}>
           {comment.title && (
-            <div className={compact ? 'flex h-[20px] items-center' : 'flex h-[24px] items-center'}>
+            <div className={commentTitleRow(compact)}>
               <h4
                 className="line-clamp-1 tracking-[-0.02em] text-ods-text-primary transition-colors text-h3 group-hover:text-ods-accent"
                 style={{
@@ -202,7 +234,7 @@ export function CommentCard({
               {comment.content}
             </p>
           ) : (
-            <div className={compact ? 'flex h-[60px] items-center' : 'flex h-[72px] items-center'}>
+            <div className={commentBodyRow(compact)}>
               <p
                 className="line-clamp-3 text-ods-text-primary text-h4"
                 style={{
@@ -220,10 +252,77 @@ export function CommentCard({
               </p>
             </div>
           )}
-          {footer ? <div className="flex flex-wrap items-center gap-2 pt-2">{footer}</div> : null}
+          {footer ? <div className={COMMENT_CARD_FOOTER}>{footer}</div> : null}
         </div>
       </div>
       {children}
     </>
   );
 }
+
+/**
+ * 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.
+ */
+export function CommentCardSkeleton({
+  leadWith = 'vendor',
+  showTitle = true,
+  showDelete = false,
+  compact = false,
+  footer,
+  className,
+}: {
+  leadWith?: 'vendor' | 'commenter';
+  showTitle?: boolean;
+  /** Draw the delete button's box (the viewer may delete the comment). */
+  showDelete?: boolean;
+  compact?: 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;
+}) {
+  return (
+    <div className={cn(COMMENT_CARD_FRAME, className)} aria-hidden>
+      <div className={COMMENT_CARD_HEADER}>
+        <div className={COMMENT_CARD_LEAD}>
+          {leadWith === 'vendor' ? (
+            <>
+              <div className={VENDOR_DISPLAY_BUTTON_FRAME_CLASS}>
+                <UnifiedSkeleton className={VENDOR_DISPLAY_BUTTON_LOGO_CLASS} />
+                <TextLineSkeleton type="h4" className="w-28" />
+              </div>
+              <TextLineSkeleton type="h6" className="w-16 shrink-0" />
+            </>
+          ) : (
+            <div className="flex min-w-0 items-center gap-3">
+              <UnifiedSkeleton
+                className="shrink-0 rounded-lg"
+                width={COMMENT_CARD_AVATAR_PX}
+                height={COMMENT_CARD_AVATAR_PX}
+              />
+              <div className="min-w-0 flex-1">
+                <TextLineSkeleton type="h4" className="w-32" />
+                <TextLineSkeleton type="h6" className="w-16" />
+              </div>
+            </div>
+          )}
+        </div>
+        <div className={COMMENT_CARD_ACTIONS}>
+          {showDelete && <UnifiedSkeleton className={cn(COMMENT_CARD_DELETE_BOX, 'rounded-md')} />}
+        </div>
+      </div>
+      <div className={COMMENT_CARD_CONTENT}>
+        {showTitle && (
+          <div className={commentTitleRow(compact)}>
+            <TextLineSkeleton type="h3" className="w-2/3" />
+          </div>
+        )}
+        <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,9 +2,24 @@
 
 import { ChevronDown } from 'lucide-react';
 import { type ReactNode, useState } from 'react';
-import { CommentCard, type CommentCardComment } from './comment-card';
+import { CommentCard, CommentCardSkeleton, 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';
+
+/**
+ * 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.
+ */
+export const COMMENT_THREAD_SKELETON_COUNT = 3;
+// The thread's and the block's boxes, read by them AND their skeletons.
+const COMMENT_THREAD_LIST = 'flex flex-col gap-[var(--spacing-system-sf)]';
+/** A root's actions at the end of its footer (Reply, then the surface's own), loaded and loading. */
+const COMMENT_THREAD_ACTIONS = 'ml-auto flex flex-wrap gap-[var(--spacing-system-xsf)]';
+const COMMENTS_BLOCK = 'space-y-[var(--spacing-system-sf)]';
+const COMMENTS_BLOCK_HEADER = 'px-0 text-ods-text-secondary hover:text-ods-text-primary';
+const commentsBlockChevron = (open: boolean) => `h-4 w-4 transition-transform ${open ? 'rotate-180' : ''}`;
 
 /** A root comment with its replies. Replies never nest further (single-level threads). */
 export interface ThreadComment extends CommentCardComment {
@@ -55,11 +70,14 @@ export function CommentThread({
   leadWith,
   onViewProduct,
 }: CommentThreadProps) {
+  if (useLoadingScope()) {
+    return <CommentThreadSkeleton count={COMMENT_THREAD_SKELETON_COUNT} leadWith={leadWith} reply={Boolean(onReply)} />;
+  }
   if (comments.length === 0) {
     return emptyLabel ? <p className="text-ods-text-secondary text-h6">{emptyLabel}</p> : null;
   }
   return (
-    <div className="flex flex-col gap-[var(--spacing-system-sf)]">
+    <div className={COMMENT_THREAD_LIST}>
       {comments.map(comment => (
         <CommentThreadRow
           key={comment.id}
@@ -78,6 +96,15 @@ export function CommentThread({
   );
 }
 
+/** A root's Reply button: static copy, drawn for real in the loaded thread and (inert) in its skeleton. */
+function ReplyButton({ onClick, disabled }: { onClick?: () => void; disabled?: boolean }) {
+  return (
+    <Button type="button" variant="outline" size="small-legacy" onClick={onClick} disabled={disabled}>
+      Reply
+    </Button>
+  );
+}
+
 function CommentThreadRow({
   comment,
   onReply,
@@ -101,18 +128,8 @@ function CommentThreadRow({
         </span>
       ) : null}
       {onReply || actions ? (
-        <span className="ml-auto flex flex-wrap gap-[var(--spacing-system-xsf)]">
-          {onReply ? (
-            <Button
-              type="button"
-              variant="outline"
-              size="small-legacy"
-              onClick={() => setReplyOpen(open => !open)}
-              disabled={pending}
-            >
-              Reply
-            </Button>
-          ) : null}
+        <span className={COMMENT_THREAD_ACTIONS}>
+          {onReply ? <ReplyButton onClick={() => setReplyOpen(open => !open)} disabled={pending} /> : null}
           {actions}
         </span>
       ) : null}
@@ -160,6 +177,38 @@ function CommentThreadRow({
   );
 }
 
+/**
+ * A thread while it is read: `count` comment rows, each `CommentCardSkeleton` 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({
+  count = COMMENT_THREAD_SKELETON_COUNT,
+  leadWith = 'commenter',
+  showTitle = true,
+  reply = false,
+}: {
+  count?: number;
+  leadWith?: 'vendor' | 'commenter';
+  /** The rows carry a title line (titled reviews); a design-doc thread's comments have none. */
+  showTitle?: boolean;
+  /** The thread takes replies (`CommentThread`'s `onReply`): each root's footer carries its Reply button. */
+  reply?: boolean;
+}) {
+  const footer = 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} />
+      ))}
+    </div>
+  );
+}
+
 export interface CommentsBlockProps {
   /** Header label, e.g. "Comments". */
   title: string;
@@ -180,6 +229,7 @@ export interface CommentsBlockProps {
  * (content behind an accordion is content readers miss).
  */
 export function CommentsBlock({ title, summary, defaultOpen = false, children, composer }: CommentsBlockProps) {
+  const loading = useLoadingScope();
   const [open, setOpen] = useState(defaultOpen);
   // New activity AFTER mount (a colleague's comment arrives) flips `defaultOpen`
   // to true and must expand the block; collapsing again stays the reader's call.
@@ -189,15 +239,29 @@ export function CommentsBlock({ title, summary, defaultOpen = false, children, c
     setSeenDefaultOpen(defaultOpen);
     if (defaultOpen) setOpen(true);
   }
+  // In a scope the header keeps its real title and its summary is a bar; the thread under it draws its own skeleton.
+  if (loading) {
+    return (
+      <div className={COMMENTS_BLOCK}>
+        <CommentsBlockHeader title={title} open={open} />
+        {open ? (
+          <>
+            {children}
+            {composer}
+          </>
+        ) : null}
+      </div>
+    );
+  }
   return (
-    <div className="space-y-[var(--spacing-system-sf)]">
+    <div className={COMMENTS_BLOCK}>
       <Button
         type="button"
         variant="transparent"
         size="small-legacy"
-        className="px-0 text-ods-text-secondary hover:text-ods-text-primary"
+        className={COMMENTS_BLOCK_HEADER}
         onClick={() => setOpen(value => !value)}
-        rightIcon={<ChevronDown className={`h-4 w-4 transition-transform ${open ? 'rotate-180' : ''}`} />}
+        rightIcon={<ChevronDown className={commentsBlockChevron(open)} />}
       >
         {`${title} · ${summary}`}
       </Button>
@@ -210,3 +274,52 @@ export function CommentsBlock({ title, summary, defaultOpen = false, children, c
     </div>
   );
 }
+
+/** The block's header while its summary is read: the real title, a bar for the summary. */
+function CommentsBlockHeader({ title, open }: { title: string; open: boolean }) {
+  return (
+    <Button
+      type="button"
+      variant="transparent"
+      size="small-legacy"
+      className={COMMENTS_BLOCK_HEADER}
+      rightIcon={<ChevronDown className={commentsBlockChevron(open)} />}
+      tabIndex={-1}
+      aria-hidden
+    >
+      {`${title} · `}
+      <TextLineSkeleton as="span" type="h6" className="inline-block w-20 align-middle" />
+    </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/doc-viewer.tsx

@@ -7,7 +7,6 @@ import type { DocContent, DocNode, DocRenderHandlers, DocSourceId } from '../../
 import { findDocNodeByPath } from '../../utils/doc-tree-nav';
 import { PageShell } from '../layout/article-detail-layout';
 import { PageLayout } from '../layout/page-layout';
-import { CategorySidebarSkeleton } from '../loading/page-layout-skeleton';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { MultiLevelNavigation, MobileNavigationDropdown } from '../navigation/multi-level-navigation';
 import { StickySectionNav } from '../navigation/sticky-section-nav';
@@ -140,6 +139,10 @@ export function DocViewer(props: DocViewerProps) {
   return <DocViewerContent {...props} />;
 }
 
+/** The "On this page" column's heading: static copy, drawn for real loaded and loading. */
+const ON_THIS_PAGE_LABEL = 'ON THIS PAGE';
+const ON_THIS_PAGE_HEADING_CLASS = 'mb-4 font-semibold text-ods-text-secondary text-h5';
+
 function DocViewerContent({
   sourceId,
   renderContent,
@@ -279,7 +282,10 @@ function DocViewerContent({
       <PageLayout title={title} subtitle={subtitle} titleSize="h1" titleWrap backButton={backCfg ?? undefined}>
         <div className="flex w-full flex-col gap-10">
           {/* Where the document is mirrored from: the first row under the title, as on every synced page. */}
-          {synced && <DataSyncLine sync={content?.sync} loading={isLoadingContent && !content} />}
+          {/* Loading until the document is here: the structure read comes first, so the server's HTML holds the line too. */}
+          {synced && (
+            <DataSyncLine sync={content?.sync} loading={!content && (isLoadingContent || isLoadingStructure)} />
+          )}
           {showAIChat && (
             <DocSearchBar
               placeholder={`Search ${sidebarLabel?.toLowerCase() || 'documents'}...`}
@@ -305,40 +311,36 @@ function DocViewerContent({
             <div className="flex flex-1 flex-col items-start gap-6 content-lg:flex-row content-lg:gap-10">
               <div className="w-full content-lg:w-[320px] content-lg:shrink-0">
                 <div className="content-lg:sticky content-lg:top-20">
-                  {isLoadingStructure ? (
-                    <CategorySidebarSkeleton />
-                  ) : (
-                    <>
-                      <PersistentMobileDropdown isLoading={false}>
-                        <MobileNavigationDropdown
+                  {/* While the tree is read, the dropdown and the sidebar are their own skeletons (`isLoading`), each at
+                      its breakpoint, so the loading state is the loaded tree's frame. */}
+                  <PersistentMobileDropdown isLoading={false}>
+                    <MobileNavigationDropdown
+                      nodes={structure}
+                      selectedPath={selectedPath}
+                      expandedNodes={expandedNodes}
+                      onNodeClick={selectNode}
+                      onToggleExpand={toggleNode}
+                      isLoading={isLoadingStructure}
+                      folderIndexFile={folderIndexFile}
+                    />
+                  </PersistentMobileDropdown>
+
+                  <PersistentSidebar isLoading={false}>
+                    <div className="hidden content-lg:block">
+                      <div className="space-y-4">
+                        <h3 className="font-semibold text-ods-text-secondary text-h5">{sidebarLabel}</h3>
+                        <MultiLevelNavigation
                           nodes={structure}
                           selectedPath={selectedPath}
                           expandedNodes={expandedNodes}
                           onNodeClick={selectNode}
                           onToggleExpand={toggleNode}
-                          isLoading={false}
+                          isLoading={isLoadingStructure}
                           folderIndexFile={folderIndexFile}
                         />
-                      </PersistentMobileDropdown>
-
-                      <PersistentSidebar isLoading={false}>
-                        <div className="hidden content-lg:block">
-                          <div className="space-y-4">
-                            <h3 className="font-semibold text-ods-text-secondary text-h5">{sidebarLabel}</h3>
-                            <MultiLevelNavigation
-                              nodes={structure}
-                              selectedPath={selectedPath}
-                              expandedNodes={expandedNodes}
-                              onNodeClick={selectNode}
-                              onToggleExpand={toggleNode}
-                              isLoading={false}
-                              folderIndexFile={folderIndexFile}
-                            />
-                          </div>
-                        </div>
-                      </PersistentSidebar>
-                    </>
-                  )}
+                      </div>
+                    </div>
+                  </PersistentSidebar>
                 </div>
               </div>
 
@@ -378,7 +380,7 @@ function DocViewerContent({
                   {isMarkdownContent && (isLoadingContent || isLoadingStructure) && (
                     <div className="hidden content-lg:block">
                       <div className="sticky top-24">
-                        <UnifiedSkeleton className="mb-5 h-[14px] w-28 rounded" />
+                        <h3 className={ON_THIS_PAGE_HEADING_CLASS}>{ON_THIS_PAGE_LABEL}</h3>
                         <div className="space-y-0">
                           {[130, 170, 190, 220, 110, 200, 80, 100, 120, 140, 90].map((w, i) => (
                             <div
@@ -398,7 +400,7 @@ function DocViewerContent({
                   {showStickyNav && content && stickyNavSections.length > 0 && !isLoadingContent && (
                     <div className="hidden content-lg:block">
                       <div className="sticky top-24">
-                        <h3 className="mb-4 font-semibold text-ods-text-secondary text-h5">ON THIS PAGE</h3>
+                        <h3 className={ON_THIS_PAGE_HEADING_CLASS}>{ON_THIS_PAGE_LABEL}</h3>
                         <StickySectionNav
                           sections={stickyNavSections}
                           activeSection={activeSection}