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

package/src/components/features/cloud-tenants/tenant-customer-cell.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useLoadingScope } from '../../ui/loading-scope';
 import { SquareAvatar } from '../../ui/square-avatar';
 import { TruncateText } from '../../ui/truncate-text';
 import { usersCountLabel } from './tenant-presentation';
@@ -13,13 +14,15 @@ export interface TenantCustomerCellProps {
 
 /** CUSTOMERS column: customer logo + name over the synced user count. */
 export function TenantCustomerCell({ name, imageUrl, userCount }: TenantCustomerCellProps) {
+  // While the tenant is read (a loading scope) the user count is a bar too (its label is never empty).
+  const loading = useLoadingScope();
   return (
     <div className="flex min-w-0 flex-col justify-center">
       <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
         <SquareAvatar src={imageUrl ?? undefined} alt={name} fallback={name} size="xs" variant="square" />
         <TruncateText>{name}</TruncateText>
       </div>
-      <TruncateText variant="h6" tone="secondary">
+      <TruncateText variant="h6" tone="secondary" loading={loading}>
         {usersCountLabel(userCount)}
       </TruncateText>
     </div>

package/src/components/features/cloud-tenants/tenants-table-view.tsx

@@ -5,7 +5,8 @@ import { cn } from '../../../utils/cn';
 import { openInNewTab } from '../../../utils/open-in-new-tab';
 import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
 import { Button } from '../../ui/button';
-import { type ColumnDef, DataTable, type Row, useDataTable } from '../../ui/data-table';
+import { type ColumnDef, DataTable, dataTableLoadingRows, type Row, useDataTable } from '../../ui/data-table';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { TenantAccessCell } from './tenant-access-cell';
 import { TenantCell } from './tenant-cell';
 import { TenantCustomerCell } from './tenant-customer-cell';
@@ -16,6 +17,34 @@ const getRowId = (row: TenantRow) => row.id;
 
 const columnMeta = ({ width, hideAt, align }: TenantsTableColumn) => ({ width, hideAt, align });
 
+/** A tenant still being read: a row the table keys, every field a cell shows empty (each draws its loading form). */
+const loadingTenant = (id: string): TenantRow => ({
+  id,
+  name: '',
+  provider: '',
+  customer: { name: '' },
+  accessState: '',
+});
+
+/** The row's open-in-new-tab button: static chrome, drawn real and inert while the row is read. */
+function OpenTenantButton({ href, name }: { href: string; name: string }) {
+  const loading = useLoadingScope();
+  return (
+    // The row itself is the details link; a nested `<a>` is invalid, so this opens the same href.
+    <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
+      <Button
+        onClick={loading ? undefined : openInNewTab(href)}
+        disabled={loading}
+        variant="outline"
+        size="icon"
+        leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
+        aria-label={`Open ${name} in new tab`}
+        className="bg-ods-card"
+      />
+    </div>
+  );
+}
+
 /**
  * Click handler that opens `href` in a new tab. The row is itself the details
  * link and an `<a>` cannot be nested in an `<a>`, so the button opens it by script.
@@ -39,6 +68,9 @@ export interface TenantsTableViewProps {
   now?: Date;
 }
 
+/** The rows a loading tenants table draws when the host states none (a typical page of tenants). */
+const TENANTS_TABLE_SKELETON_ROWS = 20;
+
 /** The tenants list: tenant, customer, access state and a way into each tenant's details. */
 export function TenantsTableView({
   rows,
@@ -47,7 +79,7 @@ export function TenantsTableView({
   isPending = false,
   totalCount,
   stickyHeaderOffset,
-  skeletonRows = 20,
+  skeletonRows = TENANTS_TABLE_SKELETON_ROWS,
   hasNextPage = false,
   isFetchingNextPage = false,
   onLoadMore,
@@ -89,17 +121,7 @@ export function TenantsTableView({
       {
         id: TENANT_COLUMNS.open.id,
         cell: ({ row }: { row: Row<TenantRow> }) => (
-          // The row itself is the details link; a nested `<a>` is invalid, so this opens the same href.
-          <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
-            <Button
-              onClick={openInNewTab(getHref(row.original))}
-              variant="outline"
-              size="icon"
-              leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
-              aria-label={`Open ${row.original.name} in new tab`}
-              className="bg-ods-card"
-            />
-          </div>
+          <OpenTenantButton href={getHref(row.original)} name={row.original.name} />
         ),
         enableSorting: false,
         meta: columnMeta(TENANT_COLUMNS.open),
@@ -108,7 +130,13 @@ export function TenantsTableView({
     [getHref, now],
   );
 
-  const table = useDataTable<TenantRow>({ data: rows, columns, getRowId, enableSorting: false });
+  // A page's loading scope: the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
+  const loading = useLoadingScope();
+  const loadingRows = useMemo(
+    () => (loading ? dataTableLoadingRows(skeletonRows, loadingTenant) : null),
+    [loading, skeletonRows],
+  );
+  const table = useDataTable<TenantRow>({ data: loadingRows ?? rows, columns, getRowId, enableSorting: false });
 
   return (
     // Dim, don't unmount, the stale rows while a deferred search refetches.
@@ -117,9 +145,10 @@ export function TenantsTableView({
         <DataTable.Header
           stickyHeader={stickyHeaderOffset !== undefined}
           stickyHeaderOffset={stickyHeaderOffset}
-          rightSlot={<DataTable.RowCount itemName="result" totalCount={totalCount ?? rows.length} />}
+          rightSlot={<DataTable.RowCount itemName="result" totalCount={totalCount ?? rows.length} loading={loading} />}
         />
         <DataTable.Body
+          loadingCells
           skeletonRows={skeletonRows}
           emptyState={{
             title: 'No tenants match',
@@ -133,7 +162,6 @@ export function TenantsTableView({
             hasNextPage={hasNextPage}
             isFetchingNextPage={isFetchingNextPage}
             onLoadMore={onLoadMore}
-            skeletonRows={2}
           />
         )}
       </DataTable>

package/src/components/features/command-box.tsx

@@ -5,7 +5,7 @@ import type React from 'react';
 import { cn } from '../../utils/cn';
 import { Copy02Icon } from '../icons-v2-generated/documents/copy-02-icon';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
-import { Button } from '../ui/button';
+import { Button, buttonVariants } from '../ui/button';
 import { FadePreview } from '../ui/fade-preview';
 import { useLoadingScope } from '../ui/loading-scope';
 
@@ -53,6 +53,9 @@ export interface CommandBoxProps {
   onCopy?: () => void;
   /** Accessible label for the corner copy button */
   copyAriaLabel?: string;
+  /** The command is still being read: the box draws its skeleton, as tall as the command, its action labels real. A
+   *  loading scope does the same. */
+  loading?: boolean;
 }
 
 /**
@@ -103,8 +106,7 @@ const COMMAND_BOX_CLASS = 'flex flex-col gap-2';
 const COMMAND_BOX_TITLE_CLASS = 'text-ods-text-primary text-h4';
 const COMMAND_BOX_FRAME_CLASS = 'rounded-[6px] border border-ods-border bg-ods-bg p-4';
 const COMMAND_BOX_COPY_ROW_CLASS = 'flex items-start gap-4';
-const COMMAND_BOX_COPY_BUTTON_CLASS =
-  'shrink-0 rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus';
+const COMMAND_BOX_COPY_BUTTON_LAYOUT = 'shrink-0';
 const COMMAND_BOX_ACTIONS_CLASS = 'mt-4 flex flex-col gap-3 content-md:flex-row content-md:justify-end';
 const COMMAND_BOX_ACTION_CLASS = 'w-full content-md:w-auto';
 /** The fixed-height command area: N rows of the `text-code` line height token. Read by the box and its skeleton. */
@@ -122,10 +124,11 @@ export function CommandBox({
   visibleLines,
   onCopy,
   copyAriaLabel = 'Copy command',
+  loading,
 }: CommandBoxProps) {
   const fixedHeight = visibleLines !== undefined && visibleLines > 0;
   // While the page is read the command is not known: the box is drawn as its skeleton, as tall as the command.
-  if (useLoadingScope()) {
+  if (useLoadingScope() || loading) {
     return (
       <CommandBoxSkeleton
         title={title}
@@ -181,9 +184,16 @@ export function CommandBox({
         {onCopy ? (
           <div className={COMMAND_BOX_COPY_ROW_CLASS}>
             {commandText}
-            <button type="button" onClick={onCopy} aria-label={copyAriaLabel} className={COMMAND_BOX_COPY_BUTTON_CLASS}>
-              <Copy02Icon className="h-5 w-5" />
-            </button>
+            <Button
+              variant="transparent"
+              size="icon-sm"
+              type="button"
+              onClick={onCopy}
+              aria-label={copyAriaLabel}
+              className={COMMAND_BOX_COPY_BUTTON_LAYOUT}
+            >
+              <Copy02Icon />
+            </Button>
           </div>
         ) : (
           commandText
@@ -225,7 +235,7 @@ export function CommandBox({
  * The command box while its command is read: the same box, its title and action buttons for real (their labels are
  * the box's own words), and the command as a bar `lines` lines tall at the command's type step.
  */
-export function CommandBoxSkeleton({
+function CommandBoxSkeleton({
   title,
   lines = 2,
   visibleLines,
@@ -280,8 +290,13 @@ export function CommandBoxSkeleton({
         {showCopy ? (
           <div className={COMMAND_BOX_COPY_ROW_CLASS}>
             {commandLines}
-            <span className={COMMAND_BOX_COPY_BUTTON_CLASS}>
-              <Copy02Icon className="h-5 w-5" />
+            <span
+              className={cn(
+                buttonVariants({ variant: 'transparent', size: 'icon-sm' }),
+                COMMAND_BOX_COPY_BUTTON_LAYOUT,
+              )}
+            >
+              <Copy02Icon />
             </span>
           </div>
         ) : (

package/src/components/features/conversation-card.tsx

@@ -4,15 +4,14 @@ import { type CSSProperties, type ReactNode, useId } from 'react';
 import { cn } from '../../utils/cn';
 import { isOwnClick } from '../../utils/own-click';
 import { useAgentTint } from '../agent-identity';
-import { ChatTurn, ChatTurnNameSkeleton, TURN_BODY_CLASS, TURN_ROW_CLASS } from '../chat/chat-turn';
+import { ChatTurn } from '../chat/chat-turn';
 import { CheckCircleIcon } from '../icons-v2-generated/signs-and-symbols/check-circle-icon';
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
 import { PlusIcon } from '../icons-v2-generated/signs-and-symbols/plus-icon';
 import { LoadingRegion } from '../loading/loading-region';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { BUTTON_ICON_SM_SIZE, Button } from '../ui/button/button';
-import { useLoadingScope } from '../ui/loading-scope';
-import { SquareAvatarSkeleton } from '../ui/square-avatar';
+import { InertWhileLoading, useLoadingScope } from '../ui/loading-scope';
 import { Tag } from '../ui/tag';
 
 /**
@@ -49,6 +48,18 @@ const OUTCOME_TEXT_CLASS = cn('m-0 min-w-0 flex-1', OUTCOME_LINES_CLASS);
 /** The outcome's check, centred on its first line (one line high, by style: it is a mark, not a line of text). */
 const OUTCOME_CHECK_CLASS = 'flex shrink-0 items-center';
 const OUTCOME_CHECK_STYLE = { height: '1lh' } as const;
+/** The request's quote: two lines at least, cut at two. Read by the card and its skeleton. */
+const REQUEST_TEXT_CLASS = 'm-0 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3';
+/** The request clears the corner toggle when the card is pickable: the toggle's width plus a gap. */
+const REQUEST_CLEAR_TOGGLE_STYLE = {
+  paddingRight: `calc(${BUTTON_ICON_SM_SIZE} + var(--spacing-system-xsf))`,
+} as const;
+/** The selection toggle's place, in the card's corner. */
+const SELECTION_TOGGLE_CLASS = 'absolute right-[var(--spacing-system-mf)] top-[var(--spacing-system-mf)] z-10';
+/** The context's label ("Today"): copy the page states, drawn for real in both forms. */
+const CONTEXT_LABEL_CLASS = 'text-ods-text-secondary text-h6';
+/** The speakers' avatar corner as the skeleton draws it. */
+const SKELETON_AVATAR_SHAPE = 'square';
 
 /** The card's frame, its parts' blocks and its footer row: ONE string each, read by the card and its skeleton. */
 const CARD_FRAME_CLASS =
@@ -107,6 +118,8 @@ export interface ConversationCardProps {
   /** The lines the context and the outcome keep at least (default four on a phone, three wide). */
   lines?: ConversationCardLines;
   className?: string;
+  /** Draw the card's loading form outside a loading scope too (`useLoadingScope() || loading`). */
+  loading?: boolean;
 }
 
 /**
@@ -128,17 +141,23 @@ export function ConversationCard({
   context,
   lines,
   className,
+  loading: loadingProp,
 }: ConversationCardProps) {
   const tint = useAgentTint(agent);
   const requestId = useId();
+  const loading = useLoadingScope() || loadingProp;
   // While the page is read the conversation is not known: the card is its skeleton, with the parts it will have.
-  if (useLoadingScope()) {
+  if (loading) {
     return (
       <ConversationCardSkeleton
         avatarPx={CONVERSATION_CARD_AVATAR_PX}
-        context={!!context}
+        // The context's label is the page's copy: drawn for real.
+        context={context ? context.label || true : false}
         requesterMeta={!!requester.meta}
         responderMeta={!!responder.meta}
+        requesterTime={!!requester.time}
+        responderTime={!!responder.time}
+        selection={selection ? { pressed: selection.pressed } : undefined}
         // The loaded card draws a footer only with a label AND a value; a value left undefined says there is none.
         footer={!!footerLabel && footerValue !== undefined}
         footerLabel={footerLabel}
@@ -181,7 +200,7 @@ export function ConversationCard({
             event.stopPropagation();
             selection.onToggle();
           }}
-          className="absolute right-[var(--spacing-system-mf)] top-[var(--spacing-system-mf)] z-10"
+          className={SELECTION_TOGGLE_CLASS}
         >
           {selection.pressed ? <CheckIcon /> : <PlusIcon />}
         </Button>
@@ -190,9 +209,8 @@ export function ConversationCard({
       <ChatTurn avatar={requester.avatar} name={requester.name} meta={requester.meta} time={requester.time}>
         <p
           id={requestId}
-          className="m-0 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3"
-          // Clears the corner mark: its width plus a gap.
-          style={selection ? { paddingRight: `calc(${BUTTON_ICON_SM_SIZE} + var(--spacing-system-xsf))` } : undefined}
+          className={REQUEST_TEXT_CLASS}
+          style={selection ? REQUEST_CLEAR_TOGGLE_STYLE : undefined}
           title={request}
         >
           &ldquo;{request}&rdquo;
@@ -200,7 +218,7 @@ export function ConversationCard({
       </ChatTurn>
       {context && (
         <div className={CONTEXT_BLOCK_CLASS}>
-          <span className="text-ods-text-secondary text-h6">{context.label}</span>
+          <span className={CONTEXT_LABEL_CLASS}>{context.label}</span>
           <p className={CONTEXT_TEXT_CLASS} style={partLinesStyle(lines?.context)}>
             {context.text}
           </p>
@@ -234,30 +252,21 @@ export function ConversationCard({
   );
 }
 
-/** A speaker's turn while loading: the avatar box, the turn's name row (its meta and time), then the turn's own lines. */
-function TurnSkeleton({ avatarPx, meta, children }: { avatarPx: number; meta: boolean | string; children: ReactNode }) {
-  return (
-    <div className={TURN_ROW_CLASS}>
-      <SquareAvatarSkeleton sizePx={avatarPx} />
-      <div className={TURN_BODY_CLASS}>
-        <ChatTurnNameSkeleton meta={meta} time />
-        {children}
-      </div>
-    </div>
-  );
-}
-
 /**
- * The card while it loads: the SAME frame, then each part at the number of
- * lines the loaded card keeps for it (the request's two, the context's
- * `lines`, four on a phone and three wide by default), so a loaded card takes the skeleton's place without
- * moving the page. Pass the parts the loaded card will have.
+ * The card while it loads: the SAME frame, each turn drawn by `ChatTurn`'s own loading form (its picture, name row
+ * and the part under it at the line count the loaded card keeps: the request's two, the context's `lines`, four on a
+ * phone and three wide by default), so a loaded card takes the skeleton's place without moving the page. The page's
+ * own copy (the context's label, the footer's question) and the selection toggle are drawn for real, the toggle inert.
+ * Pass the parts the loaded card will have.
  */
-export function ConversationCardSkeleton({
+function ConversationCardSkeleton({
   avatarPx = CONVERSATION_CARD_AVATAR_PX,
   context = false,
   requesterMeta = false,
   responderMeta = false,
+  requesterTime = true,
+  responderTime = true,
+  selection,
   footer = false,
   footerLabel,
   lines,
@@ -273,12 +282,18 @@ export function ConversationCardSkeleton({
   avatarPx?: number;
   /** The footer's question when the page states it ("Your part"): drawn for real. */
   footerLabel?: string;
-  /** The loaded card has a context part ("Today"). */
-  context?: boolean;
+  /** The loaded card has a context part ("Today"); a string is its label, drawn for real. */
+  context?: boolean | string;
   /** The asker's name carries a meta line (their role); a string is static copy, drawn for real. */
   requesterMeta?: boolean | string;
   /** The answerer's name carries a meta line ("What changes"); a string is static copy, drawn for real. */
   responderMeta?: boolean | string;
+  /** The asker's name row carries a time at its far end. */
+  requesterTime?: boolean;
+  /** The answerer's name row carries a time at its far end. */
+  responderTime?: boolean;
+  /** The loaded card is pickable: its toggle is drawn for real (at its state), inert while it loads. */
+  selection?: { pressed: boolean };
   /** The loaded card has a footer. */
   footer?: boolean;
   /** The lines the loaded card keeps for its context and outcome (`ConversationCardProps.lines`). */
@@ -289,32 +304,70 @@ export function ConversationCardSkeleton({
   const outcomeLines = partLines(lines?.outcome);
   return (
     <LoadingRegion label={label} announce={announce} className={cn(CARD_FRAME_CLASS, className)}>
-      <TurnSkeleton avatarPx={avatarPx} meta={requesterMeta}>
-        <TextLineSkeleton lines={2} type="h3" />
-      </TurnSkeleton>
+      {selection && (
+        <InertWhileLoading className="contents">
+          <Button
+            type="button"
+            variant={selection.pressed ? 'accent' : 'outline'}
+            size="icon-sm"
+            aria-pressed={selection.pressed}
+            className={SELECTION_TOGGLE_CLASS}
+          >
+            {selection.pressed ? <CheckIcon /> : <PlusIcon />}
+          </Button>
+        </InertWhileLoading>
+      )}
+      <ChatTurn
+        loading
+        name=""
+        skeleton={{
+          avatarPx,
+          avatarShape: SKELETON_AVATAR_SHAPE,
+          meta: requesterMeta,
+          time: requesterTime,
+          body: (
+            <div style={selection ? REQUEST_CLEAR_TOGGLE_STYLE : undefined}>
+              <TextLineSkeleton lines={2} type="h3" />
+            </div>
+          ),
+        }}
+      />
       {context && (
         <div className={CONTEXT_BLOCK_CLASS}>
-          <TextLineSkeleton lines={1} type="h6" className="w-1/4" />
+          {typeof context === 'string' ? (
+            <span className={CONTEXT_LABEL_CLASS}>{context}</span>
+          ) : (
+            <TextLineSkeleton lines={1} type="h6" className="w-1/4" />
+          )}
           <p className={CONTEXT_TEXT_CLASS} style={partLinesStyle(contextLines)}>
             <TextLineSkeleton as="span" lines={contextLines.phone} type="h4" className="content-md:hidden" />
             <TextLineSkeleton as="span" lines={contextLines.wide} type="h4" className="hidden content-md:flex" />
           </p>
         </div>
       )}
-      <div className={ANSWER_BLOCK_CLASS}>
-        <TurnSkeleton avatarPx={avatarPx} meta={responderMeta}>
-          {/* The outcome's row: its text at a typical line count, beside the check's place (the row's width). */}
-          <div className={OUTCOME_ROW_CLASS}>
-            <p className={OUTCOME_TEXT_CLASS} style={partLinesStyle(outcomeLines)}>
-              <TextLineSkeleton as="span" lines={outcomeLines.phone} type="h4" className="content-md:hidden" />
-              <TextLineSkeleton as="span" lines={outcomeLines.wide} type="h4" className="hidden content-md:flex" />
-            </p>
-            <span className={cn(OUTCOME_CHECK_CLASS, 'invisible')} style={OUTCOME_CHECK_STYLE}>
-              <CheckCircleIcon size={16} aria-hidden />
-            </span>
-          </div>
-        </TurnSkeleton>
-      </div>
+      <ChatTurn
+        loading
+        name=""
+        className={ANSWER_BLOCK_CLASS}
+        skeleton={{
+          avatarPx,
+          avatarShape: SKELETON_AVATAR_SHAPE,
+          meta: responderMeta,
+          time: responderTime,
+          // The outcome's row: its text at a typical line count, beside the check's place (the row's width).
+          body: (
+            <div className={OUTCOME_ROW_CLASS}>
+              <p className={OUTCOME_TEXT_CLASS} style={partLinesStyle(outcomeLines)}>
+                <TextLineSkeleton as="span" lines={outcomeLines.phone} type="h4" className="content-md:hidden" />
+                <TextLineSkeleton as="span" lines={outcomeLines.wide} type="h4" className="hidden content-md:flex" />
+              </p>
+              <span className={cn(OUTCOME_CHECK_CLASS, 'invisible')} style={OUTCOME_CHECK_STYLE}>
+                <CheckCircleIcon size={16} aria-hidden />
+              </span>
+            </div>
+          ),
+        }}
+      />
       {footer && (
         <div className={cn(FOOTER_ROW_CLASS, 'text-ods-text-secondary text-h6')}>
           {footerLabel ? <span>{footerLabel}</span> : <TextLineSkeleton lines={1} type="h6" className="w-1/4" />}