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

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

@@ -1,10 +1,13 @@
 'use client';
 
+import { ChevronDown } from 'lucide-react';
 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 { FadePreview } from '../ui/fade-preview';
+import { useLoadingScope } from '../ui/loading-scope';
 
 export interface CommandBoxAction {
   /** Button label */
@@ -95,6 +98,19 @@ const lineClampClasses: Record<number, string> = {
   6: 'line-clamp-6',
 };
 
+/** The box's layout, read by the box and by its skeleton, so the skeleton is the box's size. */
+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_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. */
+const fixedCommandHeight = (visibleLines: number) => `calc(${visibleLines} * var(--font-line-space-h6-caption))`;
+/** The fixed-height area's toggle wording, read by the box and by its skeleton. */
+const COMMAND_TOGGLE_LABELS = { more: 'Show all', less: 'Show less' };
 export function CommandBox({
   command,
   title,
@@ -108,6 +124,24 @@ export function CommandBox({
   copyAriaLabel = 'Copy command',
 }: 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()) {
+    return (
+      <CommandBoxSkeleton
+        title={title}
+        lines={!fixedHeight && maxLines > 0 ? maxLines : undefined}
+        visibleLines={fixedHeight ? visibleLines : undefined}
+        primaryActionLabel={primaryAction?.label}
+        primaryActionIcon={primaryAction?.icon}
+        primaryActionVariant={primaryAction?.variant}
+        secondaryActionLabel={secondaryAction?.label}
+        secondaryActionIcon={secondaryAction?.icon}
+        secondaryActionVariant={secondaryAction?.variant}
+        showCopy={Boolean(onCopy)}
+        className={className}
+      />
+    );
+  }
   // Get static line-clamp class or undefined for unlimited
   const lineClampClass = !fixedHeight && maxLines > 0 ? lineClampClasses[maxLines] : undefined;
 
@@ -134,8 +168,8 @@ export function CommandBox({
           without it: the expanded height is re-measured on every commit. */}
       <FadePreview
         fixedHeight
-        collapsedHeight={`calc(${visibleLines} * var(--font-line-space-h6-caption))`}
-        labels={{ more: 'Show all', less: 'Show less' }}
+        collapsedHeight={fixedCommandHeight(visibleLines)}
+        labels={COMMAND_TOGGLE_LABELS}
       >
         {text}
       </FadePreview>
@@ -145,17 +179,17 @@ export function CommandBox({
   );
 
   return (
-    <div className={cn('flex flex-col gap-2', className)}>
-      {title && <div className="text-ods-text-primary text-h4">{title}</div>}
-      <div className="rounded-[6px] border border-ods-border bg-ods-bg p-4">
+    <div className={cn(COMMAND_BOX_CLASS, className)}>
+      {title && <div className={COMMAND_BOX_TITLE_CLASS}>{title}</div>}
+      <div className={COMMAND_BOX_FRAME_CLASS}>
         {onCopy ? (
-          <div className="flex items-start gap-4">
+          <div className={COMMAND_BOX_COPY_ROW_CLASS}>
             {commandText}
             <button
               type="button"
               onClick={onCopy}
               aria-label={copyAriaLabel}
-              className="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"
+              className={COMMAND_BOX_COPY_BUTTON_CLASS}
             >
               <Copy02Icon className="h-5 w-5" />
             </button>
@@ -164,7 +198,7 @@ export function CommandBox({
           commandText
         )}
         {(primaryAction || secondaryAction) && (
-          <div className="mt-4 flex flex-col gap-3 content-md:flex-row content-md:justify-end">
+          <div className={COMMAND_BOX_ACTIONS_CLASS}>
             {secondaryAction && (
               <Button
                 variant={secondaryAction.variant || 'outline'}
@@ -172,7 +206,7 @@ export function CommandBox({
                 onClick={secondaryAction.onClick}
                 disabled={secondaryAction.disabled}
                 loading={secondaryAction.loading}
-                className="w-full content-md:w-auto"
+                className={COMMAND_BOX_ACTION_CLASS}
               >
                 {secondaryAction.label}
               </Button>
@@ -184,7 +218,7 @@ export function CommandBox({
                 onClick={primaryAction.onClick}
                 disabled={primaryAction.disabled}
                 loading={primaryAction.loading}
-                className="w-full content-md:w-auto"
+                className={COMMAND_BOX_ACTION_CLASS}
               >
                 {primaryAction.label}
               </Button>
@@ -195,3 +229,98 @@ export function CommandBox({
     </div>
   );
 }
+
+/**
+ * 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({
+  title,
+  lines = 2,
+  visibleLines,
+  primaryActionLabel,
+  primaryActionIcon,
+  primaryActionVariant,
+  secondaryActionLabel,
+  secondaryActionIcon,
+  secondaryActionVariant,
+  showCopy = false,
+  className,
+}: {
+  title?: string;
+  lines?: number;
+  /** The box's fixed-height mode (`CommandBox` `visibleLines`): that many rows tall, plus the toggle row. */
+  visibleLines?: number;
+  primaryActionLabel?: string;
+  primaryActionIcon?: React.ReactNode;
+  primaryActionVariant?: CommandBoxAction['variant'];
+  secondaryActionLabel?: string;
+  secondaryActionIcon?: React.ReactNode;
+  secondaryActionVariant?: CommandBoxAction['variant'];
+  /** Draw the corner copy glyph (the box has `onCopy`). */
+  showCopy?: boolean;
+  className?: string;
+}) {
+  const commandLines =
+    visibleLines !== undefined && visibleLines > 0 ? (
+      <div className={cn(showCopy && 'min-w-0 flex-1')}>
+        {/* `text-code`'s line height is the token the loaded area's height is N rows of (`fixedCommandHeight`). */}
+        <TextLineSkeleton type="code" lines={visibleLines} />
+        {/* FadePreview's toggle row, which fixed mode always reserves: the real control, unseen. */}
+        <Button
+          type="button"
+          variant="link"
+          size="compact"
+          noPaddingX
+          tabIndex={-1}
+          rightIcon={<ChevronDown />}
+          className="invisible mt-[var(--spacing-system-mf)]"
+        >
+          {COMMAND_TOGGLE_LABELS.more}
+        </Button>
+      </div>
+    ) : (
+      <TextLineSkeleton type="code" lines={Math.max(lines, 1)} className={cn(showCopy && 'min-w-0 flex-1')} />
+    );
+  return (
+    <div className={cn(COMMAND_BOX_CLASS, className)} aria-hidden inert>
+      {title && <div className={COMMAND_BOX_TITLE_CLASS}>{title}</div>}
+      <div className={COMMAND_BOX_FRAME_CLASS}>
+        {showCopy ? (
+          <div className={COMMAND_BOX_COPY_ROW_CLASS}>
+            {commandLines}
+            <span className={COMMAND_BOX_COPY_BUTTON_CLASS}>
+              <Copy02Icon className="h-5 w-5" />
+            </span>
+          </div>
+        ) : (
+          commandLines
+        )}
+        {(primaryActionLabel || secondaryActionLabel) && (
+          <div className={COMMAND_BOX_ACTIONS_CLASS}>
+            {secondaryActionLabel && (
+              <Button
+                variant={secondaryActionVariant || 'outline'}
+                leftIcon={secondaryActionIcon}
+                className={COMMAND_BOX_ACTION_CLASS}
+                tabIndex={-1}
+              >
+                {secondaryActionLabel}
+              </Button>
+            )}
+            {primaryActionLabel && (
+              <Button
+                variant={primaryActionVariant || 'accent'}
+                leftIcon={primaryActionIcon}
+                className={COMMAND_BOX_ACTION_CLASS}
+                tabIndex={-1}
+              >
+                {primaryActionLabel}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,12 +1,66 @@
 'use client';
 
-import type { ReactNode } from 'react';
+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 } from '../chat/chat-turn';
+import { ChatTurn, ChatTurnNameSkeleton, TURN_BODY_CLASS, TURN_ROW_CLASS } 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 { Tag } from '../ui/tag';
 
+/**
+ * The lines a part (the outcome, the context "Today") takes at least, on a narrow card (below `content-md`) and from
+ * `content-md`. A typical outcome or status quo is a sentence or two: four lines in a phone's card and three in a wide
+ * one. A part is never cut: a longer one grows its card (the cards of a row, or of a carousel, stretch to the tallest).
+ * A host that lists its own cards (a curated row) may state the counts its list needs (`lines`), so every card of the
+ * row keeps the tallest card's lines and the skeleton draws them. The counts reach the class through CSS variables
+ * (a class built at runtime emits no CSS); the skeleton draws the same counts.
+ */
+export interface ConversationCardPartLines {
+  phone: number;
+  wide: number;
+}
+export interface ConversationCardLines {
+  context?: ConversationCardPartLines;
+  outcome?: ConversationCardPartLines;
+}
+const DEFAULT_PART_LINES: ConversationCardPartLines = { phone: 4, wide: 3 };
+/** A part's minimum height, from its two counts (`--cc-lines` below `content-md`, `--cc-lines-wide` from it). */
+const PART_LINES_CLASS = 'min-h-[calc(var(--cc-lines)*1lh)] content-md:min-h-[calc(var(--cc-lines-wide)*1lh)]';
+const partLines = (lines: ConversationCardPartLines | undefined) => lines ?? DEFAULT_PART_LINES;
+/** The style that sets a part's counts on its text. */
+const partLinesStyle = (lines: ConversationCardPartLines | undefined) => {
+  const { phone, wide } = partLines(lines);
+  return { '--cc-lines': phone, '--cc-lines-wide': wide } as CSSProperties;
+};
+const CONTEXT_LINES_CLASS = PART_LINES_CLASS;
+const OUTCOME_LINES_CLASS = PART_LINES_CLASS;
+/** The context's text and the outcome's row and text: ONE string each, read by the card and its skeleton. */
+const CONTEXT_TEXT_CLASS = cn('m-0 text-ods-text-secondary text-h4', CONTEXT_LINES_CLASS);
+const OUTCOME_ROW_CLASS = 'flex items-start gap-[var(--spacing-system-xsf)] text-ods-text-secondary text-h4';
+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 card's frame, its parts' blocks and its footer row: ONE string each, read by the card and its skeleton. */
+const CARD_FRAME_CLASS =
+  'relative flex h-full flex-col gap-[var(--spacing-system-mf)] overflow-hidden rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)]';
+const ANSWER_BLOCK_CLASS = 'rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)]';
+/** Only stacks its label and text: a one-column grid, not a column flexbox inside the card's own (WEBVIEW-001). */
+const CONTEXT_BLOCK_CLASS =
+  'grid grid-cols-1 gap-[var(--spacing-system-xxs)] border-ods-border border-t pt-[var(--spacing-system-sf)]';
+const FOOTER_ROW_CLASS = 'mt-auto flex items-center justify-between gap-[var(--spacing-system-sf)]';
+/** The speakers' avatar size the skeleton draws when the card draws it in a loading scope. */
+export const CONVERSATION_CARD_AVATAR_PX = 32;
+
 export interface ConversationCardSpeaker {
   /** Rendered as given (an avatar, an agent mark). */
   avatar: ReactNode;
@@ -26,10 +80,15 @@ export interface ConversationCardProps {
   outcome: string;
   /** Beside the outcome (the person who approved it). */
   outcomeAside?: ReactNode;
-  /** The footer's question ("Your part"). */
-  footerLabel: string;
+  /**
+   * Between the request and the answer: how it is today, before the agent
+   * ("Today" and a line). A pain card's status quo; omitted on a request card.
+   */
+  context?: { label: string; text: string };
+  /** The footer's question ("Your part"). Omitted: no footer. */
+  footerLabel?: string;
   /** The footer's answer ("Nothing", "One tap"). */
-  footerValue: string;
+  footerValue?: string;
   /** `attention` paints the answer in the warning colour: it needs a person. */
   footerTone?: 'default' | 'attention';
   /**
@@ -38,6 +97,15 @@ export interface ConversationCardProps {
    * agent, never a colour.
    */
   agent?: string | null;
+  /**
+   * The card is a toggle the reader picks ("this sounds like me"): one button
+   * with `aria-pressed`, named by the request, stretched over the whole card so
+   * a tap anywhere toggles it; a mark in its corner says whether it is picked,
+   * and a picked card takes the accent ring.
+   */
+  selection?: { pressed: boolean; onToggle: () => void };
+  /** The lines the context and the outcome keep at least (default four on a phone, three wide). */
+  lines?: ConversationCardLines;
   className?: string;
 }
 
@@ -56,45 +124,203 @@ export function ConversationCard({
   footerValue,
   footerTone = 'default',
   agent,
+  selection,
+  context,
+  lines,
   className,
 }: ConversationCardProps) {
   const tint = useAgentTint(agent);
+  const requestId = useId();
+  // While the page is read the conversation is not known: the card is its skeleton, with the parts it will have.
+  if (useLoadingScope()) {
+    return (
+      <ConversationCardSkeleton
+        avatarPx={CONVERSATION_CARD_AVATAR_PX}
+        context={!!context}
+        requesterMeta={!!requester.meta}
+        responderMeta={!!responder.meta}
+        // 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}
+        lines={lines}
+        className={className}
+      />
+    );
+  }
   return (
     <div
       className={cn(
-        'flex h-full flex-col gap-[var(--spacing-system-mf)] overflow-hidden rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)]',
+        CARD_FRAME_CLASS,
+        selection && 'cursor-pointer transition-colors hover:border-ods-border-hover',
+        selection?.pressed && 'border-ods-accent ring-1 ring-ods-accent',
         className,
       )}
       style={tint}
+      onClick={
+        selection &&
+        (event => {
+          // A pointer convenience: the primary button only, never the end of a text selection,
+          // and only the card's own click (`isOwnClick`: not a control or link inside it, not a portal).
+          if (event.button !== 0 || window.getSelection()?.toString()) return;
+          if (!isOwnClick(event.target, event.currentTarget, { controls: true })) return;
+          selection.onToggle();
+        })
+      }
     >
-      {/* Every part keeps a fixed number of lines, so cards in a row or a carousel line up part by part. */}
+      {selection && (
+        // The toggle is a regular boxed Button in the card's corner, named by the
+        // request; a click anywhere on the card toggles it too (a pointer
+        // convenience: the Button is the control keyboards and screen readers use).
+        <Button
+          type="button"
+          variant={selection.pressed ? 'accent' : 'outline'}
+          size="icon-sm"
+          aria-pressed={selection.pressed}
+          aria-labelledby={requestId}
+          onClick={event => {
+            event.stopPropagation();
+            selection.onToggle();
+          }}
+          className="absolute right-[var(--spacing-system-mf)] top-[var(--spacing-system-mf)] z-10"
+        >
+          {selection.pressed ? <CheckIcon /> : <PlusIcon />}
+        </Button>
+      )}
+      {/* Every part keeps at least its number of lines, so cards in a row or a carousel line up part by part. */}
       <ChatTurn avatar={requester.avatar} name={requester.name} meta={requester.meta} time={requester.time}>
-        <p className="m-0 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3" title={request}>
+        <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}
+          title={request}
+        >
           &ldquo;{request}&rdquo;
         </p>
       </ChatTurn>
+      {context && (
+        <div className={CONTEXT_BLOCK_CLASS}>
+          <span className="text-ods-text-secondary text-h6">{context.label}</span>
+          <p className={CONTEXT_TEXT_CLASS} style={partLinesStyle(lines?.context)}>
+            {context.text}
+          </p>
+        </div>
+      )}
       {/* The answer is a command block: who did it, what was done, and its check. */}
       <ChatTurn
         avatar={responder.avatar}
         name={responder.name}
         meta={responder.meta}
         time={responder.time}
-        className="rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)]"
+        className={ANSWER_BLOCK_CLASS}
       >
-        <div className="flex items-start gap-[var(--spacing-system-xsf)] text-ods-text-secondary text-h4">
-          <span className="line-clamp-3 min-h-[3lh] min-w-0 flex-1" title={outcome}>
+        <div className={OUTCOME_ROW_CLASS}>
+          <p className={OUTCOME_TEXT_CLASS} style={partLinesStyle(lines?.outcome)}>
             {outcome}
-          </span>
+          </p>
           {outcomeAside}
-          <span className="flex h-[1lh] shrink-0 items-center">
+          <span className={OUTCOME_CHECK_CLASS} style={OUTCOME_CHECK_STYLE}>
             <CheckCircleIcon size={16} className="text-ods-success" aria-hidden />
           </span>
         </div>
       </ChatTurn>
-      <div className="mt-auto flex items-center justify-between gap-[var(--spacing-system-sf)] text-ods-text-secondary text-h6">
-        <span>{footerLabel}</span>
-        <Tag as="span" label={footerValue} variant={footerTone === 'attention' ? 'warning' : 'badge'} />
+      {footerLabel && footerValue && (
+        <div className={cn(FOOTER_ROW_CLASS, 'text-ods-text-secondary text-h6')}>
+          <span>{footerLabel}</span>
+          <Tag as="span" label={footerValue} variant={footerTone === 'attention' ? 'warning' : 'badge'} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** 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.
+ */
+export function ConversationCardSkeleton({
+  avatarPx = CONVERSATION_CARD_AVATAR_PX,
+  context = false,
+  requesterMeta = false,
+  responderMeta = false,
+  footer = false,
+  footerLabel,
+  lines,
+  label = 'Loading a conversation',
+  announce = true,
+  className,
+}: {
+  /** What a screen reader hears while it loads. */
+  label?: string;
+  /** `false` inside another loading region (a row of cards): only the outermost region announces. */
+  announce?: boolean;
+  /** The speakers' avatar size, as the host draws it. */
+  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 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 loaded card has a footer. */
+  footer?: boolean;
+  /** The lines the loaded card keeps for its context and outcome (`ConversationCardProps.lines`). */
+  lines?: ConversationCardLines;
+  className?: string;
+}) {
+  const contextLines = partLines(lines?.context);
+  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>
+      {context && (
+        <div className={CONTEXT_BLOCK_CLASS}>
+          <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>
+      {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" />}
+          <Tag as="span" label={'\u00a0'} variant="badge" className="invisible" />
+        </div>
+      )}
+    </LoadingRegion>
+  );
+}

package/src/components/features/devices/device-selector/device-selector.tsx

@@ -764,6 +764,7 @@ export function DeviceSelector<T extends DeviceRow = DeviceRow>({
           {!singleSelect && (
             <TabNavigation
               tabs={assignTabs}
+              staticLabels
               activeTab={activeSubTab}
               onTabChange={handleTabChange}
               className="overflow-clip rounded-t-[6px]"

package/src/components/features/devices/devices-panel-view.tsx

@@ -71,7 +71,7 @@ export interface DevicesPanelViewProps<T extends DeviceRow = DeviceRow> {
    */
   loading?: boolean;
   /**
-   * The loading state announces itself, once ("Loading devices…"; the table or grid inside it stays quiet).
+   * The loading state announces itself, once ("Loading devices"; the table or grid inside it stays quiet).
    * `false` inside another loading region. Default `true`.
    */
   loadingRegion?: boolean;
@@ -237,7 +237,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
       {headerSlot}
       {loading && loadingRegion && (
         <span role="status" className="sr-only">
-          Loading devices…
+          Loading devices
         </span>
       )}
       {noOrganizations && !loading && (