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

package/src/components/faq-accordion.tsx

@@ -5,7 +5,7 @@ import { cn } from '../utils/cn';
 import { faqItemAnchor } from '../utils/faq-anchor';
 import { Chevron02DownIcon } from './icons-v2-generated/arrows/chevron-02-down-icon';
 import { TextLineSkeleton } from './loading/unified-skeleton';
-import { useLoadingScope } from './ui/loading-scope';
+import { LoadingItems, useLoadingScope } from './ui/loading-scope';
 
 export interface FaqItem {
   id: number | string;
@@ -16,11 +16,18 @@ export interface FaqItem {
 interface FaqAccordionProps {
   items: FaqItem[];
   defaultOpenIds?: (number | string)[];
+  /** The questions are still being read: the accordion draws its skeleton. A loading scope does the same. */
+  loading?: boolean;
+  /** Rows the skeleton draws: the questions the host reads. Default the items' count, else
+   *  `FAQ_ACCORDION_SKELETON_ROWS`. */
+  skeletonCount?: number;
 }
 
 /** The accordion's layout, read by the accordion and by its skeleton, so the skeleton is the accordion's size. */
 const ACCORDION_FRAME_CLASS =
   'divide-y divide-ods-border overflow-hidden rounded-md border border-ods-border bg-transparent';
+/** A question's row (its anchor offset under the sticky nav), read by the accordion's rows and by its loading rows. */
+const ROW_FRAME_CLASS = 'scroll-mt-24 transition-colors';
 const ROW_HEADER_CLASS = 'flex w-full items-center gap-6 px-6 py-4 text-left content-md:gap-10';
 const QUESTION_CLASS = 'min-w-0 flex-1 break-words';
 const CHEVRON_CLASS = 'shrink-0 text-ods-text-primary';
@@ -35,11 +42,11 @@ export const FAQ_ACCORDION_SKELETON_ROWS = 12;
  */
 const wrapsOnPhone = (index: number) => index % 2 === 0;
 
-export function FaqAccordion({ items, defaultOpenIds = [] }: FaqAccordionProps) {
+export function FaqAccordion({ items, defaultOpenIds = [], loading: loadingProp, skeletonCount }: FaqAccordionProps) {
   const [openSet, setOpenSet] = useState<Set<string | number>>(new Set(defaultOpenIds));
   // In a loading scope the items are the empty record: the accordion is its skeleton.
-  const loading = useLoadingScope();
-  if (loading) return <FaqAccordionSkeleton count={items.length || undefined} />;
+  const loading = useLoadingScope() || !!loadingProp;
+  if (loading) return <FaqAccordionSkeleton count={skeletonCount ?? (items.length || undefined)} />;
 
   const toggle = (id: string | number) => {
     setOpenSet(prev => {
@@ -64,7 +71,7 @@ export function FaqAccordion({ items, defaultOpenIds = [] }: FaqAccordionProps)
             // sticky nav offset (matches `<section>`'s scroll-margin for
             // category anchors).
             id={faqItemAnchor(item.id)}
-            className="scroll-mt-24 transition-colors hover:bg-ods-bg-hover"
+            className={cn(ROW_FRAME_CLASS, 'hover:bg-ods-bg-hover')}
             // A question is a read list's row: how many there are is the data's.
             data-loading-item
           >
@@ -122,7 +129,7 @@ export function FaqAccordion({ items, defaultOpenIds = [] }: FaqAccordionProps)
  * The accordion while its questions are read: the bordered list of `count` closed rows, each question a bar (two
  * lines on a phone, one from `content-md`) inside the row's own `h3`, the chevron real.
  */
-export function FaqAccordionSkeleton({
+function FaqAccordionSkeleton({
   count = FAQ_ACCORDION_SKELETON_ROWS,
   className,
 }: {
@@ -131,23 +138,26 @@ export function FaqAccordionSkeleton({
 }) {
   return (
     <div className={cn(ACCORDION_FRAME_CLASS, className)} aria-hidden>
-      {Array.from({ length: count }, (_, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-        <div key={i} className={ROW_HEADER_CLASS} data-loading-item>
-          <h3 className={QUESTION_CLASS}>
-            {/* A typical question's lines: `wrapsOnPhone` on a phone, one from `content-md`. */}
-            {wrapsOnPhone(i) ? (
-              <>
-                <TextLineSkeleton type="inherit" as="span" lines={2} className="w-5/6 content-md:hidden" />
-                <TextLineSkeleton type="inherit" as="span" className="hidden w-5/6 content-md:block" />
-              </>
-            ) : (
-              <TextLineSkeleton type="inherit" as="span" className="w-5/6" />
-            )}
-          </h3>
-          <Chevron02DownIcon aria-hidden="true" size={24} className={CHEVRON_CLASS} />
-        </div>
-      ))}
+      <LoadingItems count={count}>
+        {i => (
+          <div className={ROW_FRAME_CLASS} data-loading-item>
+            <div className={ROW_HEADER_CLASS}>
+              <h3 className={QUESTION_CLASS}>
+                {/* A typical question's lines: `wrapsOnPhone` on a phone, one from `content-md`. */}
+                {wrapsOnPhone(i) ? (
+                  <>
+                    <TextLineSkeleton type="inherit" as="span" lines={2} className="w-5/6 content-md:hidden" />
+                    <TextLineSkeleton type="inherit" as="span" className="hidden w-5/6 content-md:block" />
+                  </>
+                ) : (
+                  <TextLineSkeleton type="inherit" as="span" className="w-5/6" />
+                )}
+              </h3>
+              <Chevron02DownIcon aria-hidden="true" size={24} className={CHEVRON_CLASS} />
+            </div>
+          </div>
+        )}
+      </LoadingItems>
     </div>
   );
 }

package/src/components/features/ai-enrich/AIEnrichSection.tsx

@@ -6,6 +6,7 @@ import { cn } from '../../../utils/cn';
 import { SparklesIcon } from '../../icons-v2-generated/interface/sparkles-icon';
 import { Badge } from '../../ui/badge';
 import { Button } from '../../ui/button';
+import { Label } from '../../ui/label';
 import { Textarea } from '../../ui/textarea';
 import { AIEnrichButton } from './AIEnrichButton';
 import { AIWarningsSection } from './AIWarningsSection';
@@ -157,9 +158,7 @@ export const AIEnrichSection: React.FC<AIEnrichSectionProps> = ({
       {showCustomInstructions && (
         <div className="space-y-1.5">
           <div className="flex items-center justify-between">
-            <label htmlFor="ai-enrich-custom-instructions" className="text-ods-text-primary text-h6">
-              {customInstructionsLabel}
-            </label>
+            <Label htmlFor="ai-enrich-custom-instructions">{customInstructionsLabel}</Label>
             {customInstructionsMaxLength !== undefined && (
               <span className="text-ods-text-secondary text-h6">
                 {(customInstructions ?? '').length}/{customInstructionsMaxLength}

package/src/components/features/approval-level.tsx

@@ -190,7 +190,7 @@ export function ApprovalLevelView({
   );
 }
 
-export interface ApprovalLevelSkeletonProps {
+interface ApprovalLevelSkeletonProps {
   /** The editable form (the four levels' group) or the read-only one (the level's icon). */
   editable?: boolean;
   /** Whether the level's name is written before the icons (default true, like the view). */
@@ -202,7 +202,7 @@ export interface ApprovalLevelSkeletonProps {
  * `ApprovalLevelView`'s own skeleton (a level chip, not a whole view): a level while it is read: the view's own row, the name a bar at its type step (the longest name's width), and the
  * read-only icon's box or the editable group's four small toggle boxes. Inert: nothing in it can be picked.
  */
-export function ApprovalLevelSkeleton({ editable = false, showLabel = true, className }: ApprovalLevelSkeletonProps) {
+function ApprovalLevelSkeleton({ editable = false, showLabel = true, className }: ApprovalLevelSkeletonProps) {
   const name = showLabel ? (
     <span className={LEVEL_NAME_CLASS}>
       <TextHold>{LONGEST_LEVEL_LABEL}</TextHold>

package/src/components/features/auth/back-to-login-link.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { cn } from '../../../utils/cn';
+import { Button } from '../../ui/button';
 
 export interface BackToLoginLinkProps {
   onClick: () => void;
@@ -11,8 +11,8 @@ export interface BackToLoginLinkProps {
 /** Underlined "Back to Login" text link used across the auth screens. */
 export function BackToLoginLink({ onClick, label = 'Back to Login', className }: BackToLoginLinkProps) {
   return (
-    <button type="button" onClick={onClick} className={cn('text-ods-text-secondary underline text-h4', className)}>
+    <Button variant="link" size="compact" noPaddingX type="button" onClick={onClick} className={className}>
       {label}
-    </button>
+    </Button>
   );
 }

package/src/components/features/auth/complete-account-form.tsx

@@ -26,6 +26,9 @@ export interface CompleteAccountFormProps {
   /** SSO alternatives offered above the fields ("Continue with …"). */
   ssoProviders?: AuthSsoProvider[];
   onSsoClick?: (provider: AuthSsoProvider) => void;
+  /** The SSO providers are still being read: the provider buttons draw their boxes (the typical offer) over the real
+   *  divider. */
+  ssoProvidersLoading?: boolean;
   title?: string;
   subtitle?: string;
   dividerLabel?: string;
@@ -64,6 +67,7 @@ export function CompleteAccountForm({
   onBack,
   ssoProviders,
   onSsoClick,
+  ssoProvidersLoading = false,
   title = 'Complete your Account',
   subtitle = 'Fill in the details below to get started',
   dividerLabel = 'or create account',
@@ -98,14 +102,15 @@ export function CompleteAccountForm({
         <p className="text-ods-text-secondary text-h4">{subtitle}</p>
       </div>
 
-      {/* SSO shortcuts + divider */}
-      {ssoProviders && ssoProviders.length > 0 && (
+      {/* SSO shortcuts + divider; while the providers are read, the buttons draw their boxes over the real divider */}
+      {(ssoProvidersLoading || (ssoProviders && ssoProviders.length > 0)) && (
         <>
           <SsoProviderButtons
-            providers={ssoProviders}
+            providers={ssoProviders ?? []}
             onSsoClick={onSsoClick}
             actionLabel={ssoActionLabel}
             disabled={fieldsDisabled}
+            loading={ssoProvidersLoading}
           />
           <LabeledDivider label={dividerLabel} />
         </>

package/src/components/features/auth/create-organization-form.tsx

@@ -4,8 +4,10 @@ import type { KeyboardEvent, ReactNode } from 'react';
 import { useDeferredError } from '../../../hooks/ui/use-deferred-error';
 import { cn } from '../../../utils/cn';
 import { accentSentenceMarks } from '../../layout/page-heading';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button';
 import { CheckboxBlock } from '../../ui/checkbox-block';
+import { FieldWrapper } from '../../ui/field-wrapper';
 import { Input } from '../../ui/input';
 import { AccountDetailsFields } from './account-details-fields';
 import { LabeledDivider } from './labeled-divider';
@@ -13,6 +15,11 @@ import type { AuthSsoProvider } from './sso-providers';
 import { SsoProviderButtons } from './sso-providers';
 import { TermsAgreementLabel } from './terms-agreement-label';
 
+/** The sub-heading's bar while a `null` sub-heading is read. */
+const CREATE_ORGANIZATION_SUBTITLE_BAR_CLASS = 'w-80 max-w-full';
+/** The read-only email's label while it is read (who signed in): an `h6` bar where the label sits. */
+const CREATE_ORGANIZATION_EMAIL_LABEL_BAR_CLASS = 'mb-1 w-40 max-w-full';
+
 export interface CreateOrganizationFormProps {
   /**
    * Controlled field values. Omit `email` entirely for flows that neither collect nor show an
@@ -51,11 +58,13 @@ export interface CreateOrganizationFormProps {
    * session. `onEmailChange` is not called in this mode.
    */
   emailReadOnly?: boolean;
-  /** Label above the read-only email, e.g. "Signed in with Google". Ignored unless `emailReadOnly`. */
-  emailReadOnlyLabel?: string;
+  /** Label above the read-only email, e.g. "Signed in with Google". Ignored unless `emailReadOnly`. `null` is a label
+   *  still being read (the sign-in method): the field draws it as an `h6` bar in the label's place. */
+  emailReadOnlyLabel?: string | null;
   /** Overrides the default heading. */
   title?: string;
-  /** Overrides the default sub-heading. */
+  /** Overrides the default sub-heading. `null` is a sub-heading still being read (who is signing in): the form draws
+   *  it as an `h4` bar in its own line until the host passes the text. */
   subtitle?: ReactNode;
   /** Suffix rendered inside the domain input, e.g. ".openframe.ai" */
   domainSuffix?: string;
@@ -182,12 +191,24 @@ export function CreateOrganizationForm({
       {/* Header */}
       <div className="flex flex-col">
         <h1 className="tracking-[-0.64px] text-ods-text-primary text-h2">{accentSentenceMarks(title)}</h1>
-        <p className="text-ods-text-secondary text-h4">{subtitle}</p>
+        <p className="text-ods-text-secondary text-h4">
+          {subtitle === null ? (
+            <TextLineSkeleton type="inherit" as="span" className={CREATE_ORGANIZATION_SUBTITLE_BAR_CLASS} />
+          ) : (
+            subtitle
+          )}
+        </p>
       </div>
 
       {/* Email + Organization Name — single column on every breakpoint */}
-      {email === undefined ? null : emailReadOnly ? (
-        <Input type="email" label={emailReadOnlyLabel} value={email} readOnly disabled />
+      {email === undefined ? null : emailReadOnly && emailReadOnlyLabel === null ? (
+        // 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={CREATE_ORGANIZATION_EMAIL_LABEL_BAR_CLASS} />
+          <Input type="email" value={email} readOnly disabled />
+        </FieldWrapper>
+      ) : emailReadOnly ? (
+        <Input type="email" label={emailReadOnlyLabel ?? undefined} value={email} readOnly disabled />
       ) : (
         <Input
           type="email"

package/src/components/features/auth/invite-link-invalid-modal.tsx

@@ -40,14 +40,16 @@ export function InviteLinkInvalidModal({
         <div className="flex items-center gap-[var(--spacing-system-mf)]">
           <h1 className="flex-1 tracking-[-0.64px] text-ods-text-primary text-h2">{accentSentenceMarks(title)}</h1>
           {/* Close (X) — desktop/tablet only, per design */}
-          <button
+          <Button
+            variant="transparent"
+            size="icon-sm"
             type="button"
             aria-label="Close"
             onClick={onClose ?? onBackToLogin}
-            className="hidden shrink-0 text-ods-text-primary md:block"
+            className="hidden shrink-0 md:inline-flex"
           >
-            <XmarkIcon className="h-6 w-6" />
-          </button>
+            <XmarkIcon />
+          </Button>
         </div>
 
         <p className="text-ods-text-primary text-h4">{description}</p>

package/src/components/features/auth/login-form.tsx

@@ -56,6 +56,11 @@ export interface LoginFormProps {
   ssoDisabled?: boolean;
   /** When set, only these generic providers are clickable; the rest stay disabled. */
   ssoEnabledProviders?: AuthSsoProvider[];
+  /**
+   * The generic providers are still being read: the divider is drawn and the buttons draw their boxes, one per entry
+   * of `ssoProviders` (pass the ones the form may offer), so the block holds its place until they arrive.
+   */
+  ssoProvidersLoading?: boolean;
   /** Verb prefix for provider buttons, e.g. "Continue with". */
   ssoActionLabel?: string;
   /** Label on the divider above the generic providers. */
@@ -109,6 +114,7 @@ export function LoginForm({
   onSsoClick,
   ssoDisabled = false,
   ssoEnabledProviders,
+  ssoProvidersLoading = false,
   ssoActionLabel = 'Continue with',
   dividerLabel = 'or continue with',
   tenantMethods,
@@ -201,7 +207,7 @@ export function LoginForm({
         </div>
       )}
 
-      {(tenantMethods || ssoProviders.length > 0) && (
+      {(tenantMethods || ssoProviders.length > 0 || ssoProvidersLoading) && (
         // One block, so an organization's methods replace the generic set as a whole: the key mounts
         // it anew when they arrive, and every row of it eases in, not only the rows that are new.
         // Going back to the generic set swaps without a transition, as the prototype does.
@@ -235,7 +241,7 @@ export function LoginForm({
             </>
           )}
 
-          {ssoProviders.length > 0 && (
+          {(ssoProviders.length > 0 || ssoProvidersLoading) && (
             <>
               {/* Under an organization heading with nothing above it, a second divider would only
                 separate the heading from its own buttons. */}
@@ -248,6 +254,7 @@ export function LoginForm({
                 actionLabel={ssoActionLabel}
                 disabled={providersDisabled}
                 enabledProviders={ssoEnabledProviders}
+                loading={ssoProvidersLoading}
               />
             </>
           )}

package/src/components/features/auth/sso-join-form.tsx

@@ -3,8 +3,10 @@
 import type { ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
 import { accentSentenceMarks } from '../../layout/page-heading';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button';
 import { CheckboxBlock } from '../../ui/checkbox-block';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { SquareAvatar } from '../../ui/square-avatar';
 import { Tag } from '../../ui/tag';
 import { TermsAgreementLabel } from './terms-agreement-label';
@@ -36,6 +38,12 @@ export interface SsoJoinFormProps {
   termsSuffix?: string;
   /** Held while the submit navigates away: everything locks and the submit spins. */
   loading?: boolean;
+  /**
+   * The pending identity is still being read: the heading, subtitle, consent and buttons are drawn for real (inert)
+   * and the identity row's values (name, organization) are bars in the row's own type steps. A loading scope does
+   * the same. (`loading` is the submit's own progress, so this switch has a name of its own.)
+   */
+  identityLoading?: boolean;
   disabled?: boolean;
   className?: string;
 }
@@ -49,6 +57,9 @@ export interface SsoJoinFormProps {
  * and would ignore anything edited here; the row exists so the person can see WHICH account and
  * WHICH organization they are about to be joined with - and walk away if it is the wrong one.
  */
+/** The identity row's role tags, loaded and loading. */
+const ROLES_CLASS = 'flex shrink-0 items-center gap-[var(--spacing-system-xs)]';
+
 export function SsoJoinForm({
   name,
   email,
@@ -69,9 +80,13 @@ export function SsoJoinForm({
   loading = false,
   disabled = false,
   className,
+  identityLoading = false,
 }: SsoJoinFormProps) {
-  const fieldsDisabled = disabled || loading;
+  // ONE switch: in a page's loading state (or while the host reads the identity) the row's values are bars.
+  const readingIdentity = useLoadingScope() || identityLoading;
+  const fieldsDisabled = disabled || loading || readingIdentity;
   const displayName = name?.trim() || email?.trim() || '';
+  const shownRoles = readingIdentity && roles.length === 0 ? [''] : roles;
 
   return (
     <div
@@ -88,7 +103,9 @@ export function SsoJoinForm({
 
       {/* Identity row: who is joining, where, as what. Page-background surface inside the card, per design. */}
       <div className="flex items-center gap-[var(--spacing-system-s)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-m)]">
+        {/* The avatar draws its own skeleton in a loading scope; the host's read switches it the same way. */}
         <SquareAvatar
+          loading={identityLoading}
           size="lg"
           variant="round"
           src={avatarUrl}
@@ -97,13 +114,24 @@ export function SsoJoinForm({
           initialsClassName="text-ods-text-secondary text-h6"
         />
         <div className="flex min-w-0 flex-1 flex-col">
-          <span className="truncate text-ods-text-primary text-h4">{displayName}</span>
-          <span className="truncate text-ods-text-secondary text-h6">{organizationName}</span>
+          {readingIdentity ? (
+            <>
+              <TextLineSkeleton type="h4" className="w-40 max-w-full" />
+              <TextLineSkeleton type="h6" className="w-28 max-w-full" />
+            </>
+          ) : (
+            <>
+              <span className="truncate text-ods-text-primary text-h4">{displayName}</span>
+              <span className="truncate text-ods-text-secondary text-h6">{organizationName}</span>
+            </>
+          )}
         </div>
-        {roles.length > 0 && (
-          <div className="flex shrink-0 items-center gap-[var(--spacing-system-xs)]">
-            {roles.map(role => (
-              <Tag key={role} variant="grey" label={role} />
+        {/* The roles are read with the identity: each tag draws its own skeleton while it is, one per known role, else
+            the typical one. */}
+        {shownRoles.length > 0 && (
+          <div className={ROLES_CLASS}>
+            {shownRoles.map((role, i) => (
+              <Tag key={`${role}-${i}`} loading={readingIdentity} variant="grey" label={role} />
             ))}
           </div>
         )}

package/src/components/features/auth/sso-providers.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { requireIcon, type IconComponent } from '../../chat/utils/icon-loading';
+import { InteractiveSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button';
+import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
 import { StatusBadge } from '../../ui/status-badge';
 
 /** SSO providers offered on the auth forms. */
@@ -41,6 +43,29 @@ export interface SsoProviderButtonsProps {
    * button as the generic one.
    */
   tag?: string;
+  /** The providers are still being read: the buttons draw their boxes, one per entry of `providers` (the ones the
+   *  form may offer), or `SSO_PROVIDERS_SKELETON_COUNT` when it names none. A loading scope does the same. */
+  loading?: boolean;
+}
+
+/** The column the provider buttons stack in, read by the buttons and by their skeleton. */
+const SSO_PROVIDER_BUTTONS_CLASS = 'flex flex-col gap-[var(--spacing-system-l)]';
+
+/**
+ * How many provider buttons a form draws while the providers are read when it names none of its own: every provider
+ * the auth forms offer for sign-in (Google, Microsoft and Apple).
+ */
+export const SSO_PROVIDERS_SKELETON_COUNT = 3;
+
+/** The provider buttons while the providers are read: full-width boxes of the outline button, in the same column. */
+function SsoProviderButtonsSkeleton({ count }: { count: number }) {
+  return (
+    <div className={SSO_PROVIDER_BUTTONS_CLASS} aria-hidden>
+      <LoadingItems count={count}>
+        {() => <InteractiveSkeleton.Button className="w-full" data-loading-item />}
+      </LoadingItems>
+    </div>
+  );
 }
 
 /** Stacked full-width SSO provider buttons shared by the auth forms. */
@@ -51,15 +76,19 @@ export function SsoProviderButtons({
   disabled = false,
   enabledProviders,
   tag,
+  loading,
 }: SsoProviderButtonsProps) {
+  if (useLoadingScope() || loading)
+    return <SsoProviderButtonsSkeleton count={providers.length || SSO_PROVIDERS_SKELETON_COUNT} />;
   return (
-    <div className="flex flex-col gap-[var(--spacing-system-l)]">
+    <div className={SSO_PROVIDER_BUTTONS_CLASS}>
       {providers.map(provider => {
         const meta = PROVIDER_META[provider];
         const Icon = meta.Icon;
         return (
           <Button
             key={provider}
+            data-loading-item
             type="button"
             variant="outline"
             fullWidth

package/src/components/features/board/board-column.tsx

@@ -6,13 +6,13 @@ import { memo, useCallback, useEffect, useRef, useState, type ReactNode } from '
 import { autoScrollColumn } from '../../../utils/auto-scroll-ancestors';
 import { cn } from '../../../utils/cn';
 import { TagIcon } from '../../icons-v2-generated/shopping/tag-icon';
+import { LoadingItems } from '../../ui/loading-scope';
 import { BoardColumnHeader } from './board-column-header';
 import { tintOnDark } from './color-utils';
 import { useDropAim } from './drop-aim';
 import { DROP_LINE_ATTRIBUTE, nearestCardIn } from './lane-geometry';
 import { TicketCard } from './ticket-card';
-import { TicketCardSkeleton } from './ticket-card-skeleton';
-import type { BoardColumnDef, BoardTicket } from './types';
+import { BOARD_COLUMN_PAGE_SIZE, type BoardColumnDef, type BoardTicket } from './types';
 import { useLaneScrollAnchor } from './use-lane-scroll-anchor';
 
 export interface BoardColumnProps {
@@ -234,7 +234,10 @@ function ColumnBody({
       className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xs)] overflow-y-auto py-[5px] [overflow-anchor:none]"
     >
       {column.isLoading ? (
-        <SkeletonStack />
+        // A lane loads one page of its tickets: its loading form draws that page, each card its own skeleton.
+        <LoadingItems count={column.pageSize ?? BOARD_COLUMN_PAGE_SIZE}>
+          {() => <TicketCard ticket={null} columnId={column.id} data-loading-item />}
+        </LoadingItems>
       ) : column.tickets.length === 0 ? (
         <EmptyState columnId={column.id} touchMode={touchMode} />
       ) : (
@@ -251,28 +254,17 @@ function ColumnBody({
             dragDisabled={touchMode || column.dragDisabled}
             dropDisabled={touchMode || column.dropDisabled}
             allowedFromColumns={column.allowedFromColumns}
+            data-loading-item
           />
         ))
       )}
-      {column.isLoadingMore && !column.isLoading && <TicketCardSkeleton />}
+      {/* The next page on its way: one card drawing itself while it is read. */}
+      {column.isLoadingMore && !column.isLoading && <TicketCard ticket={null} columnId={column.id} />}
       {column.hasMore && <div ref={sentinelRef} aria-hidden className="h-1 shrink-0" />}
     </div>
   );
 }
 
-function SkeletonStack({ count = 4 }: { count?: number }) {
-  // Position IS the identity here: the rows are interchangeable placeholders in
-  // a fixed-length list, so the index is the correct key. Random keys remounted
-  // every row whenever this re-rendered with a different `count`.
-  return (
-    <>
-      {Array.from({ length: count }, (_, i) => (
-        <TicketCardSkeleton key={`skeleton-${i}`} />
-      ))}
-    </>
-  );
-}
-
 /** Also carries the insertion line when a drop is aimed here, since the lane has
  *  no card to hang it off. */
 function EmptyState({ columnId, touchMode }: { columnId: string; touchMode: boolean }) {

package/src/components/features/board/board-ticket-approval.tsx

@@ -5,6 +5,7 @@ import { cn } from '../../../utils/cn';
 import { ApprovalBatchMessage } from '../../chat/approval-batch-message';
 import { useCollapsible } from '../../chat/hooks/use-collapsible';
 import { Chevron02DownIcon, Chevron02UpIcon, DotsLoaderIcon, ShieldCheckIcon } from '../../icons-v2-generated';
+import { Button } from '../../ui/button';
 import type { BoardTicketPendingApproval } from './types';
 
 export interface BoardTicketApprovalProps {
@@ -27,15 +28,10 @@ export function BoardTicketApproval({ pendingApproval, onApprove, onReject }: Bo
 
   return (
     <div className="pointer-events-auto flex flex-col">
-      <button
-        type="button"
-        onClick={() => setExpanded(v => !v)}
-        aria-expanded={expanded}
-        className="flex w-full cursor-pointer items-center gap-[var(--spacing-system-xxs)] text-h6"
-      >
+      <Button variant="row" type="button" onClick={() => setExpanded(v => !v)} aria-expanded={expanded}>
         <span
           className={cn(
-            'flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)]',
+            'flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)] text-h6',
             isAdmin ? 'text-ods-open-yellow' : 'text-ods-text-secondary',
           )}
         >
@@ -53,7 +49,7 @@ export function BoardTicketApproval({ pendingApproval, onApprove, onReject }: Bo
         ) : (
           <Chevron02DownIcon className="size-4 shrink-0 text-ods-text-secondary" />
         )}
-      </button>
+      </Button>
 
       <div style={containerStyle}>
         <div ref={innerRef} className="pt-[var(--spacing-system-xs)]">