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

package/src/components/loading/index.ts

@@ -1,19 +1,7 @@
 'use client';
 
-// Page layout skeletons
-export {
-  SearchContainerSkeleton,
-  CategorySidebarSkeleton,
-  BreadcrumbSkeleton,
-  BreadcrumbLinkSkeleton,
-  ResultsHeaderSkeleton,
-  VendorGridSkeleton,
-} from './page-layout-skeleton';
-
-// Card skeleton components
-export { CardSkeleton, CardSkeletonGrid } from './card-skeleton';
-
-// Unified skeleton components
+// The skeleton PARTS a component draws its own loading form from (a component switches itself; nothing here is a
+// whole component's or a whole view's skeleton).
 export {
   UnifiedSkeleton,
   TextSkeleton,
@@ -25,29 +13,11 @@ export {
 // New unified loading components
 export { ContentLoadingContainer, useContentLoading } from '../content-loading-container';
 
-// Profile system loading skeleton
-export { ProfileLoadingSkeleton } from '../profile/ProfileLoadingSkeleton';
-
-export { CategoryCardSkeleton } from './category-card-skeleton';
-
-// Deprecated (kept for hosts on an older release; a component draws its own skeleton now)
-export { MspProfileFormSkeleton } from './msp-profile-form-skeleton';
-export { SettingsFormSkeleton, type SettingsFormSkeletonProps } from './settings-form-skeleton';
-export { CategoryVendorSelectorSkeleton } from './category-vendor-selector-skeleton';
-export { BlogCardGridSkeleton, SlackCommunitySkeleton } from './deprecated-layout-skeletons';
-
-export { WizardLayoutSkeleton } from './wizard-layout-skeleton';
-
 // Note: OpenmspHeartbeatLoader is a client-only component and should be
 // imported directly from "./openmsp-heartbeat" in client components. Do NOT
 // export it here, otherwise server components that import this index will
 // break due to client-only code.
 
 export { LoadingRegion, type LoadingRegionProps } from './loading-region';
-
-export { MarginReportSkeleton } from './margin-report-skeleton';
-
-// Organization & Device skeleton components
-export { OrganizationIconSkeleton } from './organization-icon-skeleton';
-export { OrganizationCardSkeleton, OrganizationCardSkeletonGrid } from './organization-card-skeleton';
-export { DeviceCardSkeleton, DeviceCardSkeletonGrid } from './device-card-skeleton';
+export { LoadingStatus } from '../ui/loading-scope';
+export { LoadingFallback, LoadingSuspense } from './loading-fallback';

package/src/components/loading/loading-fallback.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { type ElementType, type ReactNode, Suspense } from 'react';
+import { AnnouncedLoadingScope } from '../ui/loading-scope';
+
+/**
+ * A Suspense fallback drawn by the components themselves: the SAME component the boundary waits on, rendered in a
+ * `LoadingScope`, where it draws its own skeleton and reads nothing. A page never picks a component's
+ * `<Name>Skeleton`:
+ *
+ *   <Suspense fallback={<LoadingFallback><Dashboard /></LoadingFallback>}><Dashboard /></Suspense>
+ *
+ * ONE element: the scope's own (`LoadingScope` with `as`, `className`): busy, inert and hidden from assistive
+ * technology, adding no wrapper a flex parent would lay out. The status that announces it once sits beside it
+ * (visually hidden, outside the hidden region, so it is still read), and is left out inside an outer scope, which has
+ * already said it. `status={false}` leaves the status out: an inline part (a chip, a mention in a sentence) whose
+ * loading the surrounding region already announces, or that is too small to announce.
+ */
+export function LoadingFallback({
+  label = 'Loading the page',
+  status = true,
+  as,
+  className,
+  children,
+}: {
+  label?: string;
+  /** Announce the loading state (default). `false`: an inline part, announced by its region or not at all. */
+  status?: boolean;
+  /** The region's element (a `contents` box keeps a flex parent's layout, e.g. inside a modal). */
+  as?: ElementType;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <AnnouncedLoadingScope label={label} status={status} as={as} className={className}>
+      {children}
+    </AnnouncedLoadingScope>
+  );
+}
+
+/**
+ * The one Suspense boundary whose fallback is its own children in a loading scope: what every screen wrote out as
+ * `<Suspense fallback={<LoadingFallback label={…}>{x}</LoadingFallback>}>{x}</Suspense>`, with the child twice.
+ *
+ *   <LoadingSuspense label="Loading the tenants"><TenantList /></LoadingSuspense>
+ *   <LoadingSuspense label="Loading the script" fallback={<ScriptView script={null} />}><ScriptReader /></LoadingSuspense>
+ *   <LoadingSuspense status={false} as="span"><MentionChip id={id} /></LoadingSuspense>
+ */
+export function LoadingSuspense({
+  label,
+  status,
+  as,
+  className,
+  fallback,
+  children,
+}: {
+  label?: string;
+  /** `false`: no announcement (an inline part); see `LoadingFallback`. */
+  status?: boolean;
+  as?: ElementType;
+  className?: string;
+  /**
+   * What the boundary draws while its children suspend, when that is not the children themselves (a reader whose view
+   * is a separate component: `fallback={<ThingView thing={null} />}`). Drawn in the same loading scope. Default: the
+   * children.
+   */
+  fallback?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <LoadingFallback label={label} status={status} as={as} className={className}>
+          {fallback ?? children}
+        </LoadingFallback>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}

package/src/components/loading/loading-region.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-import { useLoadingScope } from '../ui/loading-scope';
+import { LoadingStatus, useLoadingScope } from '../ui/loading-scope';
 
 /**
  * THE container of a loading state: the one thing a screen reader hears while it loads.
@@ -51,11 +51,7 @@ export function LoadingRegion({
   // `announce` that flips at runtime does not remount the content (and drop its state and focus).
   return (
     <Tag aria-busy={announce ? 'true' : undefined} className={className} {...props}>
-      {announce && status && (
-        <span role="status" aria-live="polite" className="sr-only">
-          {label}
-        </span>
-      )}
+      {announce && status && <LoadingStatus label={label} />}
       {children}
     </Tag>
   );

package/src/components/log-severity-dot.tsx

@@ -1,7 +1,10 @@
+'use client';
+
 import { forwardRef } from 'react';
 import { type LogSeverityDotProps, LOG_SEVERITY_COLORS, LOG_SEVERITY_LABELS } from '../types/logs.types';
 import { cn } from '../utils/cn';
 import { UnifiedSkeleton } from './loading/unified-skeleton';
+import { useLoadingScope } from './ui/loading-scope';
 
 /** The dot's box and the dot inside it, per size, read by the dot and by its skeleton. */
 const SEVERITY_BOX_CLASS = { sm: 'w-4 h-4', md: 'w-6 h-6', lg: 'w-8 h-8' } as const;
@@ -9,7 +12,7 @@ const SEVERITY_DOT_CLASS = { sm: 'w-2 h-2', md: 'w-3 h-3', lg: 'w-4 h-4' } as co
 const SEVERITY_FRAME_CLASS = 'relative flex shrink-0 items-center justify-center';
 
 /** The dot while its log is read: the dot's own box, the dot a circle of the dot's size. */
-export function LogSeverityDotSkeleton({ size = 'md', className }: Pick<LogSeverityDotProps, 'size' | 'className'>) {
+function LogSeverityDotSkeleton({ size = 'md', className }: Pick<LogSeverityDotProps, 'size' | 'className'>) {
   return (
     <span className={cn(SEVERITY_FRAME_CLASS, SEVERITY_BOX_CLASS[size], className)} aria-hidden>
       <UnifiedSkeleton variant="circular" className={SEVERITY_DOT_CLASS[size]} />
@@ -18,7 +21,9 @@ export function LogSeverityDotSkeleton({ size = 'md', className }: Pick<LogSever
 }
 
 export const LogSeverityDot = forwardRef<HTMLDivElement, LogSeverityDotProps>(
-  ({ severity, size = 'md', className }, ref) => {
+  ({ severity, size = 'md', className, loading }, ref) => {
+    // ONE switch: while its log is read (`loading`, or a loading scope) the dot is its own loading form.
+    if (useLoadingScope() || loading || !severity) return <LogSeverityDotSkeleton size={size} className={className} />;
     return (
       <div
         ref={ref}

package/src/components/logs-list.tsx

@@ -4,8 +4,9 @@ import { cn } from '../utils/cn';
 import { formatDateTimeYmd } from '../utils/format';
 import { LoadingRegion } from './loading/loading-region';
 import { TextLineSkeleton } from './loading/unified-skeleton';
-import { LogSeverityDot, LogSeverityDotSkeleton } from './log-severity-dot';
+import { LogSeverityDot } from './log-severity-dot';
 import { ToolIcon } from './tool-icon';
+import { LoadingItems } from './ui/loading-scope';
 
 // UTC-pinned so the server and every client agree (React #418), through the one
 // renderer rather than hand-built `getUTC*` strings.
@@ -26,8 +27,8 @@ const LOGS_LIST_SKELETON_ROWS = 6;
 /** A log row while it is read: the severity dot's box, the title and the time as bars. */
 function LogCardSkeleton() {
   return (
-    <div className={LOG_ROW_CLASS} aria-hidden>
-      <LogSeverityDotSkeleton size="md" />
+    <div className={LOG_ROW_CLASS} aria-hidden data-loading-item>
+      <LogSeverityDot loading size="md" />
       <div className={LOG_ROW_TEXT_CLASS}>
         <TextLineSkeleton type="h6" className="w-3/4" />
         <div className={LOG_META_ROW_CLASS}>
@@ -45,7 +46,7 @@ const LogCard: FC<{
   onClick?: () => void;
 }> = ({ log, isLast, showConnector, onClick }) => {
   return (
-    <div className="relative">
+    <div className="relative" data-loading-item>
       <div
         className={cn(LOG_ROW_CLASS, 'cursor-pointer transition-colors hover:bg-ods-bg-hover/50')}
         onClick={onClick}
@@ -116,10 +117,7 @@ export const LogsList = forwardRef<HTMLDivElement, LogsListProps>(
       return (
         <div ref={ref} className={cn(LOG_FRAME_CLASS, getContainerClasses(), className)} style={getContainerStyles()}>
           <LoadingRegion label="Loading logs" className={LOG_SCROLL_CLASS}>
-            {Array.from({ length: skeletonRows }, (_, i) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-              <LogCardSkeleton key={i} />
-            ))}
+            <LoadingItems count={skeletonRows}>{() => <LogCardSkeleton />}</LoadingItems>
           </LoadingRegion>
         </div>
       );

package/src/components/meeting-scheduler/booking-form.tsx

@@ -51,7 +51,7 @@ import {
   ToggleGroupItem,
 } from '../ui';
 import { HoneypotField } from '../ui/honeypot-field';
-import { useLoadingScope } from '../ui/loading-scope';
+import { LOADING_NOOP, useLoadingScope } from '../ui/loading-scope';
 import { TOGGLE_SIZE_CLASS } from '../ui/toggle';
 
 /**
@@ -440,7 +440,7 @@ const builtInId = (name: string) => `ms-${name.replace(/[A-Z]/g, m => `-${m.toLo
 export interface BookingFormProps {
   /** The link's availability; null while it is read (the form is then its skeleton). */
   availability: MeetingAvailability | null;
-  /** The link is still being read: the form draws its own skeleton (`BookingFormSkeleton`), as in a loading scope. */
+  /** The link is still being read: the form draws its own loading state, as in a loading scope. */
   loading?: boolean;
   meetingId: string;
   /** Absent in `deferSlot` mode — the slot is chosen AFTER these answers. */
@@ -539,7 +539,7 @@ export function BookingForm(props: BookingFormProps) {
   const { availability } = props;
   if (inScope || props.loading || !availability) {
     return (
-      <BookingFormSkeleton
+      <BookingFormPending
         fieldRows={props.fieldRows}
         optionalFields={props.optionalFields}
         fieldCopy={props.fieldCopy}
@@ -993,7 +993,7 @@ function BookingFormBody({
  * cannot know: a textarea row is taller than its placeholder (the rows carry no
  * type), and a HubSpot `legalConsent` block only exists once availability lands.
  */
-export function BookingFormSkeleton({
+function BookingFormPending({
   fieldRows,
   optionalFields,
   fieldCopy,
@@ -1052,7 +1052,7 @@ export function BookingFormSkeleton({
         <CheckboxBlock
           id={consentId}
           checked={false}
-          onCheckedChange={() => {}}
+          onCheckedChange={LOADING_NOOP}
           required
           label={
             consent === true ? <TextLineSkeleton type="inherit" as="span" className="w-64 max-w-full" /> : consent.label

package/src/components/meeting-scheduler/context-panel.tsx

@@ -5,11 +5,12 @@ import { cn } from '../../utils/cn';
 import { formatDurationCompact } from '../../utils/format';
 import { BackButton } from '../layout/back-button';
 import { InteractiveSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
-import { SquareAvatar, AvatarStack, Button } from '../ui';
-import { AutocompleteSkeleton } from '../ui/autocomplete';
-import { useLoadingScope } from '../ui/loading-scope';
-import { SquareAvatarSkeleton } from '../ui/square-avatar';
+import { Button } from '../ui';
+import { LOADING_NOOP, LoadingItems, useLoadingScope } from '../ui/loading-scope';
 import { TimezoneSelect } from '../ui/timezone-select';
+import { HostIdentity } from './host-identity';
+
+/** The skeleton's timezone picker is drawn in its loading form, where nothing can be picked. */
 
 /**
  * ContextPanel — the "who / what / how long" side of the scheduler card
@@ -108,9 +109,6 @@ const BACK_BUTTON_CLASS = 'py-0';
  *  section headers. */
 const FIELD_LABEL_CLASS = 'text-h4 text-ods-text-primary';
 
-/** One host's row and its text column, read by the panel and by its skeleton. */
-const HOST_ROW_CLASS = 'flex items-center gap-[var(--spacing-system-xs)]';
-const HOST_TEXT_CLASS = 'flex min-w-0 flex-col';
 /** The static duration line beside the host. */
 const DURATION_LINE_CLASS = 'shrink-0 text-ods-text-secondary text-h6';
 /** The "Duration" field and its chips row. */
@@ -124,7 +122,7 @@ const TIMEZONE_WIDE_ONLY_CLASS = 'content-max-lg:hidden';
  * STATIC labels ("Duration", "Timezone") render REAL; only data-driven
  * content (host identity, duration chips, the zone value) is skeleton.
  */
-export function ContextPanelSkeleton({
+function ContextPanelSkeleton({
   className,
   onBack,
   backLabel = 'Back',
@@ -161,13 +159,7 @@ export function ContextPanelSkeleton({
       <div className={STRIP_BODY}>
         <div className={STRIP_MAIN}>
           <div className={IDENTITY_ROW}>
-            <div className={HOST_ROW_CLASS}>
-              <SquareAvatarSkeleton variant="round" size="sm" />
-              <div className={HOST_TEXT_CLASS}>
-                <TextLineSkeleton type="h4" className="w-32" />
-                <TextLineSkeleton type="h6" className="w-24" />
-              </div>
-            </div>
+            <HostIdentity hosts={[]} loading />
             {durations <= 1 && <TextLineSkeleton type="h6" className="w-20 shrink-0" />}
           </div>
           {title && <TextLineSkeleton type="h3" className="w-3/5" />}
@@ -176,9 +168,9 @@ export function ContextPanelSkeleton({
             <div className={DURATION_FIELD_CLASS}>
               <p className={FIELD_LABEL_CLASS}>Duration</p>
               <div className={DURATION_CHIPS_CLASS}>
-                {Array.from({ length: durations }, (_, i) => (
-                  <InteractiveSkeleton.Button key={i} size="small-legacy" className="w-16" />
-                ))}
+                <LoadingItems count={durations}>
+                  {() => <InteractiveSkeleton.Button data-loading-item size="small-legacy" className="w-16" />}
+                </LoadingItems>
               </div>
             </div>
           )}
@@ -186,7 +178,7 @@ export function ContextPanelSkeleton({
         {timezone !== 'hidden' && (
           <div className={cn(STRIP_ASIDE, timezone === 'wide' && TIMEZONE_WIDE_ONLY_CLASS)}>
             <p className={FIELD_LABEL_CLASS}>Timezone</p>
-            <AutocompleteSkeleton />
+            <TimezoneSelect value={null} loading onChange={LOADING_NOOP} />
           </div>
         )}
       </div>
@@ -242,34 +234,7 @@ export function SchedulerContextPanel({
       <div className={STRIP_BODY}>
         <div className={STRIP_MAIN}>
           <div className={IDENTITY_ROW}>
-            {/* Host identity: full rows up to 3 hosts; larger teams (round-robin
-                links can carry many members) collapse to a stacked-avatar cluster
-                + count so the panel can never overflow. */}
-            {hosts.length > 0 && hosts.length <= 3 && (
-              <div className="flex flex-col gap-[var(--spacing-system-s)]">
-                {hosts.map(host => (
-                  <div key={host.name} className={HOST_ROW_CLASS}>
-                    <SquareAvatar
-                      variant="round"
-                      size="sm"
-                      src={host.avatarUrl ?? undefined}
-                      alt={host.name}
-                      fallback={host.name}
-                    />
-                    <div className={HOST_TEXT_CLASS}>
-                      <p className="truncate text-ods-text-primary text-h4">{host.name}</p>
-                      {host.title && <p className="truncate text-ods-text-secondary text-h6">{host.title}</p>}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-            {hosts.length > 3 && (
-              <div className="flex flex-col gap-[var(--spacing-system-xs)]">
-                <AvatarStack people={hosts} max={4} size="lg" label="Hosts" />
-                <p className="text-ods-text-secondary text-h6">{hosts.length} hosts on this calendar</p>
-              </div>
-            )}
+            <HostIdentity hosts={hosts} />
 
             {locked || durationsMs.length <= 1
               ? // Post-selection, or a link that offers one length: a static line,
@@ -292,6 +257,7 @@ export function SchedulerContextPanel({
                 {durationsMs.map(ms => (
                   <Button
                     key={ms}
+                    data-loading-item
                     variant={selectedDurationMs === ms ? undefined : 'outline'}
                     size="small-legacy"
                     disabled={disabled}

package/src/components/meeting-scheduler/directory.tsx

@@ -34,7 +34,7 @@ import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { PaginationSkeleton } from '../pagination';
 import { PersistentPaginationWrapper } from '../persistent-pagination';
 import { AvatarStack, StatusBadge } from '../ui';
-import { useLoadingScope } from '../ui/loading-scope';
+import { LoadingItems, loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 
 export interface MeetingSchedulerDirectoryProps {
   /** Endpoints prefix, default '' (same-origin `/api/meetings`). */
@@ -106,6 +106,7 @@ function DirectoryRow({
 
   return (
     <Link
+      data-loading-item
       href={`${bookingBasePath}/${link.slug}`}
       prefetch={false}
       className="block rounded-lg text-inherit no-underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent"
@@ -147,9 +148,9 @@ function DirectoryRow({
  * Same-shell loading row (co-located-skeleton convention): the row's frame, "Next available" and the chevron box
  * real, the title, subtitle, audience chip, hosts and next time as shapes.
  */
-export function MeetingSchedulerDirectoryRowSkeleton() {
+function MeetingSchedulerDirectoryRowSkeleton(props: { [marker: `data-${string}`]: unknown } = {}) {
   return (
-    <div className={ROW_FRAME_CLASS} aria-hidden>
+    <div className={ROW_FRAME_CLASS} aria-hidden {...loadingItemProps(props)}>
       <div className={ROW_TITLE_COLUMN_CLASS}>
         <TextLineSkeleton type="h3" className="w-1/2" />
         <TextLineSkeleton type="h6" className="w-1/3" />
@@ -168,7 +169,7 @@ export function MeetingSchedulerDirectoryRowSkeleton() {
 }
 
 /** The directory while its links are read: `pageSize` row skeletons in the reserved rows area, and the pager. */
-export function MeetingSchedulerDirectorySkeleton({
+function MeetingSchedulerDirectorySkeleton({
   pageSize = MEETING_DIRECTORY_PAGE_SIZE,
   className,
 }: {
@@ -178,9 +179,7 @@ export function MeetingSchedulerDirectorySkeleton({
   return (
     <div className={cn('flex flex-col', className)} aria-hidden>
       <div className={ROWS_CLASS} style={{ minHeight: directoryRowsMinHeight(pageSize) }}>
-        {Array.from({ length: pageSize }, (_, i) => (
-          <MeetingSchedulerDirectoryRowSkeleton key={i} />
-        ))}
+        <LoadingItems count={pageSize}>{() => <MeetingSchedulerDirectoryRowSkeleton data-loading-item />}</LoadingItems>
       </div>
       <div className={cn(PAGINATION_SLOT_CLASS, PAGINATION_SLOT_H)}>
         <PaginationSkeleton />

package/src/components/meeting-scheduler/host-identity.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import type { MeetingHost } from '../../schemas/meeting-booking-schema';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { AvatarStack, SquareAvatar } from '../ui';
+import { useLoadingScope } from '../ui/loading-scope';
+
+/** The host list, one host's row and its text column, read by the identity and by its skeleton. */
+const HOST_LIST_CLASS = 'flex min-w-0 flex-col gap-[var(--spacing-system-s)]';
+const HOST_ROW_CLASS = 'flex items-center gap-[var(--spacing-system-xs)]';
+const HOST_TEXT_CLASS = 'flex min-w-0 flex-col';
+/** A large team (more than {@link MAX_HOST_ROWS} hosts): the stacked avatars over the count. */
+const HOST_TEAM_CLASS = 'flex min-w-0 flex-col gap-[var(--spacing-system-xs)]';
+/** Hosts drawn as full rows; a larger team (round-robin links can carry many) collapses to a stack and a count. */
+const MAX_HOST_ROWS = 3;
+
+/**
+ * Who the meeting is with: full rows (avatar, name, title) up to three hosts, a stacked-avatar cluster and a count for
+ * a larger team, so neither the modal's strip nor the context panel can overflow. ONE switch: in a loading scope, or
+ * while the meeting is read (`loading`), it is its own {@link HostIdentitySkeleton}. Read by the modal header and the
+ * context panel.
+ */
+export function HostIdentity({ hosts, loading = false }: { hosts: MeetingHost[]; loading?: boolean }) {
+  if (useLoadingScope() || loading) return <HostIdentitySkeleton />;
+  if (hosts.length === 0) return null;
+  if (hosts.length > MAX_HOST_ROWS) {
+    return (
+      <div className={HOST_TEAM_CLASS}>
+        <AvatarStack people={hosts} max={4} size="lg" label="Hosts" />
+        <p className="text-ods-text-secondary text-h6">{hosts.length} hosts on this calendar</p>
+      </div>
+    );
+  }
+  return (
+    <div className={HOST_LIST_CLASS}>
+      {hosts.map(host => (
+        <div key={host.name} className={HOST_ROW_CLASS} data-loading-item>
+          <SquareAvatar
+            variant="round"
+            size="sm"
+            src={host.avatarUrl ?? undefined}
+            alt={host.name}
+            fallback={host.name}
+          />
+          <div className={HOST_TEXT_CLASS}>
+            <p className="truncate text-ods-text-primary text-h4">{host.name}</p>
+            {host.title && <p className="truncate text-ods-text-secondary text-h6">{host.title}</p>}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** The identity while the meeting is read: one host's row (a typical link has one host), its name and title as bars. */
+function HostIdentitySkeleton() {
+  return (
+    <div className={HOST_LIST_CLASS}>
+      <div className={HOST_ROW_CLASS} data-loading-item>
+        <SquareAvatar loading variant="round" size="sm" />
+        <div className={HOST_TEXT_CLASS}>
+          <TextLineSkeleton type="h4" className="w-32" />
+          <TextLineSkeleton type="h6" className="w-24" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/meeting-scheduler/index.tsx

@@ -59,7 +59,7 @@ import { formatDurationCompact, formatDateWithTimezone } from '../../utils/forma
 import { BackButton } from '../layout/back-button';
 import { LoadingRegion } from '../loading/loading-region';
 import { Alert, AlertDescription, Button } from '../ui';
-import { useLoadingScope } from '../ui/loading-scope';
+import { LOADING_NOOP, useLoadingScope } from '../ui/loading-scope';
 import { BookingForm, DEFAULT_SUBMIT_LABEL, type BookingFieldRow, type BookingFormProps } from './booking-form';
 import { Confirmation } from './confirmation';
 import { SchedulerContextPanel } from './context-panel';
@@ -285,7 +285,7 @@ export const MEETING_SCHEDULER_H = 'content-md:h-[34.375rem] content-lg:h-[23.75
  * question the HubSpot link declares is on the page instead of scrolling inside
  * a card cut off mid-consent. What keeps that from jumping is the form's own
  * footprint discipline: the SSR seed renders the real form on first paint, and
- * the cold-start `BookingFormSkeleton` draws the same rows through the same grid.
+ * the cold-start `BookingForm` (its own loading form) draws the same rows through the same grid.
  *
  * Hosts read it through `SCHEDULER_FLOW_PRESETS[flow].height`, never directly.
  */
@@ -426,7 +426,6 @@ function isNativelyBookable(availability: MeetingAvailability): boolean {
 const MODAL_STACK_CLASS = 'flex flex-col gap-[var(--spacing-system-l)]';
 const MODAL_CARD_CLASS = 'flex flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card';
 const MODAL_STEP_CLASS = 'flex flex-col p-[var(--spacing-system-m)]';
-const NOOP = () => undefined;
 const NOOP_SUBMIT = () => Promise.resolve();
 
 /** The modal's form draws the name pair first and the email under it, as its design does. */
@@ -1049,11 +1048,11 @@ export function HubSpotMeetingScheduler({
                   slots={slots}
                   timezone={timezone}
                   monthOffset={monthOffset}
-                  onMonthOffsetChange={NOOP}
+                  onMonthOffsetChange={LOADING_NOOP}
                   selectedSlot={null}
-                  onSelectSlot={NOOP}
+                  onSelectSlot={LOADING_NOOP}
                   selectedDay={null}
-                  onSelectDay={NOOP}
+                  onSelectDay={LOADING_NOOP}
                 />
               </div>
             )
@@ -1206,7 +1205,6 @@ export function HubSpotMeetingScheduler({
 // package exports `./components/meeting-scheduler`, not the file beneath it).
 export {
   BookingForm,
-  BookingFormSkeleton,
   formFieldOptionLabel,
   type BookingFormProps,
   type BookingFieldRow,
@@ -1217,8 +1215,6 @@ export {
 
 export {
   MeetingSchedulerDirectory,
-  MeetingSchedulerDirectoryRowSkeleton,
-  MeetingSchedulerDirectorySkeleton,
   MEETING_DIRECTORY_PAGE_SIZE,
   type MeetingSchedulerDirectoryProps,
 } from './directory';

package/src/components/meeting-scheduler/modal-header.tsx

@@ -4,11 +4,12 @@ import type { MeetingHost } from '../../schemas/meeting-booking-schema';
 import { cn } from '../../utils/cn';
 import { formatDurationCompact } from '../../utils/format';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
-import { SquareAvatar, AvatarStack, Button } from '../ui';
-import { AutocompleteSkeleton } from '../ui/autocomplete';
-import { useLoadingScope } from '../ui/loading-scope';
-import { SquareAvatarSkeleton } from '../ui/square-avatar';
+import { Button } from '../ui';
+import { LOADING_NOOP, useLoadingScope } from '../ui/loading-scope';
 import { TimezoneSelect } from '../ui/timezone-select';
+import { HostIdentity } from './host-identity';
+
+/** The skeleton's timezone picker is drawn in its loading form, where nothing can be picked. */
 
 /**
  * The head of the scheduler's MODAL layout: the host strip (who, and how long
@@ -39,43 +40,8 @@ const ROW_CLASS = 'border-b border-ods-border p-[var(--spacing-system-m)]';
 const STRIP_CLASS = cn(ROW_CLASS, 'flex items-center justify-between gap-[var(--spacing-system-m)]');
 const FIELD_LABEL_CLASS = 'text-h4 text-ods-text-primary';
 const TIMEZONE_ROW_CLASS = cn(ROW_CLASS, 'flex flex-col gap-[var(--spacing-system-xxs)]');
-/** The host list, one host's row and its text column, read by the header and by its skeleton. */
-const HOST_LIST_CLASS = 'flex min-w-0 flex-col gap-[var(--spacing-system-s)]';
-const HOST_ROW_CLASS = 'flex items-center gap-[var(--spacing-system-xs)]';
-const HOST_TEXT_CLASS = 'flex min-w-0 flex-col';
 const DURATION_LINE_CLASS = 'shrink-0 text-ods-text-secondary text-h6';
 
-function HostIdentity({ hosts }: { hosts: MeetingHost[] }) {
-  if (hosts.length === 0) return null;
-  if (hosts.length > 3) {
-    return (
-      <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-        <AvatarStack people={hosts} max={4} size="lg" label="Hosts" />
-        <p className="text-ods-text-secondary text-h6">{hosts.length} hosts on this calendar</p>
-      </div>
-    );
-  }
-  return (
-    <div className={HOST_LIST_CLASS}>
-      {hosts.map(host => (
-        <div key={host.name} className={HOST_ROW_CLASS}>
-          <SquareAvatar
-            variant="round"
-            size="sm"
-            src={host.avatarUrl ?? undefined}
-            alt={host.name}
-            fallback={host.name}
-          />
-          <div className={HOST_TEXT_CLASS}>
-            <p className="truncate text-ods-text-primary text-h4">{host.name}</p>
-            {host.title && <p className="truncate text-ods-text-secondary text-h6">{host.title}</p>}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
 export function SchedulerModalHeader({
   hosts,
   durationsMs,
@@ -134,25 +100,17 @@ export function SchedulerModalHeader({
 }
 
 /** Same footprint as the loaded header, for the cold load: "Timezone" real, one host and the length as bars. */
-export function SchedulerModalHeaderSkeleton({ showTimezone = true }: { showTimezone?: boolean } = {}) {
+function SchedulerModalHeaderSkeleton({ showTimezone = true }: { showTimezone?: boolean } = {}) {
   return (
     <>
       <div className={STRIP_CLASS}>
-        <div className={HOST_LIST_CLASS}>
-          <div className={HOST_ROW_CLASS}>
-            <SquareAvatarSkeleton variant="round" size="sm" />
-            <div className={HOST_TEXT_CLASS}>
-              <TextLineSkeleton type="h4" className="w-32" />
-              <TextLineSkeleton type="h6" className="w-24" />
-            </div>
-          </div>
-        </div>
+        <HostIdentity hosts={[]} loading />
         <TextLineSkeleton type="h6" className={cn(DURATION_LINE_CLASS, 'w-20')} />
       </div>
       {showTimezone && (
         <div className={TIMEZONE_ROW_CLASS}>
           <p className={FIELD_LABEL_CLASS}>Timezone</p>
-          <AutocompleteSkeleton />
+          <TimezoneSelect value={null} loading onChange={LOADING_NOOP} />
         </div>
       )}
     </>