@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.750

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

@@ -12,6 +12,25 @@ import { LegalLinks } from './legal-links';
 import type { AuthSsoProvider } from './sso-providers';
 import { SsoProviderButtons } from './sso-providers';
 
+/**
+ * How a block that appears in answer to the email eases in: the prototype's fade from 4px above, short
+ * enough to read as the same card changing rather than a new one arriving.
+ */
+const ENTER_ANIMATION = 'animate-in fade-in-0 slide-in-from-top-1 duration-200 ease-out motion-reduce:animate-none';
+
+/** The sign-in methods of the organization an email resolved to. */
+export interface LoginFormTenantMethods {
+  /** Names the block ("Sign-in methods for <name>") and tags the organization's own providers. */
+  name?: string;
+  /** Its built-in OpenFrame login, offered first. */
+  openframe: boolean;
+  /**
+   * Identity providers it configured with its own credentials, tagged with `name` so they cannot be
+   * mistaken for the generic button of the same provider.
+   */
+  providers: Exclude<AuthSsoProvider, 'openframe'>[];
+}
+
 export interface LoginFormProps {
   /** Controlled email value */
   email: string;
@@ -24,37 +43,39 @@ export interface LoginFormProps {
   };
   /** Informational status under the email field (e.g. live tenant discovery). `errors.email` wins. */
   emailStatus?: { message: string; variant: 'error' | 'warning' | 'success' | 'muted' };
+  /** A message too long for the field's one-line status, shown in a notice row under the field. */
+  notice?: string;
   /**
-   * SSO providers, rendered ABOVE the email field with a divider between the two. Always visible;
-   * gate clickability with `ssoDisabled` / `ssoEnabledProviders`.
+   * The generic providers, under the email field behind `dividerLabel`. They need nothing typed: the
+   * server resolves the organization from the identity the provider asserts. With `tenantMethods`
+   * they follow the organization's own methods; pass `[]` to offer only those.
    */
   ssoProviders: AuthSsoProvider[];
   onSsoClick?: (provider: AuthSsoProvider) => void;
-  /** Disables every provider button (e.g. until the email passes discovery). */
+  /** Disables every provider button (e.g. while the typed email is being looked up). */
   ssoDisabled?: boolean;
-  /** When set, only these providers are clickable; the rest stay disabled. */
+  /** When set, only these generic providers are clickable; the rest stay disabled. */
   ssoEnabledProviders?: AuthSsoProvider[];
   /** Verb prefix for provider buttons, e.g. "Continue with". */
   ssoActionLabel?: string;
-  /** Label on the divider between the provider buttons and the email field. */
+  /** Label on the divider above the generic providers. */
   dividerLabel?: string;
   /**
-   * The discovered tenant's own SSO options, rendered UNDER the email field — unlike `ssoProviders`
-   * above, these depend on knowing the tenant, so they cannot be offered before an address is
-   * typed. Shares `onSsoClick`.
-   *
-   * Three states, and the empty array is not the same as nothing: `undefined` means discovery has
-   * not resolved a tenant yet and the slot stays empty, while `[]` means it resolved and the tenant
-   * has none — which is an answer worth showing rather than silence.
+   * The organization the typed email resolved to. Its methods render above the generic block, under
+   * a heading that names it, so the switch from "any account" to "this organization's sign-in" is
+   * visible rather than a silent change of what the same buttons do.
    */
-  customSsoProviders?: AuthSsoProvider[];
-  /** Shown in place of the custom SSO buttons when the resolved tenant has none configured. */
-  noCustomSsoLabel?: string;
+  tenantMethods?: LoginFormTenantMethods;
   /** Primary submit under the email field. Omit the handler to hide the button. */
   onSubmitClick?: () => void;
   submitLabel?: string;
   /** Disables just the primary submit (fields stay editable). */
   submitDisabled?: boolean;
+  /**
+   * Enter in the email field when there is no submit button, e.g. to look the address up now
+   * instead of after a typing pause. With `onSubmitClick` set, Enter drives that instead.
+   */
+  onEmailEnter?: () => void;
   /** Overrides the default heading. */
   title?: string;
   /** Overrides the default sub-heading. */
@@ -70,11 +91,10 @@ export interface LoginFormProps {
 }
 
 /**
- * Login form (Login tab). Presentational + controlled — the consumer owns
- * state, validation and discovery. Single-screen design: the provider buttons come first and need
- * nothing typed, then the email field below them. Whether the providers are gated is the
- * consumer's call via `ssoDisabled`; the identity-first flows leave them open, because the server
- * resolves the tenant from the identity the provider asserts.
+ * Login form (Login tab). Presentational + controlled — the consumer owns state, validation and
+ * discovery. Email first, sign-in methods under it: everything that changes once the email is known
+ * sits below the field, and the block changes as a whole. Before that the generic providers are
+ * there and need nothing typed; whether they are gated is the consumer's call via `ssoDisabled`.
  */
 export function LoginForm({
   email,
@@ -84,17 +104,18 @@ export function LoginForm({
   disabled = false,
   errors,
   emailStatus,
+  notice,
   ssoProviders,
   onSsoClick,
   ssoDisabled = false,
   ssoEnabledProviders,
   ssoActionLabel = 'Continue with',
-  dividerLabel = 'or continue with OpenFrame SSO',
-  customSsoProviders,
-  noCustomSsoLabel = 'No additional SSO configurations for this domain',
+  dividerLabel = 'or continue with',
+  tenantMethods,
   onSubmitClick,
   submitLabel = 'Continue',
   submitDisabled = false,
+  onEmailEnter,
   title = 'Login to OpenFrame',
   subtitle = 'Enter your email to access your organization.',
   termsUrl,
@@ -102,15 +123,20 @@ export function LoginForm({
   className,
 }: LoginFormProps) {
   const fieldDisabled = disabled || loading;
+  const providersDisabled = fieldDisabled || ssoDisabled;
 
   // Validation messages are deferred while the user is typing (shown on blur or after a pause).
   const emailErr = useDeferredError(errors?.email, email);
 
-  // Enter drives the same action as the visible button, under the same gate. A form with no
-  // submit (the Login tab, where the providers are the only way on) simply does nothing.
+  // Enter drives the same action as the visible button, under the same gate. A held key's repeats
+  // are not new presses: each would re-run an action that can fail fast (a lookup while offline).
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key !== 'Enter' || fieldDisabled || submitDisabled) return;
-    onSubmitClick?.();
+    if (event.key !== 'Enter' || event.repeat || fieldDisabled) return;
+    if (onSubmitClick) {
+      if (!submitDisabled) onSubmitClick();
+      return;
+    }
+    onEmailEnter?.();
   };
 
   return (
@@ -126,21 +152,6 @@ export function LoginForm({
         <p className="text-ods-text-secondary text-h4">{subtitle}</p>
       </div>
 
-      {/* Providers come FIRST. They need nothing typed, and putting the email above them taught
-          people to fill it in before tapping one — the behaviour that made a provider button look
-          broken while it waited on a field it never needed. */}
-      {ssoProviders.length > 0 && (
-        <SsoProviderButtons
-          providers={ssoProviders}
-          onSsoClick={onSsoClick}
-          actionLabel={ssoActionLabel}
-          disabled={disabled || loading || ssoDisabled}
-          enabledProviders={ssoEnabledProviders}
-        />
-      )}
-
-      {ssoProviders.length > 0 && <LabeledDivider label={dividerLabel} />}
-
       {/* Email */}
       <Input
         type="email"
@@ -155,28 +166,21 @@ export function LoginForm({
         onKeyDown={handleKeyDown}
       />
 
-      {customSsoProviders &&
-        (customSsoProviders.length > 0 ? (
-          <SsoProviderButtons
-            providers={customSsoProviders}
-            onSsoClick={onSsoClick}
-            actionLabel={ssoActionLabel}
-            disabled={disabled || loading}
-          />
-        ) : (
-          // Same footprint as the button it stands in for, so nothing shifts when a tenant does
-          // have options. Tokens are the design's: soft-grey surface, grey text and icon, the
-          // bold-body step, a 24px icon, and 12/16 for the inset and the gap.
-          <div
-            role="status"
-            // A minimum, not a fixed height: a consumer's `noCustomSsoLabel` can run to several lines
-            // at phone width, and a fixed row clipped it.
-            className="flex min-h-11 w-full items-center gap-[var(--spacing-system-m)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h3 md:min-h-12"
-          >
-            <AlertTriangleIcon className="h-6 w-6 shrink-0" />
-            {noCustomSsoLabel}
-          </div>
-        ))}
+      {notice && (
+        // Tokens are the design's: soft-grey surface, grey text and icon, the bold-body step, a 24px
+        // icon, and 12/16 for the inset and the gap.
+        <div
+          role="status"
+          // A minimum, not a fixed height: the notice can run to several lines at phone width.
+          className={cn(
+            'flex min-h-11 w-full items-center gap-[var(--spacing-system-m)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h3 md:min-h-12',
+            ENTER_ANIMATION,
+          )}
+        >
+          <AlertTriangleIcon className="h-6 w-6 shrink-0" />
+          {notice}
+        </div>
+      )}
 
       {onSubmitClick && (
         // Full width on a phone, half the row and right-aligned from `md` up, matching the design.
@@ -197,6 +201,59 @@ export function LoginForm({
         </div>
       )}
 
+      {(tenantMethods || ssoProviders.length > 0) && (
+        // 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.
+        <div
+          key={tenantMethods ? `tenant:${tenantMethods.name ?? ''}` : 'generic'}
+          role="group"
+          aria-label="Sign-in methods"
+          className={cn('flex flex-col gap-[var(--spacing-system-l)]', tenantMethods && ENTER_ANIMATION)}
+        >
+          {tenantMethods && (
+            <>
+              <LabeledDivider label={`Sign-in methods for ${tenantMethods.name || 'your organization'}`} />
+              {tenantMethods.openframe && (
+                // Not configured with anyone's credentials, so it carries no tag.
+                <SsoProviderButtons
+                  providers={['openframe']}
+                  onSsoClick={onSsoClick}
+                  actionLabel={ssoActionLabel}
+                  disabled={providersDisabled}
+                />
+              )}
+              {tenantMethods.providers.length > 0 && (
+                <SsoProviderButtons
+                  providers={tenantMethods.providers}
+                  onSsoClick={onSsoClick}
+                  actionLabel={ssoActionLabel}
+                  disabled={providersDisabled}
+                  tag={tenantMethods.name}
+                />
+              )}
+            </>
+          )}
+
+          {ssoProviders.length > 0 && (
+            <>
+              {/* Under an organization heading with nothing above it, a second divider would only
+                separate the heading from its own buttons. */}
+              {(!tenantMethods || tenantMethods.openframe || tenantMethods.providers.length > 0) && (
+                <LabeledDivider label={dividerLabel} />
+              )}
+              <SsoProviderButtons
+                providers={ssoProviders}
+                onSsoClick={onSsoClick}
+                actionLabel={ssoActionLabel}
+                disabled={providersDisabled}
+                enabledProviders={ssoEnabledProviders}
+              />
+            </>
+          )}
+        </div>
+      )}
+
       {termsUrl && privacyPolicyUrl && <LegalLinks termsUrl={termsUrl} privacyPolicyUrl={privacyPolicyUrl} />}
     </div>
   );

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

@@ -2,6 +2,7 @@
 
 import { requireIcon, type IconComponent } from '../../chat/utils/icon-loading';
 import { Button } from '../../ui/button';
+import { StatusBadge } from '../../ui/status-badge';
 
 /** SSO providers offered on the auth forms. */
 export type AuthSsoProvider = 'openframe' | 'google' | 'microsoft' | 'apple';
@@ -34,6 +35,12 @@ export interface SsoProviderButtonsProps {
    * `disabled` still wins over this list.
    */
   enabledProviders?: AuthSsoProvider[];
+  /**
+   * A stamp on every button naming who configured these providers — e.g. the organization whose
+   * own Google Workspace a "Continue with Google" button signs in through, which is not the same
+   * button as the generic one.
+   */
+  tag?: string;
 }
 
 /** Stacked full-width SSO provider buttons shared by the auth forms. */
@@ -43,6 +50,7 @@ export function SsoProviderButtons({
   actionLabel = 'Continue with',
   disabled = false,
   enabledProviders,
+  tag,
 }: SsoProviderButtonsProps) {
   return (
     <div className="flex flex-col gap-[var(--spacing-system-l)]">
@@ -62,6 +70,19 @@ export function SsoProviderButtons({
             onClick={() => onSsoClick?.(provider)}
           >
             {`${actionLabel} ${meta.name}`}
+            {tag && (
+              // A child, not `rightIcon`: the Button lays its children out through a `contents` span,
+              // so the badge is a flex item of the button itself and can give up width (`min-w-0`)
+              // where a long organization name would otherwise push the label out of a phone-width
+              // button. `block` over its inline-flex, because an ellipsis only renders on a block box.
+              <StatusBadge
+                text={tag}
+                variant="button"
+                singleLine
+                title={tag}
+                className="block min-w-0 max-w-32 truncate"
+              />
+            )}
           </Button>
         );
       })}

package/src/components/features/board/ticket-card-skeleton.tsx

@@ -2,7 +2,7 @@
 
 import { type HTMLAttributes, forwardRef } from 'react';
 import { cn } from '../../../utils/cn';
-import { Skeleton } from '../../ui/skeleton';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 
 export interface TicketCardSkeletonProps extends HTMLAttributes<HTMLDivElement> {}
 
@@ -19,21 +19,21 @@ export const TicketCardSkeleton = forwardRef<HTMLDivElement, TicketCardSkeletonP
       <div className="flex items-start gap-[var(--spacing-system-sf)]">
         <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
           <div className="flex items-center text-h3">
-            <Skeleton className="h-4 w-3/4" />
+            <UnifiedSkeleton className="h-4 w-3/4" />
           </div>
           <div className="flex items-center gap-[var(--spacing-system-xxs)] text-h6">
-            <Skeleton className="size-4 shrink-0 rounded-sm" />
-            <Skeleton className="h-3 w-1/2" />
+            <UnifiedSkeleton className="size-4 shrink-0 rounded-sm" />
+            <UnifiedSkeleton className="h-3 w-1/2" />
           </div>
         </div>
         <div className="flex shrink-0 items-center gap-[var(--spacing-system-xsf)]">
-          <Skeleton className="size-4 rounded-sm" />
-          <Skeleton className="size-8 rounded-full" />
+          <UnifiedSkeleton className="size-4 rounded-sm" />
+          <UnifiedSkeleton className="size-8 rounded-full" />
         </div>
       </div>
       <div className="flex h-8 items-center gap-[var(--spacing-system-xxs)]">
-        <Skeleton className="h-8 w-16 rounded-md" />
-        <Skeleton className="h-8 w-12 rounded-md" />
+        <UnifiedSkeleton className="h-8 w-16 rounded-md" />
+        <UnifiedSkeleton className="h-8 w-12 rounded-md" />
       </div>
     </div>
   ),

package/src/components/features/capability-explorer.tsx

@@ -6,7 +6,8 @@ import { cn } from '../../utils/cn';
 import { EntityIcon } from '../icon-display';
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
-import { Skeleton } from '../ui/skeleton';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { SnapCarousel, SnapCarouselControlsSkeleton } from '../ui/snap-carousel';
 import { TruncateText } from '../ui/truncate-text';
 
@@ -167,25 +168,28 @@ function Example({
   );
 }
 
-/** A text placeholder in its line's own box (`text-h…` on the line), so a placeholder line is the loaded line's height. */
-function LineBar({ line, width }: { line: string; width: string }) {
-  return (
-    <div className={line}>
-      <span className={cn('inline-block h-[0.7em] animate-pulse rounded bg-ods-border align-middle', width)} />
-    </div>
-  );
-}
+/**
+ * A text placeholder in its line's own box (`text-h…` on the line, the bar inline in it), so a
+ * placeholder line is the loaded line's height.
+ */
+const LINE_SKELETON_CLASS = 'inline-block h-[0.7em] rounded align-middle';
 
 /** The example's two turns, in the loaded example's own box. */
 function ExampleSkeleton({ className }: { className?: string }) {
   const turn = (first: boolean) => (
     <div className={cn('flex min-w-0 gap-2.5', !first && 'border-t border-ods-border pt-3')}>
-      <Skeleton className="size-6 shrink-0 rounded-full" />
+      <UnifiedSkeleton className="size-6 shrink-0 rounded-full" />
       <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <LineBar line="text-h6" width="w-28" />
+        <div className="text-h6">
+          <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-28')} />
+        </div>
         <div className="min-h-[2lh] text-h4">
-          <LineBar line="text-h4" width="w-full" />
-          <LineBar line="text-h4" width="w-2/3" />
+          <div className="text-h4">
+            <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-full')} />
+          </div>
+          <div className="text-h4">
+            <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-2/3')} />
+          </div>
         </div>
       </div>
     </div>
@@ -207,11 +211,15 @@ function ExampleSkeleton({ className }: { className?: string }) {
 function JobHeadSkeleton() {
   return (
     <>
-      <Skeleton className="size-9 shrink-0 rounded-lg" />
+      <UnifiedSkeleton className="size-9 shrink-0 rounded-lg" />
       <div className="flex min-w-0 flex-1 flex-col">
-        <LineBar line="text-h4" width="w-32" />
+        <div className="text-h4">
+          <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-32')} />
+        </div>
         <div className="mt-0.5">
-          <LineBar line="text-h6" width="w-40" />
+          <div className="text-h6">
+            <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-40')} />
+          </div>
         </div>
       </div>
     </>
@@ -225,9 +233,18 @@ function JobHeadSkeleton() {
  * first card over the carousel's controls. Every box is the loaded one's, so
  * nothing moves when the jobs arrive.
  */
-export function CapabilityExplorerSkeleton({ className, count = 8 }: { className?: string; count?: number }) {
+export function CapabilityExplorerSkeleton({
+  region = true,
+  className,
+  count = 8,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+  className?: string;
+  count?: number;
+}) {
   return (
-    <div className={className} aria-hidden>
+    <LoadingRegion label="Loading capabilities" announce={region} className={className}>
       <div className="content-lg:hidden">
         <div className="flex gap-[var(--spacing-system-sf)] overflow-hidden">
           <div
@@ -240,10 +257,14 @@ export function CapabilityExplorerSkeleton({ className, count = 8 }: { className
               <JobHeadSkeleton />
             </div>
             <div className="min-h-[3lh] text-h6">
-              <LineBar line="text-h6" width="w-full" />
-              <LineBar line="text-h6" width="w-5/6" />
+              <div className="text-h6">
+                <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-full')} />
+              </div>
+              <div className="text-h6">
+                <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-5/6')} />
+              </div>
             </div>
-            <Skeleton className="h-[300px] shrink-0 rounded-lg" />
+            <UnifiedSkeleton className="h-[300px] shrink-0 rounded-lg" />
             <ExampleSkeleton className="shrink-0" />
           </div>
         </div>
@@ -273,36 +294,46 @@ export function CapabilityExplorerSkeleton({ className, count = 8 }: { className
           <div className={cn('grid shrink-0 grid-cols-[minmax(0,1fr)_minmax(0,380px)] gap-8', PANEL_TOP_HEIGHT_CLASS)}>
             <div className="flex min-w-0 flex-col overflow-hidden">
               <div className="mb-2">
-                <LineBar line="text-h2" width="w-64" />
+                <div className="text-h2">
+                  <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-64')} />
+                </div>
               </div>
               <div className="min-h-[3lh] text-h4">
-                <LineBar line="text-h4" width="w-full" />
-                <LineBar line="text-h4" width="w-4/5" />
+                <div className="text-h4">
+                  <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-full')} />
+                </div>
+                <div className="text-h4">
+                  <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-4/5')} />
+                </div>
               </div>
               <div className="mt-auto grid grid-cols-1 gap-2">
                 {[0, 1, 2].map(i => (
                   <div key={i} className="flex min-w-0 items-center gap-2.5">
-                    <Skeleton className="size-4 shrink-0 rounded-full" />
-                    <LineBar line="text-h6" width={i === 1 ? 'w-56' : 'w-48'} />
+                    <UnifiedSkeleton className="size-4 shrink-0 rounded-full" />
+                    <div className="text-h6">
+                      <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, i === 1 ? 'w-56' : 'w-48')} />
+                    </div>
                   </div>
                 ))}
               </div>
             </div>
             <ExampleSkeleton />
           </div>
-          <Skeleton className={cn('shrink-0 rounded-xl', PANEL_SCREEN_HEIGHT_CLASS)} />
+          <UnifiedSkeleton className={cn('shrink-0 rounded-xl', PANEL_SCREEN_HEIGHT_CLASS)} />
           <div
             className={cn(
               'flex min-w-0 shrink-0 items-center gap-[var(--spacing-system-sf)]',
               PANEL_FOOTER_HEIGHT_CLASS,
             )}
           >
-            <LineBar line="text-h5" width="w-16" />
-            <Skeleton className="h-7 w-36 rounded-md" />
+            <div className="text-h5">
+              <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-16')} />
+            </div>
+            <UnifiedSkeleton className="h-7 w-36 rounded-md" />
           </div>
         </div>
       </div>
-    </div>
+    </LoadingRegion>
   );
 }
 

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

@@ -10,7 +10,13 @@ const NO_DEVICES: never[] = [];
  * whichever the caller hands its real `DeviceSelector` it must hand this one too,
  * or the two disagree on how tall the block is.
  */
-type DeviceSelectorSkeletonProps = Pick<DeviceSelectorProps, 'showSelectionModeRadio' | 'singleSelect' | 'hideColumns'>;
+type DeviceSelectorSkeletonProps = Pick<
+  DeviceSelectorProps,
+  'showSelectionModeRadio' | 'singleSelect' | 'hideColumns'
+> & {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+};
 
 /**
  * Suspense fallback for a `DeviceSelector` whose devices come from a suspending
@@ -27,6 +33,6 @@ type DeviceSelectorSkeletonProps = Pick<DeviceSelectorProps, 'showSelectionModeR
  * stands in for, and everything below it jumped down the moment the devices
  * landed.
  */
-export function DeviceSelectorSkeleton(props: DeviceSelectorSkeletonProps) {
-  return <DeviceSelector {...props} devices={NO_DEVICES} loading disabled />;
+export function DeviceSelectorSkeleton({ region = true, ...props }: DeviceSelectorSkeletonProps) {
+  return <DeviceSelector {...props} devices={NO_DEVICES} loading loadingRegion={region} disabled />;
 }

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

@@ -94,6 +94,7 @@ function CustomerCell({ device }: { device: DeviceRow }) {
 export function DeviceSelector<T extends DeviceRow = DeviceRow>({
   devices,
   loading,
+  loadingRegion,
   selectedIds: selectedIdsProp,
   onSelectionChange: onSelectionChangeProp,
   getDeviceKey: getDeviceKeyProp,
@@ -708,6 +709,7 @@ export function DeviceSelector<T extends DeviceRow = DeviceRow>({
       )}
       <DataTable.Body
         loading={loading}
+        loadingRegion={loadingRegion}
         skeletonRows={8}
         emptyMessage={
           isCriteria

package/src/components/features/devices/device-selector/device-selector.types.ts

@@ -68,6 +68,8 @@ export interface DeviceSelectorProps<T extends DeviceRow = DeviceRow> {
   devices: T[];
   /** Whether the device list is loading. */
   loading: boolean;
+  /** The loading state announces itself ("Loading results"). `false` inside another loading region. Default `true`. */
+  loadingRegion?: boolean;
   /**
    * Currently selected device keys. Optional so a skeleton can render the real
    * picker with nothing selected, the component falls back to an empty set and

package/src/components/features/devices/devices-grid.tsx

@@ -16,6 +16,8 @@ export interface DevicesGridProps<T extends DeviceRow = DeviceRow> {
   isFetchingNextPage?: boolean;
   sentinelRef?: React.RefObject<HTMLDivElement | null>;
   emptyMessage?: string;
+  /** The loading state announces itself ("Loading devices"). `false` inside another loading region. Default `true`. */
+  loadingRegion?: boolean;
 }
 
 export function DevicesGrid<T extends DeviceRow = DeviceRow>({
@@ -25,6 +27,7 @@ export function DevicesGrid<T extends DeviceRow = DeviceRow>({
   isFetchingNextPage,
   sentinelRef,
   emptyMessage = 'No devices found. Try adjusting your search or filters.',
+  loadingRegion = true,
 }: DevicesGridProps<T>) {
   const router = useRouter();
   const { getDeviceHref } = useDevicesViewConfig();
@@ -37,7 +40,7 @@ export function DevicesGrid<T extends DeviceRow = DeviceRow>({
   return (
     <div className="space-y-4">
       {isLoading && devices.length === 0 ? (
-        <DeviceCardSkeletonGrid count={12} />
+        <DeviceCardSkeletonGrid count={12} region={loadingRegion} />
       ) : devices.length === 0 ? (
         <div className="flex h-64 items-center justify-center rounded-[6px] border border-ods-border bg-ods-card">
           <p className="text-ods-text-secondary">{emptyMessage}</p>

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

@@ -70,6 +70,11 @@ export interface DevicesPanelViewProps<T extends DeviceRow = DeviceRow> {
    * are the real ones, locked, and only the rows are skeletons.
    */
   loading?: boolean;
+  /**
+   * 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;
   /** The rows on screen answer the previous narrowing while the next loads: dimmed, not replaced. */
   isNarrowing?: boolean;
   /** Server-side total for the current narrowing. */
@@ -127,6 +132,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
   actions,
   devices,
   loading = false,
+  loadingRegion = true,
   isNarrowing = false,
   totalCount,
   deviceFilters = null,
@@ -157,6 +163,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
         <DevicesTableBody
           devices={devices}
           isLoading={loading}
+          loadingRegion={false}
           emptyMessage={loading ? '' : emptyMessage}
           skeletonRows={10}
           stickyHeaderOffset="top-[96px]"
@@ -198,6 +205,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
           <DevicesGrid
             devices={devices}
             isLoading={loading}
+            loadingRegion={false}
             hasNextPage={hasNextPage}
             isFetchingNextPage={isFetchingNextPage}
             sentinelRef={gridSentinelRef}
@@ -227,7 +235,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
       contentClassName="flex flex-col"
     >
       {headerSlot}
-      {loading && (
+      {loading && loadingRegion && (
         <span role="status" className="sr-only">
           Loading devices…
         </span>