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

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useEffect, useId, useMemo, useRef, useState } from 'react';
 import type { FormEvent, ReactNode, Ref } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import type { Control, Path, UseFormRegister } from 'react-hook-form';
@@ -17,6 +17,7 @@ import {
   emailDomainDenied,
   type DeniedEmailDomains,
   MULTI_VALUE_SEPARATOR,
+  bookingFormAsks,
   normalizeFormFields,
   splitMultiValue,
   type BuiltInBookingField,
@@ -29,10 +30,11 @@ import {
 import { cn } from '../../utils/cn';
 import type { FormRescueDefinition } from '../../utils/form-rescue';
 import { HUBSPOT_DO_NOT_COLLECT_FORM_PROPS } from '../../utils/hubspot-collected-forms';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import {
   Button,
   FieldWrapper,
+  fieldLabelId,
   Input,
   Textarea,
   Label,
@@ -45,8 +47,12 @@ import {
   CheckboxBlock,
   RadioGroup,
   RadioGroupItem,
+  ToggleGroup,
+  ToggleGroupItem,
 } from '../ui';
 import { HoneypotField } from '../ui/honeypot-field';
+import { useLoadingScope } from '../ui/loading-scope';
+import { TOGGLE_SIZE_CLASS } from '../ui/toggle';
 
 /**
  * One field in a host-supplied row. `name` is a built-in (`email`, `firstName`,
@@ -77,6 +83,14 @@ export type BookingFieldRow = BookingFieldSlot[];
 export interface BookingFieldCopy {
   label?: string;
   placeholder?: string;
+  /**
+   * How a CHOICE question (`select`, `radio`) is drawn. Omitted or `dropdown`:
+   * the question's own control (a select, or radio buttons). `chips`: one-tap
+   * chips, when the link offers at most `CHIP_MAX_OPTIONS` answers (past it, the
+   * question's own control). The answers, their name and their validation are
+   * always the link's own.
+   */
+  display?: 'chips' | 'dropdown';
 }
 
 /**
@@ -123,11 +137,6 @@ const SPAN_CLASS = {
   4: 'content-md:col-span-4',
 } as const;
 
-/** One field's skeleton: label + control footprint — the CSS twin of `FieldWrapper`'s
- *  label row over `Input`'s `h-11 content-md:h-12` (the other skeleton heights below are
- *  the same kind of twin: the textarea, the consent row, the `Button`). */
-const FIELD_SKELETON_CLASS = 'h-[4.75rem] w-full';
-
 /** The submit copy every standalone `BookingForm` gets; the slot-first preset reads the same constant. */
 export const DEFAULT_SUBMIT_LABEL = 'Confirm Booking';
 
@@ -175,8 +184,10 @@ interface ControlArgs {
 const placeholderFor = (field: ControlArgs['field']): string | undefined =>
   field.placeholder ?? fieldTypeSpec(field.type).placeholder?.(field);
 
-/** An option's display text: HubSpot's label when it differs from the submitted value. */
-const optionLabel = (field: ControlArgs['field'], value: string): string => field.optionLabels?.[value] ?? value;
+/** An option's display text: HubSpot's label when it differs from the submitted value. Exported: a host that asks
+ *  one of the link's questions outside the form (a landing hero) words its answers the same way. */
+export const formFieldOptionLabel = (field: Pick<MeetingFormField, 'optionLabels'>, value: string): string =>
+  field.optionLabels?.[value] ?? value;
 
 /** A free-text answer is sent without the whitespace a paste drags in. */
 const trimmed = (v: unknown): string => String(v ?? '').trim();
@@ -282,7 +293,7 @@ const FIELD_CONTROLS: Record<SupportedFormFieldType, (args: ControlArgs) => Reac
           <SelectContent>
             {(field.options ?? []).map(opt => (
               <SelectItem key={opt} value={opt}>
-                {optionLabel(field, opt)}
+                {formFieldOptionLabel(field, opt)}
               </SelectItem>
             ))}
           </SelectContent>
@@ -304,7 +315,7 @@ const FIELD_CONTROLS: Record<SupportedFormFieldType, (args: ControlArgs) => Reac
           {(field.options ?? []).map(opt => (
             <div key={opt} className="flex items-center gap-[var(--spacing-system-xs)]">
               <RadioGroupItem id={`${id}-${opt}`} value={opt} />
-              <Label htmlFor={`${id}-${opt}`}>{optionLabel(field, opt)}</Label>
+              <Label htmlFor={`${id}-${opt}`}>{formFieldOptionLabel(field, opt)}</Label>
             </div>
           ))}
         </RadioGroup>
@@ -333,7 +344,7 @@ const FIELD_CONTROLS: Record<SupportedFormFieldType, (args: ControlArgs) => Reac
                   onCheckedChange={v => toggle(opt, v === true)}
                   aria-invalid={Boolean(error)}
                 />
-                <Label htmlFor={`${id}-${opt}`}>{optionLabel(field, opt)}</Label>
+                <Label htmlFor={`${id}-${opt}`}>{formFieldOptionLabel(field, opt)}</Label>
               </div>
             ))}
           </div>
@@ -363,11 +374,74 @@ const FIELD_CONTROLS: Record<SupportedFormFieldType, (args: ControlArgs) => Reac
   ),
 };
 
+/** The field types that may be drawn as chips (`BookingFieldCopy.display`): one answer from a list. */
+const CHIP_FIELD_TYPES: ReadonlySet<string> = new Set(['select', 'radio']);
+
+/** The most answers a choice question may offer and still be drawn as chips: more read better as a list. */
+export const CHIP_MAX_OPTIONS = 6;
+
+/**
+ * Whether a choice question is drawn as chips: only when the host asks for it
+ * (`display: 'chips'`) and the link offers at most `CHIP_MAX_OPTIONS` answers.
+ * Anything else keeps the question's own control from `FIELD_CONTROLS`.
+ */
+function drawnAsChips(field: { type: string; options?: string[] }, display: BookingFieldCopy['display']): boolean {
+  if (display !== 'chips' || !CHIP_FIELD_TYPES.has(field.type)) return false;
+  const count = field.options?.length ?? 0;
+  return count > 0 && count <= CHIP_MAX_OPTIONS;
+}
+
+/**
+ * A choice question as one-tap chips: the lib's single `ToggleGroup`, one item
+ * per option. The group is named by the question's label (`FieldWrapper` gives
+ * it `fieldLabelId`), a refused question paints the lib's error border on its
+ * chips, and hover is a quiet background so it never reads as the chosen one.
+ */
+/** The chips' row: read by `chipsControl` and by `FieldSkeleton`, so a chips question loads at its own height. */
+const CHIP_ROW_CLASS = 'flex flex-wrap justify-start gap-[var(--spacing-system-xsf)]';
+
+const chipsControl = ({ field, id, registerName, error, control }: ControlArgs): ReactNode => (
+  <Controller
+    control={control}
+    name={registerName as never}
+    render={({ field: rhf }) => (
+      <ToggleGroup
+        id={id}
+        type="single"
+        variant="choice"
+        value={rhf.value ?? ''}
+        // A tap on the chosen chip reports '': the answer stays (clearing is not a choice the form offers).
+        onValueChange={(value: string) => {
+          if (value) rhf.onChange(value);
+        }}
+        // The form focuses a question that failed validation through its ref: the group passes that to its first chip.
+        ref={(group: HTMLDivElement | null) =>
+          rhf.ref(group && { focus: () => group.querySelector('button')?.focus() })
+        }
+        onBlur={rhf.onBlur}
+        aria-labelledby={fieldLabelId(id)}
+        aria-required={field.required || undefined}
+        aria-invalid={Boolean(error)}
+        className={CHIP_ROW_CLASS}
+      >
+        {(field.options ?? []).map(opt => (
+          <ToggleGroupItem key={opt} value={opt} className={cn(error && 'data-[state=off]:border-ods-error')}>
+            {formFieldOptionLabel(field, opt)}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+    )}
+  />
+);
+
 /** `firstName` → `ms-first-name`; the ids the built-ins have always had. */
 const builtInId = (name: string) => `ms-${name.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)}`;
 
 export interface BookingFormProps {
-  availability: MeetingAvailability;
+  /** 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. */
+  loading?: boolean;
   meetingId: string;
   /** Absent in `deferSlot` mode — the slot is chosen AFTER these answers. */
   startTimeMs?: number;
@@ -383,6 +457,15 @@ export interface BookingFormProps {
   deferSlot?: boolean;
   /** Repopulates the form on a remount — the back edge, or an error return. */
   initialValues?: Record<string, unknown>;
+  /**
+   * Answers the host took OUTSIDE the form, by question name (a landing hero's
+   * one-tap question). Each is written into its question when the form mounts
+   * and whenever it changes, while the question is empty or still holds the
+   * host's last answer: nothing the visitor typed is overwritten, and an answer
+   * the host withdraws clears what it wrote. An answer to a question the form
+   * does not ask is ignored.
+   */
+  answers?: Readonly<Record<string, string>>;
   /** Defaults to "Confirm Booking"; details-first says "Continue". */
   submitLabel?: string;
   /** Small print beside the submit (details-first sets expectations). */
@@ -397,6 +480,15 @@ export interface BookingFormProps {
    * appended full width. Both are deliberate — see `slotNode`/`unplacedFields`.
    */
   fieldRows?: BookingFieldRow[];
+  /**
+   * The OPTIONAL questions of the link this form asks, by name. A link is often
+   * shared by several pages, and a question added to it for one page must not
+   * appear on the others: with this set, an optional question it does not name
+   * is left out (in `fieldRows` and in the default layout alike). A REQUIRED
+   * question is always asked, named or not: a required field with no control
+   * is a submit that cannot succeed. Omitted: every declared question is asked.
+   */
+  optionalFields?: readonly string[];
   /** The form element's id, so a host can submit it from a button outside it
    *  (`<button form={id}>`): the modal layout keeps its actions in a footer
    *  under the card. */
@@ -439,8 +531,28 @@ export interface BookingFormProps {
  * external embedders). Honeypot + elapsed-ms are merged into the POST at
  * submit; the parent calls `resetSignals()` after a SLOT_TAKEN refetch so a
  * legitimate retry isn't flagged too-fast.
+ *
+ * While the link is read (`loading`, a loading scope, or no availability yet) the form is its own skeleton.
  */
-export function BookingForm({
+export function BookingForm(props: BookingFormProps) {
+  const inScope = useLoadingScope();
+  const { availability } = props;
+  if (inScope || props.loading || !availability) {
+    return (
+      <BookingFormSkeleton
+        fieldRows={props.fieldRows}
+        optionalFields={props.optionalFields}
+        fieldCopy={props.fieldCopy}
+        consent={props.consent}
+        footerNote={props.footerNote}
+        submitLabel={props.submitLabel}
+      />
+    );
+  }
+  return <BookingFormBody {...props} availability={availability} />;
+}
+
+function BookingFormBody({
   availability,
   meetingId,
   startTimeMs,
@@ -448,9 +560,11 @@ export function BookingForm({
   timezone,
   deferSlot = false,
   initialValues,
+  answers,
   submitLabel,
   footerNote,
   fieldRows,
+  optionalFields,
   formId,
   hideSubmit = false,
   onValidityChange,
@@ -462,12 +576,16 @@ export function BookingForm({
   honeypotInputProps,
   getSignals,
   rescue = null,
-}: BookingFormProps) {
+}: BookingFormProps & { availability: MeetingAvailability }) {
   const { formFields, legalConsent } = availability;
   // Every declared question resolved to a control (`resolveFormFieldControl`) —
   // an unfamiliar HubSpot type is drawn as its nearest control, never dropped
   // silently and never a reason to hide the form.
-  const supportedFields = useMemo(() => normalizeFormFields(formFields), [formFields]);
+  // `optionalFields` narrows the optional ones to the questions this form asks.
+  const supportedFields = useMemo(
+    () => normalizeFormFields(formFields).filter(field => bookingFormAsks(field, optionalFields)),
+    [formFields, optionalFields],
+  );
   // The DEFERRED schema in both flows: it is the wider of the two, and a strict
   // resolver is not assignable to `Resolver<BookingFormValues>`. The strict
   // schema is the server's contract — see `makeBookingSchema`'s docblock.
@@ -553,6 +671,26 @@ export function BookingForm({
     );
   }, [consentDefaults, priorConsents, getValues, setValue]);
 
+  // The host's outside answers, written without a remount, on mount too (an answer given before the form
+  // mounted, or while a later step had it unmounted, still arrives). A question is the host's to write while it
+  // is empty or still holds what this effect last wrote there; once it holds anything else (typed, or restored
+  // from the visitor's own stash) it is the visitor's. An answer the host withdraws clears what it wrote.
+  const written = useRef<Record<string, string>>({});
+  useEffect(() => {
+    const names = new Set([...Object.keys(answers ?? {}), ...Object.keys(written.current)]);
+    for (const name of names) {
+      // Only a question this form asks: an answer to one the link does not declare (or the form leaves out) goes nowhere.
+      if (!supportedFields.some(field => field.name === name)) continue;
+      const next = answers?.[name] ?? '';
+      const current = getValues('formFields')?.[name] ?? '';
+      if (current !== '' && current !== written.current[name]) continue;
+      if (next) written.current[name] = next;
+      else delete written.current[name];
+      if (current === next) continue;
+      setValue(`formFields.${name}` as never, next as never, { shouldValidate: next !== '' });
+    }
+  }, [answers, supportedFields, getValues, setValue]);
+
   // Form rescue: the built-ins by name, the declared questions under `formFields.<name>`.
   const rescueFields = useMemo(
     () => [...BUILT_IN_BOOKING_FIELDS.map(field => field.name), ...supportedFields.map(field => field.name)],
@@ -648,7 +786,7 @@ export function BookingForm({
         required={shown.required}
         error={where.error}
       >
-        {FIELD_CONTROLS[shown.type]({
+        {(drawnAsChips(shown, copy?.display) ? chipsControl : FIELD_CONTROLS[shown.type])({
           field: shown,
           id: where.id,
           registerName: where.registerName,
@@ -857,42 +995,78 @@ export function BookingForm({
  */
 export function BookingFormSkeleton({
   fieldRows,
+  optionalFields,
+  fieldCopy,
   consent,
   footerNote,
+  submitLabel = DEFAULT_SUBMIT_LABEL,
 }: {
   fieldRows?: BookingFieldRow[];
-  /** Whether the host adds its consent row (drawn only then). A HubSpot
-   *  `legalConsent` block is unknown until availability lands — the one
-   *  footprint this skeleton cannot budget for. */
-  consent?: boolean;
+  /** The optional questions the form asks (`BookingForm`'s `optionalFields`): a row slot naming another optional
+   *  question is left out, as the loaded form leaves it out. */
+  optionalFields?: readonly string[];
+  /** The host's per-field copy (`BookingForm`'s `fieldCopy`): a built-in field's label is drawn with it. */
+  fieldCopy?: Record<string, BookingFieldCopy>;
+  /** The host's consent row (`BookingForm`'s `consent`), drawn for real: it is the host's own words. `true` (no
+   *  copy known) draws the row with its label as a bar. A HubSpot `legalConsent` block is unknown until
+   *  availability lands, the one footprint this skeleton cannot budget for. */
+  consent?: BookingFormConsent | boolean;
+  /** The footer's note (the host's words), drawn for real. */
   footerNote?: string;
+  /** The submit button's label (`BookingForm`'s `submitLabel`): the button is drawn for real at its own size. */
+  submitLabel?: string;
 }) {
+  const consentId = useId();
+  // The real submit button (static copy), inert with the rest of the form.
+  const submitButton = (
+    <Button type="button" tabIndex={-1} className={footerNote ? SUBMIT_WIDE_CLASS : undefined}>
+      {submitLabel}
+    </Button>
+  );
   return (
-    <div className={cn('flex-1', FORM_STACK)}>
+    // Inert: the fields are the form's own controls, drawn so each is its loaded size; none takes focus.
+    <div className={cn('flex-1', FORM_STACK)} aria-hidden inert>
       {/* The host's rows (or the built-in layout) through the SAME grid, column
           rule and normalisation as the loaded form — see `normalizeFieldRows`. */}
-      {skeletonRows(fieldRows ?? DEFAULT_FIELD_ROWS).map(row => (
+      {skeletonRows(fieldRows ?? DEFAULT_FIELD_ROWS, optionalFields).map(row => (
         <div key={row.map(s => s.name).join('|')} className={ROW_GRID}>
           {row.map((slot, slotIndex) => (
-            <UnifiedSkeleton
+            <FieldSkeleton
               key={slot.name}
-              className={cn(FIELD_SKELETON_CLASS, slotColumnClass(row, slot, slotIndex))}
+              name={slot.name}
+              fieldCopy={fieldCopy}
+              className={slotColumnClass(row, slot, slotIndex)}
             />
           ))}
         </div>
       ))}
       {/* Without rows there is no telling how many questions the link declares: one long answer stands for them. */}
-      {!fieldRows && <UnifiedSkeleton className="h-[7.75rem] w-full" />}
-      {consent && <UnifiedSkeleton className="h-[4.25rem] w-full" />}
+      {!fieldRows && (
+        // An empty label keeps the field's own frame (`FieldWrapper` draws no label for it); the bar stands for it.
+        <FieldWrapper label="">
+          <TextLineSkeleton type="h6" className="mb-1 w-40" />
+          <Textarea tabIndex={-1} />
+        </FieldWrapper>
+      )}
+      {consent && (
+        <CheckboxBlock
+          id={consentId}
+          checked={false}
+          onCheckedChange={() => {}}
+          required
+          label={
+            consent === true ? <TextLineSkeleton type="inherit" as="span" className="w-64 max-w-full" /> : consent.label
+          }
+          description={consent === true ? undefined : consent.description}
+        />
+      )}
       {footerNote ? (
         <div className={FOOTER_ROW_CLASS}>
-          <UnifiedSkeleton className="h-5 min-w-40 flex-1" />
-          <UnifiedSkeleton className={cn('h-12 w-full', SUBMIT_WIDE_CLASS)} />
+          <p className="text-ods-text-secondary text-h6">{footerNote}</p>
+          {submitButton}
         </div>
       ) : (
-        <div className={FOOTER_BARE_CLASS}>
-          <UnifiedSkeleton className="h-12 w-40" />
-        </div>
+        <div className={FOOTER_BARE_CLASS}>{submitButton}</div>
       )}
     </div>
   );
@@ -930,8 +1104,44 @@ function normalizeFieldRows(fieldRows: BookingFieldRow[], resolves: (name: strin
   return { rows, unplacedBuiltIns, named };
 }
 
-/** The skeleton's rows: the normalised host rows, then the built-ins none of them named. */
-function skeletonRows(fieldRows: BookingFieldRow[]): BookingFieldRow[] {
-  const { rows, unplacedBuiltIns } = normalizeFieldRows(fieldRows);
+/** The skeleton's rows: the normalised host rows, then the built-ins none of them named. With `optionalFields`, a
+ *  slot that is neither a built-in nor one of the named questions is left out, as `bookingFormAsks` leaves it out. */
+function skeletonRows(fieldRows: BookingFieldRow[], optionalFields?: readonly string[]): BookingFieldRow[] {
+  const asks = (name: string) =>
+    !optionalFields || BUILT_IN_BOOKING_FIELDS.some(f => f.name === name) || optionalFields.includes(name);
+  const { rows, unplacedBuiltIns } = normalizeFieldRows(fieldRows, asks);
   return [...rows, ...unplacedBuiltIns.map(f => [{ name: f.name }])];
 }
+
+/**
+ * One field while the link is read: the loaded field's own `FieldWrapper` over the loaded control. A built-in field's
+ * label is its own words (or the host's copy); a declared question's label is the host's copy when it gives one
+ * (static, drawn for real), else a bar of the label's line, since the link supplies it. A question the host draws
+ * as chips (`display: 'chips'`) is one row of chips at the chips' own height; any other is an `Input`.
+ */
+function FieldSkeleton({
+  name,
+  fieldCopy,
+  className,
+}: {
+  name: string;
+  fieldCopy?: Record<string, BookingFieldCopy>;
+  className?: string;
+}) {
+  const builtIn = BUILT_IN_BOOKING_FIELDS.find(f => f.name === name);
+  const copy = fieldCopy?.[name];
+  const label = builtIn ? (copy?.label ?? builtIn.label) : copy?.label;
+  return (
+    // An empty label keeps the field's own frame; a read label is the bar under it.
+    <FieldWrapper label={label ?? ''} required={builtIn?.required} className={className}>
+      {label === undefined && <TextLineSkeleton type="h6" className="mb-1 w-32" />}
+      {!builtIn && copy?.display === 'chips' ? (
+        <div className={CHIP_ROW_CLASS}>
+          <UnifiedSkeleton variant="default" className={cn(TOGGLE_SIZE_CLASS.default, 'w-24 rounded-md')} />
+        </div>
+      ) : (
+        <Input tabIndex={-1} />
+      )}
+    </FieldWrapper>
+  );
+}

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

@@ -4,8 +4,11 @@ import type { MeetingHost } from '../../schemas/meeting-booking-schema';
 import { cn } from '../../utils/cn';
 import { formatDurationCompact } from '../../utils/format';
 import { BackButton } from '../layout/back-button';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+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 { TimezoneSelect } from '../ui/timezone-select';
 
 /**
@@ -56,6 +59,8 @@ export interface SchedulerContextPanelProps {
    *  right up to the confirmation — where there is nothing left to re-read. */
   showTimezone?: boolean;
   className?: string;
+  /** The meeting is still being read: the panel draws its own skeleton, as in a loading scope. */
+  loading?: boolean;
 }
 
 /** Panel stack — one rhythm shared by the loaded panel and its skeleton
@@ -103,6 +108,17 @@ 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. */
+const DURATION_FIELD_CLASS = 'flex flex-col gap-[var(--spacing-system-xxs)]';
+const DURATION_CHIPS_CLASS = 'flex flex-wrap gap-[var(--spacing-system-xs)]';
+/** After a slot is chosen the timezone field is drawn only on the 280px sidebar (from `lg`). */
+const TIMEZONE_WIDE_ONLY_CLASS = 'content-max-lg:hidden';
+
 /**
  * Same-footprint skeleton — swaps with the loaded panel with zero shift.
  * STATIC labels ("Duration", "Timezone") render REAL; only data-driven
@@ -112,10 +128,28 @@ export function ContextPanelSkeleton({
   className,
   onBack,
   backLabel = 'Back',
+  title = true,
+  description = true,
+  durations = 0,
+  timezone = 'shown',
 }: {
   className?: string;
   onBack?: () => void;
   backLabel?: string;
+  /** The loaded panel has the meeting's title line (a bar of it). Default true: a scheduling link has a title. */
+  title?: boolean;
+  /** The loaded panel has the meeting's description line (a bar of it). Default true. */
+  description?: boolean;
+  /**
+   * How many duration chips the loaded panel offers: more than 1 draws the "Duration" row, otherwise the static
+   * duration line beside the host (every link states its length, as chips or as that line). Default 0.
+   */
+  durations?: number;
+  /**
+   * The timezone field, as the loaded panel draws it: `shown`, `wide` (only from `lg`, after a slot is chosen) or
+   * `hidden` (the confirmation). Default `shown`.
+   */
+  timezone?: 'shown' | 'wide' | 'hidden';
 }) {
   return (
     <div className={cn(PANEL_STACK, className)}>
@@ -127,25 +161,45 @@ export function ContextPanelSkeleton({
       <div className={STRIP_BODY}>
         <div className={STRIP_MAIN}>
           <div className={IDENTITY_ROW}>
-            <div className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xs)] content-lg:flex-none">
-              <UnifiedSkeleton className="h-8 w-8 shrink-0 rounded-full" />
-              <div className="flex flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-                <UnifiedSkeleton className="h-5 w-32" />
-                <UnifiedSkeleton className="h-4 w-24" />
+            <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>
-            <UnifiedSkeleton className="h-4 w-20 shrink-0" />
+            {durations <= 1 && <TextLineSkeleton type="h6" className="w-20 shrink-0" />}
           </div>
+          {title && <TextLineSkeleton type="h3" className="w-3/5" />}
+          {description && <TextLineSkeleton type="h6" className="w-4/5" />}
+          {durations > 1 && (
+            <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" />
+                ))}
+              </div>
+            </div>
+          )}
         </div>
-        <div className={STRIP_ASIDE}>
-          <p className={FIELD_LABEL_CLASS}>Timezone</p>
-          <UnifiedSkeleton className="h-12 w-full" />
-        </div>
+        {timezone !== 'hidden' && (
+          <div className={cn(STRIP_ASIDE, timezone === 'wide' && TIMEZONE_WIDE_ONLY_CLASS)}>
+            <p className={FIELD_LABEL_CLASS}>Timezone</p>
+            <AutocompleteSkeleton />
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
+/**
+ * How many lengths the panel's skeleton offers while the link is read and its lengths are not known yet: a scheduling
+ * link typically offers more than one (a short and a long call), so the skeleton draws the "Duration" row of chips.
+ */
+const CONTEXT_PANEL_TYPICAL_DURATIONS = 2;
+
 export function SchedulerContextPanel({
   hosts,
   title,
@@ -161,7 +215,23 @@ export function SchedulerContextPanel({
   disabled = false,
   showTimezone = true,
   className,
+  loading = false,
 }: SchedulerContextPanelProps) {
+  // While the meeting is read the panel is its skeleton (the hosts, title and durations are read data).
+  if (useLoadingScope() || loading) {
+    return (
+      <ContextPanelSkeleton
+        onBack={onBack}
+        backLabel={backLabel}
+        title={title !== undefined}
+        description={description !== undefined && description !== null}
+        durations={locked ? 0 : durationsMs.length || CONTEXT_PANEL_TYPICAL_DURATIONS}
+        timezone={showTimezone ? (locked ? 'wide' : 'shown') : 'hidden'}
+        className={className}
+      />
+    );
+  }
+
   return (
     <div className={cn(PANEL_STACK, className)}>
       {/* The card's ONE back edge, at every step — the caller decides where it
@@ -178,7 +248,7 @@ export function SchedulerContextPanel({
             {hosts.length > 0 && hosts.length <= 3 && (
               <div className="flex flex-col gap-[var(--spacing-system-s)]">
                 {hosts.map(host => (
-                  <div key={host.name} className="flex items-center gap-[var(--spacing-system-xs)]">
+                  <div key={host.name} className={HOST_ROW_CLASS}>
                     <SquareAvatar
                       variant="round"
                       size="sm"
@@ -186,7 +256,7 @@ export function SchedulerContextPanel({
                       alt={host.name}
                       fallback={host.name}
                     />
-                    <div className="flex min-w-0 flex-col">
+                    <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>
@@ -205,9 +275,7 @@ export function SchedulerContextPanel({
               ? // Post-selection, or a link that offers one length: a static line,
                 // which is what sits beside the host on the header-strip layouts.
                 selectedDurationMs != null && (
-                  <p className="shrink-0 text-ods-text-secondary text-h6">
-                    {formatDurationCompact(selectedDurationMs / 1000)} call
-                  </p>
+                  <p className={DURATION_LINE_CLASS}>{formatDurationCompact(selectedDurationMs / 1000)} call</p>
                 )
               : null}
           </div>
@@ -218,9 +286,9 @@ export function SchedulerContextPanel({
           {/* Several lengths on offer: chips, which need a full row of their
               own at every width — so they stay OUT of the identity row. */}
           {!locked && durationsMs.length > 1 && (
-            <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
+            <div className={DURATION_FIELD_CLASS}>
               <p className={FIELD_LABEL_CLASS}>Duration</p>
-              <div className="flex flex-wrap gap-[var(--spacing-system-xs)]">
+              <div className={DURATION_CHIPS_CLASS}>
                 {durationsMs.map(ms => (
                   <Button
                     key={ms}
@@ -244,19 +312,17 @@ export function SchedulerContextPanel({
           // summary line states the zone one row below — so the fact survives,
           // only the control steps aside. The 280px sidebar has the room, so
           // there it stays.
-          <div className={cn(STRIP_ASIDE, locked && 'content-max-lg:hidden')}>
+          <div className={cn(STRIP_ASIDE, locked && TIMEZONE_WIDE_ONLY_CLASS)}>
             <p className={FIELD_LABEL_CLASS}>Timezone</p>
-            {timezone ? (
-              <TimezoneSelect
-                value={timezone}
-                disabled={disabled}
-                onChange={tz => {
-                  if (tz) onTimezoneChange?.(tz);
-                }}
-              />
-            ) : (
-              <UnifiedSkeleton className="h-12 w-full" />
-            )}
+            {/* Until the visitor's zone is known the picker draws its own skeleton (`loading`). */}
+            <TimezoneSelect
+              value={timezone ?? null}
+              loading={!timezone}
+              disabled={disabled}
+              onChange={tz => {
+                if (tz) onTimezoneChange?.(tz);
+              }}
+            />
           </div>
         )}
       </div>