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

package/src/components/layout/page-container.tsx

@@ -2,7 +2,9 @@
 
 import type React from 'react';
 import { cn } from '../../utils/cn';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import type { ActionsMenuGroup } from '../ui/actions-menu';
+import { useLoadingScope } from '../ui/loading-scope';
 import { PageActions, type PageActionButton } from '../ui/page-actions';
 import { BackButton } from './back-button';
 import { accentSentenceMarks } from './page-heading';
@@ -136,8 +138,9 @@ function isAdvancedProps(props: PageContainerProps): props is AdvancedPageContai
  * </PageContainer>
  */
 export function PageContainer(props: PageContainerProps) {
+  const inScope = useLoadingScope();
   if (isAdvancedProps(props)) {
-    return renderAdvancedPageContainer(props);
+    return renderAdvancedPageContainer(props, inScope);
   } else {
     return renderLegacyPageContainer(props);
   }
@@ -175,24 +178,54 @@ function renderLegacyPageContainer({
   );
 }
 
+/** The header's title and subtitle lines, read by the header and by their skeletons. */
+const PAGE_CONTAINER_TITLE_CLASS = 'text-ods-text-primary text-h2';
+const PAGE_CONTAINER_SUBTITLE_CLASS = 'text-ods-text-secondary text-h6';
+
+/** A page title that is read, while it is: one bar of the title's line, at its type step. */
+export function PageContainerTitleSkeleton({ className }: { className?: string }) {
+  return <TextLineSkeleton type="h2" className={cn('w-64 max-w-full', className)} />;
+}
+
+/** A page subtitle that is read, while it is: one bar of the subtitle's line. */
+export function PageContainerSubtitleSkeleton({ className }: { className?: string }) {
+  return <TextLineSkeleton type="h6" className={cn('w-80 max-w-full', className)} />;
+}
+
 // Advanced implementation (from UI component)
-function renderAdvancedPageContainer({
-  children,
-  variant = 'content',
-  title,
-  subtitle,
-  backButton,
-  headerActions,
-  headerContent,
-  actions,
-  actionsVariant,
-  menuActions,
-  padding = 'none',
-  background = 'transparent',
-  className,
-  contentClassName,
-  showHeader = true,
-}: AdvancedPageContainerProps) {
+function renderAdvancedPageContainer(
+  {
+    children,
+    variant = 'content',
+    title,
+    subtitle,
+    backButton,
+    headerActions,
+    headerContent,
+    actions,
+    actionsVariant,
+    menuActions,
+    padding = 'none',
+    background = 'transparent',
+    className,
+    contentClassName,
+    showHeader = true,
+  }: AdvancedPageContainerProps,
+  inScope = false,
+) {
+  // A title or subtitle that is READ arrives as '' in a page's loading state (an absent one is undefined): it is
+  // drawn as a bar of its line, so the header keeps its rows. A given one is the page's own words, drawn as is.
+  const titleNode = title ? (
+    <PageTitle className={PAGE_CONTAINER_TITLE_CLASS}>{accentSentenceMarks(title)}</PageTitle>
+  ) : inScope && title === '' ? (
+    <PageContainerTitleSkeleton />
+  ) : null;
+  const subtitleNode = subtitle ? (
+    <div className={PAGE_CONTAINER_SUBTITLE_CLASS}>{subtitle}</div>
+  ) : inScope && subtitle === '' ? (
+    <PageContainerSubtitleSkeleton />
+  ) : null;
+
   // Determine PageActions variant based on page variant
   const getActionsVariant = () => {
     if (actionsVariant) return actionsVariant;
@@ -245,10 +278,10 @@ function renderAdvancedPageContainer({
             )}
 
             {/* Title */}
-            {title && <PageTitle className="text-ods-text-primary text-h2">{accentSentenceMarks(title)}</PageTitle>}
+            {titleNode}
 
             {/* Subtitle */}
-            {subtitle && <div className="text-ods-text-secondary text-h6">{subtitle}</div>}
+            {subtitleNode}
           </div>
 
           {/* Header Actions */}
@@ -275,8 +308,8 @@ function renderAdvancedPageContainer({
               />
             )}
 
-            {title && <PageTitle className="text-ods-text-primary text-h2">{accentSentenceMarks(title)}</PageTitle>}
-            {subtitle && <div className="text-ods-text-secondary text-h6">{subtitle}</div>}
+            {titleNode}
+            {subtitleNode}
           </div>
 
           {/* Header Actions */}
@@ -303,7 +336,7 @@ function renderAdvancedPageContainer({
               />
             )}
 
-            {title && <PageTitle className="text-ods-text-primary text-h2">{accentSentenceMarks(title)}</PageTitle>}
+            {titleNode}
           </div>
 
           {/* Header Actions */}
@@ -320,10 +353,10 @@ function renderAdvancedPageContainer({
     // Default content header
     return (
       <div className="flex items-center justify-between gap-4 content-md:flex-col content-md:items-start content-md:justify-start content-lg:flex-row content-lg:items-center content-lg:justify-between">
-        {(title || subtitle) && (
+        {(titleNode || subtitleNode) && (
           <div className="flex min-w-0 flex-1 flex-col gap-1">
-            {title && <PageTitle className="text-ods-text-primary text-h2">{accentSentenceMarks(title)}</PageTitle>}
-            {subtitle && <div className="text-ods-text-secondary text-h6">{subtitle}</div>}
+            {titleNode}
+            {subtitleNode}
           </div>
         )}
 
@@ -399,8 +432,5 @@ export const ContentPageContainer = (props: Omit<AdvancedPageContainerProps, 'va
   <PageContainer {...props} variant="content" />
 );
 
-// Re-export PageActionButton type for convenience
-export type { PageActionButton } from '../ui/page-actions';
-
 /** @deprecated Use `PageLayout` from `'../layout/page-layout'` instead. */
 export default PageContainer;

package/src/components/layout/page-data-sync.tsx

@@ -19,16 +19,41 @@ interface PageDataSyncState {
 
 interface PageDataSyncContextValue {
   state: PageDataSyncState;
-  report: (state: PageDataSyncState) => void;
+  /** The page's records are mirrored, so its list states a sync (`PageDataSyncProvider`'s `stated`). */
+  stated: boolean;
+  report: (state: PageDataSyncState | ((prev: PageDataSyncState) => PageDataSyncState)) => void;
 }
 
 const PageDataSyncContext = createContext<PageDataSyncContextValue | null>(null);
 
 const EMPTY: PageDataSyncState = { sync: null, loading: false };
+/**
+ * Before the list below has reported (its first paint, the server's HTML), the row is loading: a page that has the
+ * row has a list that states its sync, so its line's skeleton holds the row instead of the row appearing later.
+ */
+const NOT_REPORTED: PageDataSyncState = { sync: null, loading: true };
 
-export function PageDataSyncProvider({ children }: { children: ReactNode }) {
-  const [state, report] = useState<PageDataSyncState>(EMPTY);
-  const value = useMemo(() => ({ state, report }), [state]);
+export function PageDataSyncProvider({
+  stated = true,
+  children,
+}: {
+  /**
+   * The page's records are mirrored from another system, so its list states a sync and the row holds its line's
+   * skeleton while it loads. `false`: the host authors the records; nothing is drawn while loading, and a line a host
+   * states anyway is an optional part (`data-loading-optional`). Default `true`.
+   */
+  stated?: boolean;
+  children: ReactNode;
+}) {
+  const [state, report] = useState<PageDataSyncState>(stated ? NOT_REPORTED : EMPTY);
+  // The children's effects run before this one: a list that states its sync has reported by now. When none has, the
+  // page states no sync and the row's skeleton goes (a page whose list never reports must not hold it forever).
+  useEffect(() => {
+    // After the commit (a task, not inside the effect): every list mounted with the page has reported by then.
+    const timer = setTimeout(() => report(prev => (prev === NOT_REPORTED ? EMPTY : prev)), 0);
+    return () => clearTimeout(timer);
+  }, []);
+  const value = useMemo(() => ({ state, report, stated }), [state, stated]);
   return <PageDataSyncContext.Provider value={value}>{children}</PageDataSyncContext.Provider>;
 }
 
@@ -39,7 +64,17 @@ export function PageDataSyncProvider({ children }: { children: ReactNode }) {
 export function PageDataSyncRow({ inline = false }: { inline?: boolean }) {
   const context = useContext(PageDataSyncContext);
   if (!context) return null;
-  return <DataSyncLine sync={context.state.sync} loading={context.state.loading} inline={inline} />;
+  const line = (
+    <DataSyncLine sync={context.state.sync} loading={context.state.loading} stated={context.stated} inline={inline} />
+  );
+  // A host that authors its records states no sync while loading; a line it states anyway is optional.
+  return context.stated ? (
+    line
+  ) : (
+    <div className="contents" data-loading-optional="">
+      {line}
+    </div>
+  );
 }
 
 /**

package/src/components/layout/page-heading.tsx

@@ -1,5 +1,6 @@
 import { Children, Fragment, cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';
 import { getPlatformBrandClasses } from '../../utils/platform-identity';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 
 /**
  * THE page-title style — the ODS `text-h1` token (`--font-size-h1-title` =
@@ -231,6 +232,25 @@ export interface SectionHeadingProps {
   className?: string;
 }
 
+/**
+ * THE eyebrow: the small label over a heading (Azeret Mono, uppercase, in the accent).
+ * `SectionHeading` draws it, and so does any heading that is not a `SectionHeading`
+ * (a call-to-action band's label), so a change to the eyebrow lands everywhere.
+ */
+export function SectionEyebrow({
+  children,
+  platform,
+  tone = 'accent',
+  className,
+}: {
+  children: ReactNode;
+  platform?: string | null;
+  tone?: HeadingAccentTone;
+  className?: string;
+}) {
+  return <span className={['text-h5', headingAccentClass(platform, tone), className].filter(Boolean).join(' ')}>{children}</span>;
+}
+
 /**
  * THE heading block of a page section or hero: an eyebrow, the heading with its
  * accent punctuation, an intro, and an optional action at the end of the row.
@@ -252,7 +272,7 @@ export function SectionHeading({
   const accentClassName = headingAccentClass(platform, tone);
   const layout = SECTION_HEADING_LAYOUT[level];
   const Tag = presentational ? 'div' : level === 'page' ? 'h1' : 'h2';
-  const eyebrowNode = eyebrow ? <span className={`text-h5 ${accentClassName}`}>{eyebrow}</span> : null;
+  const eyebrowNode = eyebrow ? <SectionEyebrow platform={platform} tone={tone}>{eyebrow}</SectionEyebrow> : null;
   const headingText = (
     <>
       {accentSentenceMarks(title, platform, tone)}
@@ -295,3 +315,66 @@ export function SectionHeading({
     </div>
   );
 }
+
+export interface SectionHeadingSkeletonProps {
+  level?: 'page' | 'section';
+  /** The eyebrow: static copy, drawn as it is. */
+  eyebrow?: ReactNode;
+  /** The title bar's width (a width class). Default `w-2/3`. */
+  titleWidth?: string;
+  /** The intro's lines: `true` is two. Omitted: no intro. */
+  intro?: boolean | 1 | 2 | 3;
+  /** Something at the far end of the row, drawn as given. */
+  action?: ReactNode;
+  platform?: string | null;
+  tone?: HeadingAccentTone;
+  className?: string;
+}
+
+/**
+ * A heading whose title and intro are read data (a category's name and description), while they are read: the same
+ * stack, the eyebrow for real, a one-line bar at the heading's type step and a bar per intro line at the intro's.
+ * No heading element is drawn: the loaded heading is the page's one.
+ */
+export function SectionHeadingSkeleton({
+  level = 'section',
+  eyebrow,
+  titleWidth = 'w-2/3',
+  intro,
+  action,
+  platform,
+  tone = 'accent',
+  className,
+}: SectionHeadingSkeletonProps) {
+  const layout = SECTION_HEADING_LAYOUT[level];
+  const introLines = intro === true ? 2 : intro || 0;
+  const stack = (
+    <div className={layout.stack} aria-hidden>
+      {eyebrow ? (
+        <SectionEyebrow platform={platform} tone={tone}>
+          {eyebrow}
+        </SectionEyebrow>
+      ) : null}
+      <div className={layout.heading}>
+        <TextLineSkeleton type="inherit" className={titleWidth} />
+      </div>
+      {introLines > 0 ? (
+        <div className={layout.intro}>
+          {Array.from({ length: introLines }, (_, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: skeleton lines never reorder
+            <TextLineSkeleton key={i} type="inherit" className={i === introLines - 1 && introLines > 1 ? 'w-2/3' : 'w-full'} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+  if (!action) return className ? <div className={className}>{stack}</div> : stack;
+  return (
+    <div
+      className={`flex flex-wrap items-end justify-between gap-[var(--spacing-system-mf)]${className ? ` ${className}` : ''}`}
+    >
+      {stack}
+      {action}
+    </div>
+  );
+}

package/src/components/layout/page-layout.tsx

@@ -48,7 +48,7 @@ import type React from 'react';
 import { cn } from '../../utils/cn';
 import type { ActionsMenuGroup } from '../ui/actions-menu';
 import type { PageActionButton } from '../ui/page-actions';
-import { TitleBlock } from './title-block';
+import { TitleBlock, type TitleSkeletonLines } from './title-block';
 
 export interface PageLayoutProps {
   children: React.ReactNode;
@@ -84,6 +84,8 @@ export interface PageLayoutProps {
    *  ellipsis clamp (forwarded to `TitleBlock`). For content detail pages whose h1 is CMS
    *  data of arbitrary length. Additive + default-preserving. */
   titleWrap?: boolean;
+  /** With `titleWrap`, the loading title's lines per breakpoint (forwarded to `TitleBlock`). */
+  titleSkeletonLines?: TitleSkeletonLines;
 }
 
 /**
@@ -111,6 +113,7 @@ export function PageLayout({
   loadingActions,
   subtitleRow,
   titleWrap,
+  titleSkeletonLines,
 }: PageLayoutProps) {
   const hasActions = actions && actions.length > 0;
   const needsBottomPadding = hasActions && actionsVariant === 'primary-buttons';
@@ -135,6 +138,7 @@ export function PageLayout({
           loadingActions={loadingActions}
           subtitleRow={subtitleRow}
           titleWrap={titleWrap}
+          titleSkeletonLines={titleSkeletonLines}
         />
       )}
 
@@ -150,8 +154,4 @@ export function PageLayout({
     </div>
   );
 }
-
-export type { PageActionButton } from '../ui/page-actions';
-export { TitleBlock, TITLE_BLOCK_MIN_HEIGHT } from './title-block';
-export type { TitleBlockProps } from './title-block';
 export default PageLayout;

package/src/components/layout/title-block.tsx

@@ -79,15 +79,22 @@
  * a `div` inside a `p` is auto-closed by the HTML parser, which would split the
  * subtitle paragraph and desync hydration. The `titleWrap` branch is untouched
  * (wrapped text never clips, so it never needs a tooltip).
+ *
+ * SANCTIONED EXCEPTION (2026-10, explicit human sign-off): loading scopes. In a
+ * `LoadingScope` a title or subtitle that is READ arrives as '' (an absent one
+ * is undefined) and is drawn exactly as `loading` draws it: its bar inside the
+ * real `h1`/`p`. A given title or subtitle is the page's own words, drawn as
+ * is. Outside a scope every caller is byte-identical.
  * ========================================================================== */
 
 import type React from 'react';
 import { useIsTruncated } from '../../hooks/ui/use-is-truncated';
 import { cn } from '../../utils/cn';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import type { ActionsMenuGroup } from '../ui/actions-menu';
 import { EntityImage } from '../ui/entity-image';
 import { FloatingTooltip } from '../ui/floating-tooltip';
+import { useLoadingScope } from '../ui/loading-scope';
 import { PageActions, type PageActionButton } from '../ui/page-actions';
 import { BackButton } from './back-button';
 import { PageTitle } from './page-picture';
@@ -157,6 +164,18 @@ export interface TitleBlockProps {
    *  ellipsis clamp. For content detail pages whose h1 is CMS data of arbitrary length.
    *  Additive + default-preserving: omit it and every existing caller is byte-identical. */
   titleWrap?: boolean;
+  /**
+   * With `titleWrap`: the lines a typical title of the page takes per breakpoint, drawn by the loading title (a
+   * record's title is read; a long one growing past them is a settle). Absent: one bar.
+   */
+  titleSkeletonLines?: TitleSkeletonLines;
+}
+
+/** Lines a wrapping title's skeleton draws: on a phone, from `content-md`, from `content-lg`. */
+export interface TitleSkeletonLines {
+  phone: number;
+  md: number;
+  lg: number;
 }
 
 /**
@@ -202,8 +221,17 @@ export function TitleBlock({
   loadingActions,
   subtitleRow = 'when-set',
   titleWrap = false,
+  titleSkeletonLines,
 }: TitleBlockProps) {
-  const hasSubtitleRow = !!subtitle || subtitleRow === 'always' || (subtitleRow === 'while-loading' && !!loading);
+  // In a loading scope a read title / subtitle ('' there) is drawn as `loading` draws it.
+  const scoped = useLoadingScope();
+  const titleLoading = !!loading || (scoped && title === '');
+  const subtitleLoading = !!loading || (scoped && subtitle === '');
+  const hasSubtitleRow =
+    !!subtitle ||
+    subtitleRow === 'always' ||
+    (subtitleRow === 'while-loading' && !!loading) ||
+    (scoped && subtitle === '');
   const hasActions = actions && actions.length > 0;
   const hasMenuActions = !!menuActions && menuActions.some(g => g.items.length > 0);
   const titleClass = titleSize === 'h1' ? 'text-h1' : 'text-h2';
@@ -215,19 +243,43 @@ export function TitleBlock({
   // Exactly one title element renders per pass, so one ref covers every branch.
   // The tooltip arms itself only on real clipping — repeating a fully visible
   // title back to the user is noise, and `titleWrap`/loading never clip at all.
-  const { ref: titleRef, isTruncated: titleTruncated } = useIsTruncated<HTMLHeadingElement>(loading ? null : title);
-  const { ref: subtitleRef, isTruncated: subtitleTruncated } = useIsTruncated<HTMLParagraphElement>(
-    loading ? null : subtitle,
+  const { ref: titleRef, isTruncated: titleTruncated } = useIsTruncated<HTMLHeadingElement>(
+    titleLoading ? null : title,
   );
-  const titleNode = loading ? (
-    <UnifiedSkeleton
-      as="span"
-      aria-hidden
-      className={cn(TITLE_TEXT_SKELETON_CLASS, skeletonSize.width, skeletonSize.height)}
-    />
-  ) : (
-    title
+  const { ref: subtitleRef, isTruncated: subtitleTruncated } = useIsTruncated<HTMLParagraphElement>(
+    subtitleLoading ? null : subtitle,
   );
+  const titleNode =
+    titleLoading && titleWrap && titleSkeletonLines ? (
+      <>
+        <TextLineSkeleton
+          type="inherit"
+          as="span"
+          lines={titleSkeletonLines.phone}
+          className="w-full content-md:hidden"
+        />
+        <TextLineSkeleton
+          type="inherit"
+          as="span"
+          lines={titleSkeletonLines.md}
+          className="hidden w-full content-md:flex content-lg:hidden"
+        />
+        <TextLineSkeleton
+          type="inherit"
+          as="span"
+          lines={titleSkeletonLines.lg}
+          className="hidden w-full content-lg:flex"
+        />
+      </>
+    ) : titleLoading ? (
+      <UnifiedSkeleton
+        as="span"
+        aria-hidden
+        className={cn(TITLE_TEXT_SKELETON_CLASS, skeletonSize.width, skeletonSize.height)}
+      />
+    ) : (
+      title
+    );
 
   return (
     <div
@@ -256,16 +308,19 @@ export function TitleBlock({
         className={cn(
           'flex min-w-0 flex-1 flex-col justify-center gap-[var(--spacing-system-xs)] content-md:max-w-full content-md:flex-none',
           TITLE_BLOCK_MIN_HEIGHT,
+          // A wrapping title's loading lines stand for a title that fills the row (its typical lines are full ones), so the
+          // column takes the row's width: sized to content it would shrink to the bars' minimum.
+          titleLoading && titleWrap && titleSkeletonLines && 'content-md:w-full',
         )}
       >
         {backButton && (
           <BackButton onClick={backButton.onClick} label={backButton.label} className="hidden content-md:inline-flex" />
         )}
-        {image || hasSubtitleRow || loading ? (
+        {image || hasSubtitleRow || titleLoading ? (
           <div className="flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]">
             {image && <EntityImage src={image.src} alt={image.alt} fallbackText={image.alt || title} />}
             <div className="flex min-w-0 flex-1 flex-col justify-center">
-              {(loading || title) &&
+              {(titleLoading || title) &&
                 (titleAdornment ? (
                   <div className="flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]">
                     {/* `min-w-0` moves onto the tooltip's wrapper: the wrapper is
@@ -302,9 +357,9 @@ export function TitleBlock({
                   <p
                     ref={subtitleRef}
                     className="truncate text-ods-text-secondary text-h6"
-                    aria-hidden={!loading && !subtitle ? true : undefined}
+                    aria-hidden={!subtitleLoading && !subtitle ? true : undefined}
                   >
-                    {loading ? (
+                    {subtitleLoading ? (
                       <UnifiedSkeleton
                         as="span"
                         aria-hidden

package/src/components/loading/category-vendor-selector-skeleton.tsx

@@ -10,6 +10,10 @@ interface CategoryVendorSelectorSkeletonProps {
   className?: string;
 }
 
+/**
+ * @deprecated Render the selector itself inside a `LoadingScope`: its parts draw their own skeletons. Kept so hosts on an older release keep compiling; nothing in the lib uses it.
+ */
+// loading-standard-ok: deprecated re-export kept for external consumers
 export function CategoryVendorSelectorSkeleton({
   region = true,
   subcategories = 3,

package/src/components/loading/deprecated-layout-skeletons.tsx

@@ -0,0 +1,133 @@
+import { cn } from '../../utils/cn';
+import { CardSkeletonGrid } from './card-skeleton';
+import { LoadingRegion } from './loading-region';
+import { UnifiedSkeleton } from './unified-skeleton';
+
+interface LoadingLayoutProps {
+  className?: string;
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+}
+
+/**
+ * @deprecated Draw the blog list itself: its cards draw their own skeletons in a `LoadingScope`. Kept so hosts on an
+ * older release keep compiling.
+ *
+ * Blog Card Grid Skeleton - Always displays exactly 4 blog card skeletons
+ * Used for consistent blog page layout with predictable height
+ */
+// loading-standard-ok: deprecated re-export kept for external consumers
+export function BlogCardGridSkeleton({ className, region = true }: LoadingLayoutProps) {
+  return (
+    <div className={cn('space-y-6', className)}>
+      <CardSkeletonGrid count={4} variant="blog" region={region} className="grid-cols-1 content-md:grid-cols-2" />
+    </div>
+  );
+}
+
+/**
+ * @deprecated The Slack community section is the host's own component, which draws its own skeleton. Kept so hosts
+ * on an older release keep compiling.
+ *
+ * Slack Community Section Skeleton
+ * Matches SlackCommunity component structure with title, channel list, and chat interface
+ */
+// loading-standard-ok: deprecated re-export kept for external consumers
+export function SlackCommunitySkeleton({ region = true }: { region?: boolean } = {}) {
+  return (
+    <LoadingRegion
+      label="Loading the Slack community"
+      as="section"
+      announce={region}
+      className="w-full bg-ods-bg px-4 py-12 content-md:px-20 content-md:py-20 content-lg:px-20"
+    >
+      {/* Frame 651 Container */}
+      <div className="flex w-full flex-col gap-4 content-md:gap-6">
+        {/* Title Skeleton */}
+        <div className="w-full">
+          <UnifiedSkeleton className="h-8 max-w-md rounded-lg content-md:h-12 content-lg:h-14" />
+        </div>
+
+        {/* Content Area - Channel List + Chat Interface */}
+        <div className="flex w-full min-w-0 flex-col gap-4 content-md:gap-6 content-lg:flex-row content-lg:items-start content-lg:justify-end">
+          {/* Channel List Skeleton */}
+          <div className="flex w-full flex-shrink-0 flex-col overflow-hidden rounded border border-ods-border bg-ods-bg content-lg:w-[290px] content-lg:max-w-[290px]">
+            <div className="space-y-4 p-4">
+              {/* Header */}
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <UnifiedSkeleton className="h-4 w-24 rounded" />
+                  <UnifiedSkeleton className="h-3 w-16 rounded" />
+                </div>
+                <UnifiedSkeleton className="h-3 w-32 rounded" />
+              </div>
+
+              {/* Channels */}
+              <div className="flex flex-col gap-1">
+                <UnifiedSkeleton className="mb-2 h-3 w-16 rounded" />
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <div key={i} className="flex min-h-[48px] items-center gap-2 px-2 py-3">
+                    <UnifiedSkeleton className="h-4 w-4 rounded" />
+                    <div className="flex-1">
+                      <UnifiedSkeleton className="mb-1 h-3 w-24 rounded" />
+                      <UnifiedSkeleton className="h-2 w-16 rounded" />
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Stats */}
+              <div className="mt-2 border-t border-ods-border pt-3">
+                <div className="space-y-2">
+                  <div className="flex justify-between">
+                    <UnifiedSkeleton className="h-3 w-16 rounded" />
+                    <UnifiedSkeleton className="h-3 w-8 rounded" />
+                  </div>
+                  <div className="flex justify-between">
+                    <UnifiedSkeleton className="h-3 w-20 rounded" />
+                    <UnifiedSkeleton className="h-3 w-8 rounded" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Chat Interface Skeleton */}
+          <div className="flex h-[450px] min-h-[450px] min-w-0 flex-1 flex-col rounded-lg border border-ods-border bg-ods-card content-md:h-[500px] content-md:min-h-[500px] content-lg:h-[600px] content-lg:min-h-[600px]">
+            {/* Header */}
+            <div className="flex h-[56px] flex-shrink-0 items-center justify-between border-b border-ods-border bg-ods-bg p-4 content-md:h-[60px] content-md:p-6">
+              <div className="flex items-center gap-2">
+                <UnifiedSkeleton className="h-3 w-3 rounded content-md:h-4 content-md:w-4" />
+                <UnifiedSkeleton className="h-3 w-24 rounded content-md:h-4 content-md:w-32" />
+              </div>
+              <UnifiedSkeleton className="h-3 w-12 rounded content-md:w-16" />
+            </div>
+
+            {/* Messages */}
+            <div className="min-h-[280px] flex-1 space-y-3 overflow-hidden bg-ods-bg p-4 content-md:min-h-[320px] content-md:space-y-4 content-md:p-6 content-lg:min-h-[420px]">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className="flex gap-2 content-md:gap-3">
+                  <UnifiedSkeleton className="h-10 w-10 flex-shrink-0 rounded-lg content-md:h-12 content-md:w-12" />
+                  <div className="flex-1">
+                    <div className="mb-1 flex items-center gap-2">
+                      <UnifiedSkeleton className="h-3 w-16 rounded content-md:w-20" />
+                      <UnifiedSkeleton className="h-3 w-12 rounded content-md:w-16" />
+                    </div>
+                    <UnifiedSkeleton className="h-3 w-full rounded content-md:h-4" />
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Input Area */}
+            <div className="h-[72px] flex-shrink-0 border-t border-ods-border bg-ods-card p-4 content-md:h-[80px] content-md:p-6">
+              <div className="flex items-end justify-center gap-3 content-md:justify-end">
+                <UnifiedSkeleton className="h-10 w-28 rounded-lg content-md:h-12 content-md:w-32" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </LoadingRegion>
+  );
+}