diff --git a/.changeset/user-button-infinite-scroll.md b/.changeset/user-button-infinite-scroll.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/user-button-infinite-scroll.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/user-button-integration.md b/.changeset/user-button-integration.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/user-button-integration.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/swingset/src/stories/user-button.stories.tsx b/packages/swingset/src/stories/user-button.stories.tsx
index 0741ed4a2b1..556a86f050e 100644
--- a/packages/swingset/src/stories/user-button.stories.tsx
+++ b/packages/swingset/src/stories/user-button.stories.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { type UserButtonProps, UserButtonView } from '@clerk/ui/mosaic/user-button/user-button.view';
+import { UserButtonView, type UserButtonViewProps } from '@clerk/ui/mosaic/user-button/user-button.view';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -29,7 +29,7 @@ const handlers = {
   onCreateOrganization: () => {},
   onAddAccount: () => {},
   onUpgrade: () => {},
-} satisfies Partial<UserButtonProps>;
+} satisfies Partial<UserButtonViewProps>;
 
 const preston = { sessionId: 'sess_1', userId: 'user_1', name: 'Preston Booth', email: 'preston@clerk.dev' };
 
@@ -37,7 +37,6 @@ export function Default(_args: Record<string, unknown>) {
   return (
     <UserButtonView
       {...handlers}
-      status='ready'
       activeSession={preston}
       activeOrganizationId='org_clerk_app'
       hasOrganizations
@@ -65,7 +64,6 @@ export function Personal(_args: Record<string, unknown>) {
   return (
     <UserButtonView
       {...handlers}
-      status='ready'
       activeSession={{
         sessionId: 'sess_cam',
         userId: 'user_cam',
@@ -88,7 +86,6 @@ export function MultipleSessions(_args: Record<string, unknown>) {
   return (
     <UserButtonView
       {...handlers}
-      status='ready'
       activeSession={preston}
       activeOrganizationId='org_clerk_app'
       hasOrganizations
diff --git a/packages/ui/src/mosaic/components/spinner.tsx b/packages/ui/src/mosaic/components/spinner.tsx
new file mode 100644
index 00000000000..e7d64349cf0
--- /dev/null
+++ b/packages/ui/src/mosaic/components/spinner.tsx
@@ -0,0 +1,38 @@
+// eslint-disable-next-line no-restricted-imports -- Mosaic has no keyframes helper; emotion is the only source, as in components/skeleton.tsx.
+import { keyframes } from '@emotion/react';
+
+import type { SxProp } from '../slot-recipe';
+import { Box, type BoxProps } from './box';
+
+const spin = keyframes({ to: { transform: 'rotate(360deg)' } });
+
+export type SpinnerProps = Omit<BoxProps, 'sx' | 'children'> & { sx?: SxProp };
+
+/**
+ * Indeterminate loading spinner. Decorative (`aria-hidden`) — pair it with a disabled control or an
+ * `aria-busy` container so assistive tech is informed of the pending state. Marked with
+ * `data-cl-spinner` for querying.
+ */
+export function Spinner({ sx, ...rest }: SpinnerProps) {
+  return (
+    <Box
+      aria-hidden
+      data-cl-spinner=''
+      sx={t => ({
+        display: 'inline-block',
+        flexShrink: 0,
+        width: t.spacing(4),
+        height: t.spacing(4),
+        borderRadius: t.rounded.full,
+        borderStyle: 'solid',
+        borderWidth: '2px',
+        borderColor: t.color.border,
+        borderBlockStartColor: t.color.cardForeground,
+        animation: `${spin} 600ms linear infinite`,
+        '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
+        ...(typeof sx === 'function' ? sx(t) : sx),
+      })}
+      {...rest}
+    />
+  );
+}
diff --git a/packages/ui/src/mosaic/hooks/__tests__/useSpinDelay.test.ts b/packages/ui/src/mosaic/hooks/__tests__/useSpinDelay.test.ts
new file mode 100644
index 00000000000..66052c26835
--- /dev/null
+++ b/packages/ui/src/mosaic/hooks/__tests__/useSpinDelay.test.ts
@@ -0,0 +1,88 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useSpinDelay } from '../useSpinDelay';
+
+describe('useSpinDelay', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const render = (value: string | null, options?: { delay?: number; minDuration?: number }) =>
+    renderHook(({ value }) => useSpinDelay(value, options), { initialProps: { value } });
+
+  const advance = (ms: number) => act(() => vi.advanceTimersByTime(ms));
+
+  it('returns null while idle', () => {
+    const { result } = render(null);
+    expect(result.current).toBeNull();
+  });
+
+  it('stays null during the delay window', async () => {
+    const { result, rerender } = render(null, { delay: 500, minDuration: 200 });
+    await act(() => rerender({ value: 'a' }));
+    expect(result.current).toBeNull();
+
+    await advance(499);
+    expect(result.current).toBeNull();
+  });
+
+  it('surfaces the value once it outlasts the delay', async () => {
+    const { result, rerender } = render(null, { delay: 500, minDuration: 200 });
+    await act(() => rerender({ value: 'a' }));
+
+    await advance(500);
+    expect(result.current).toBe('a');
+  });
+
+  it('never surfaces a value that clears faster than the delay', async () => {
+    const { result, rerender } = render(null, { delay: 500, minDuration: 200 });
+    await act(() => rerender({ value: 'a' }));
+
+    await advance(300);
+    await act(() => rerender({ value: null }));
+
+    await advance(1000);
+    expect(result.current).toBeNull();
+  });
+
+  it('holds the value for at least minDuration once shown', async () => {
+    const { result, rerender } = render(null, { delay: 500, minDuration: 200 });
+    await act(() => rerender({ value: 'a' }));
+    await advance(500);
+    expect(result.current).toBe('a');
+
+    // value clears almost immediately after it appeared
+    await act(() => rerender({ value: null }));
+    await advance(199);
+    expect(result.current).toBe('a');
+
+    await advance(1);
+    expect(result.current).toBeNull();
+  });
+
+  it('keeps showing while the value persists beyond minDuration, then clears', async () => {
+    const { result, rerender } = render(null, { delay: 500, minDuration: 200 });
+    await act(() => rerender({ value: 'a' }));
+    await advance(500);
+    await advance(5000);
+    expect(result.current).toBe('a');
+
+    await act(() => rerender({ value: null }));
+    expect(result.current).toBeNull();
+  });
+
+  it('swaps to a new value immediately when one replaces another mid-show', async () => {
+    const { result, rerender } = render(null, { delay: 500, minDuration: 200 });
+    await act(() => rerender({ value: 'a' }));
+    await advance(500);
+    expect(result.current).toBe('a');
+
+    await act(() => rerender({ value: 'b' }));
+    expect(result.current).toBe('b');
+  });
+});
diff --git a/packages/ui/src/mosaic/hooks/useSpinDelay.ts b/packages/ui/src/mosaic/hooks/useSpinDelay.ts
new file mode 100644
index 00000000000..b847c0bc517
--- /dev/null
+++ b/packages/ui/src/mosaic/hooks/useSpinDelay.ts
@@ -0,0 +1,58 @@
+import { useEffect, useRef, useState } from 'react';
+
+export interface SpinDelayOptions {
+  /** Wait this long before showing the value, so quick actions never flash a spinner. */
+  delay?: number;
+  /** Once shown, keep the value up at least this long, so the spinner never flickers off. */
+  minDuration?: number;
+}
+
+const DEFAULT_DELAY = 500;
+const DEFAULT_MIN_DURATION = 200;
+
+/**
+ * Spin-delays a nullable value: returns `null` until `value` has stayed non-null longer than `delay`
+ * (so quick actions never flash a spinner), then holds the last non-null value for at least
+ * `minDuration` after it clears (so the spinner never flickers off). A value-carrying rework of
+ * https://github.com/smeijer/spin-delay: each timer lives in a `const` and is cancelled by effect
+ * cleanup when `value` flips before it fires.
+ */
+export function useSpinDelay<T>(value: T | null, options: SpinDelayOptions = {}): T | null {
+  const delay = options.delay ?? DEFAULT_DELAY;
+  const minDuration = options.minDuration ?? DEFAULT_MIN_DURATION;
+
+  const [shown, setShown] = useState<T | null>(null);
+  const shownAt = useRef(0);
+
+  useEffect(() => {
+    // Nothing showing yet: arm a timer so the value only surfaces if it outlasts `delay`.
+    if (shown === null) {
+      if (value === null) {
+        return;
+      }
+      const timer = setTimeout(() => {
+        shownAt.current = Date.now();
+        setShown(value);
+      }, delay);
+      return () => clearTimeout(timer);
+    }
+
+    // Showing, and the value cleared: hold it for the rest of `minDuration`.
+    if (value === null) {
+      const remaining = minDuration - (Date.now() - shownAt.current);
+      if (remaining <= 0) {
+        setShown(null);
+        return;
+      }
+      const timer = setTimeout(() => setShown(null), remaining);
+      return () => clearTimeout(timer);
+    }
+
+    // Showing, and the value swapped to another non-null: surface it right away.
+    if (value !== shown) {
+      setShown(value);
+    }
+  }, [value, shown, delay, minDuration]);
+
+  return shown;
+}
diff --git a/packages/ui/src/mosaic/user-button/__tests__/user-button.controller.test.tsx b/packages/ui/src/mosaic/user-button/__tests__/user-button.controller.test.tsx
index 6be4951ee0b..56650f7983f 100644
--- a/packages/ui/src/mosaic/user-button/__tests__/user-button.controller.test.tsx
+++ b/packages/ui/src/mosaic/user-button/__tests__/user-button.controller.test.tsx
@@ -24,10 +24,19 @@ let user: FakeUser | null;
 let session: { id: string; checkAuthorization: ReturnType<typeof vi.fn> } | null;
 let organization: { id: string } | null;
 let membershipRequests: { count: number };
-let userMemberships: { data: unknown[]; count: number; revalidate: ReturnType<typeof vi.fn> };
-let userInvitations: { data: unknown[]; count: number; revalidate: ReturnType<typeof vi.fn> };
-let userSuggestions: { data: unknown[]; count: number; revalidate: ReturnType<typeof vi.fn> };
+type FakePaginated = {
+  data: unknown[];
+  count: number;
+  revalidate: ReturnType<typeof vi.fn>;
+  hasNextPage?: boolean;
+  isFetching?: boolean;
+};
+let userMemberships: FakePaginated;
+let userInvitations: FakePaginated;
+let userSuggestions: FakePaginated;
 let signedInSessions: FakeSession[];
+let singleSessionMode: boolean;
+let controllerOptions: UserButtonControllerOptions | undefined;
 
 let setActive: ReturnType<typeof vi.fn>;
 let signOut: ReturnType<typeof vi.fn>;
@@ -50,8 +59,11 @@ vi.mock('@clerk/shared/react', async importOriginal => {
       buildOrganizationProfileUrl: () => '/org-profile',
       buildCreateOrganizationUrl: () => '/create-org',
       buildSignInUrl: () => '/sign-in',
+      buildAfterSignOutUrl: () => '/after-signout',
+      buildAfterMultiSessionSingleSignOutUrl: () => '/after-single-signout',
       client: { signedInSessions },
       __internal_environment: {
+        authConfig: { singleSessionMode },
         displayConfig: {
           afterCreateOrganizationUrl: '/after-create',
           afterSwitchSessionUrl: '/after-switch',
@@ -121,6 +133,8 @@ beforeEach(() => {
   setActive = vi.fn().mockResolvedValue(undefined);
   signOut = vi.fn().mockResolvedValue(undefined);
   navigate = vi.fn().mockResolvedValue(undefined);
+  singleSessionMode = false;
+  controllerOptions = undefined;
 });
 
 afterEach(() => {
@@ -128,7 +142,7 @@ afterEach(() => {
 });
 
 function Harness() {
-  const c = useUserButtonController();
+  const c = useUserButtonController(controllerOptions);
   if (c.status !== 'ready') {
     return <output data-testid='status'>{c.status}</output>;
   }
@@ -142,9 +156,14 @@ function Harness() {
       <output data-testid='active-org'>{String(c.activeOrganizationId)}</output>
       <output data-testid='has-orgs'>{String(c.hasOrganizations)}</output>
       <output data-testid='additional'>{c.additionalSessions.map(a => a.userId).join(',')}</output>
+      <output data-testid='can-add-account'>{String(Boolean(c.onAddAccount))}</output>
+      <output data-testid='can-sign-out-all'>{String(Boolean(c.onSignOutAll))}</output>
       <output data-testid='memberships'>{JSON.stringify(c.memberships)}</output>
       <output data-testid='suggestions'>{JSON.stringify(c.suggestions)}</output>
       <output data-testid='invitations'>{JSON.stringify(c.invitations)}</output>
+      <output data-testid='has-more-rows'>{String(c.hasMoreRows)}</output>
+      <output data-testid='is-fetching-rows'>{String(c.isFetchingRows)}</output>
+      <output data-testid='has-load-more-ref'>{String(typeof c.loadMoreRef === 'function')}</output>
       <button
         type='button'
         onClick={() => void c.onSelectOrganization?.('org_9')}
@@ -322,16 +341,55 @@ describe('useUserButtonController', () => {
     expect(rows[1].membershipRequestCount).toBeUndefined();
   });
 
-  it('selects an organization via setActive with a redirect, and personal via a null organization', () => {
+  it('exposes a load-more ref and derives paging flags from the org lists', () => {
+    const { rerender } = render(<Harness />);
+    expect(screen.getByTestId('has-load-more-ref')).toHaveTextContent('true');
+    expect(screen.getByTestId('has-more-rows')).toHaveTextContent('false');
+    expect(screen.getByTestId('is-fetching-rows')).toHaveTextContent('false');
+
+    userInvitations.hasNextPage = true;
+    userSuggestions.isFetching = true;
+    rerender(<Harness />);
+    expect(screen.getByTestId('has-more-rows')).toHaveTextContent('true');
+    expect(screen.getByTestId('is-fetching-rows')).toHaveTextContent('true');
+  });
+
+  it('selects an organization and personal via setActive, with no redirect when no select url is configured', () => {
+    render(<Harness />);
+
+    fireEvent.click(screen.getByText('select-org'));
+    expect(setActive).toHaveBeenCalledWith({ organization: 'org_9', redirectUrl: undefined });
+
+    fireEvent.click(screen.getByText('select-personal'));
+    expect(setActive).toHaveBeenCalledWith({ organization: null, redirectUrl: undefined });
+  });
+
+  it('resolves a function-form afterSelect url from the selected organization and the user', () => {
+    controllerOptions = {
+      afterSelectOrganizationUrl: org => `/o/${org.id}`,
+      afterSelectPersonalUrl: u => `/me/${u.id}`,
+    };
+    render(<Harness />);
+
+    fireEvent.click(screen.getByText('select-org'));
+    expect(setActive).toHaveBeenCalledWith({ organization: 'org_9', redirectUrl: '/o/org_9' });
+
+    fireEvent.click(screen.getByText('select-personal'));
+    expect(setActive).toHaveBeenCalledWith({ organization: null, redirectUrl: '/me/user_1' });
+  });
+
+  it('resolves a token-string afterSelect url against the selected organization and the user', () => {
+    controllerOptions = {
+      afterSelectOrganizationUrl: '/o/:id',
+      afterSelectPersonalUrl: '/me/:id',
+    };
     render(<Harness />);
 
     fireEvent.click(screen.getByText('select-org'));
-    expect(setActive).toHaveBeenCalledWith(
-      expect.objectContaining({ organization: 'org_9', redirectUrl: '/after-create' }),
-    );
+    expect(setActive).toHaveBeenCalledWith({ organization: 'org_9', redirectUrl: '/o/org_9' });
 
     fireEvent.click(screen.getByText('select-personal'));
-    expect(setActive).toHaveBeenCalledWith(expect.objectContaining({ organization: null }));
+    expect(setActive).toHaveBeenCalledWith({ organization: null, redirectUrl: '/me/user_1' });
   });
 
   it('switches and signs out sessions via setActive and signOut', () => {
@@ -341,10 +399,18 @@ describe('useUserButtonController', () => {
     expect(setActive).toHaveBeenCalledWith(expect.objectContaining({ session: 'sess_2' }));
 
     fireEvent.click(screen.getByText('sign-out-one'));
-    expect(signOut).toHaveBeenCalledWith({ sessionId: 'sess_2' });
+    expect(signOut).toHaveBeenCalledWith({ sessionId: 'sess_2', redirectUrl: '/after-single-signout' });
 
     fireEvent.click(screen.getByText('sign-out-all'));
-    expect(signOut).toHaveBeenCalledWith();
+    expect(signOut).toHaveBeenCalledWith({ redirectUrl: '/after-signout' });
+  });
+
+  it('signs out the only session with the after-sign-out url, not the multi-session url', () => {
+    signedInSessions = [{ id: 'sess_1', user: user as FakeUser }];
+    render(<Harness />);
+
+    fireEvent.click(screen.getByText('sign-out-one'));
+    expect(signOut).toHaveBeenCalledWith({ sessionId: 'sess_2', redirectUrl: '/after-signout' });
   });
 
   it('navigates for manage and create actions using clerk build URLs', () => {
@@ -363,6 +429,19 @@ describe('useUserButtonController', () => {
     expect(navigate).toHaveBeenCalledWith('/create-org');
   });
 
+  it('offers add-account and sign-out-all in multi-session mode', () => {
+    render(<Harness />);
+    expect(screen.getByTestId('can-add-account')).toHaveTextContent('true');
+    expect(screen.getByTestId('can-sign-out-all')).toHaveTextContent('true');
+  });
+
+  it('omits add-account and sign-out-all in single-session mode', () => {
+    singleSessionMode = true;
+    render(<Harness />);
+    expect(screen.getByTestId('can-add-account')).toHaveTextContent('false');
+    expect(screen.getByTestId('can-sign-out-all')).toHaveTextContent('false');
+  });
+
   it('accepts invitations and suggestions, then revalidates the collection', async () => {
     render(<Harness />);
 
diff --git a/packages/ui/src/mosaic/user-button/__tests__/user-button.integration.test.tsx b/packages/ui/src/mosaic/user-button/__tests__/user-button.integration.test.tsx
new file mode 100644
index 00000000000..950810d5b2b
--- /dev/null
+++ b/packages/ui/src/mosaic/user-button/__tests__/user-button.integration.test.tsx
@@ -0,0 +1,427 @@
+import type * as SharedReact from '@clerk/shared/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { MosaicProvider } from '../../MosaicProvider';
+import { UserButton } from '../user-button';
+
+// End-to-end wiring test for the connected UserButton: it renders the real view through the real
+// controller against a mocked Clerk, then drives the real popover DOM. Unlike the controller test
+// (controller -> Clerk) and the view test (props -> DOM), this proves the three layers compose —
+// including the container's close-on-success: one-shot actions close the popover, navigations leave
+// it open.
+
+interface FakeUser {
+  id: string;
+  firstName: string | null;
+  lastName: string | null;
+  username: string | null;
+  primaryEmailAddress: { emailAddress: string } | null;
+  imageUrl: string;
+}
+
+interface FakeSession {
+  id: string;
+  user: FakeUser;
+}
+
+let isUserLoaded: boolean;
+let isSessionLoaded: boolean;
+let isOrgLoaded: boolean;
+let user: FakeUser | null;
+let session: { id: string; checkAuthorization: ReturnType<typeof vi.fn> } | null;
+let organization: { id: string } | null;
+let membershipRequests: { count: number };
+type FakePaginated<T> = {
+  data: T[];
+  count: number;
+  revalidate: ReturnType<typeof vi.fn>;
+  hasNextPage?: boolean;
+  isFetching?: boolean;
+};
+let userMemberships: FakePaginated<ReturnType<typeof membership>>;
+let userInvitations: FakePaginated<ReturnType<typeof acceptable>>;
+let userSuggestions: FakePaginated<ReturnType<typeof acceptable>>;
+let signedInSessions: FakeSession[];
+let singleSessionMode: boolean;
+
+let setActive: ReturnType<typeof vi.fn>;
+let signOut: ReturnType<typeof vi.fn>;
+let navigate: ReturnType<typeof vi.fn>;
+
+vi.mock('@clerk/shared/react', async importOriginal => {
+  const actual = await importOriginal<typeof SharedReact>();
+  return {
+    ...actual,
+    useUser: () => ({ isLoaded: isUserLoaded, user }),
+    useSession: () => ({ isLoaded: isSessionLoaded, session }),
+    useOrganization: () => ({ isLoaded: isOrgLoaded, organization, membershipRequests }),
+    useOrganizationList: () => ({ userMemberships, userInvitations, userSuggestions }),
+    useClerk: () => ({
+      navigate,
+      setActive,
+      signOut,
+      buildUserProfileUrl: () => '/user-profile',
+      buildOrganizationProfileUrl: () => '/org-profile',
+      buildCreateOrganizationUrl: () => '/create-org',
+      buildSignInUrl: () => '/sign-in',
+      buildAfterSignOutUrl: () => '/after-signout',
+      buildAfterMultiSessionSingleSignOutUrl: () => '/after-single-signout',
+      client: { signedInSessions },
+      __internal_environment: {
+        authConfig: { singleSessionMode },
+        displayConfig: {
+          afterCreateOrganizationUrl: '/after-create',
+          afterSwitchSessionUrl: '/after-switch',
+        },
+      },
+    }),
+  };
+});
+
+function acceptable(id: string, orgId: string, orgName: string, status: 'pending' | 'accepted' = 'pending') {
+  return {
+    id,
+    status,
+    accept: vi.fn().mockResolvedValue(undefined),
+    publicOrganizationData: { id: orgId, name: orgName, imageUrl: '' },
+  };
+}
+
+function membership(orgId: string, name: string, membersCount: number) {
+  return { organization: { id: orgId, name, imageUrl: '', membersCount } };
+}
+
+/** A promise whose settling is controlled by the test, to hold an async action in flight. */
+function createDeferred() {
+  let resolve: () => void = () => {};
+  let reject: (reason?: unknown) => void = () => {};
+  const promise = new Promise<void>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+const spinner = () => popup()?.querySelector('[data-cl-spinner]') ?? null;
+
+beforeEach(() => {
+  isUserLoaded = true;
+  isSessionLoaded = true;
+  isOrgLoaded = true;
+  user = {
+    id: 'user_1',
+    firstName: 'Alice',
+    lastName: 'Smith',
+    username: 'alice',
+    primaryEmailAddress: { emailAddress: 'alice@example.com' },
+    imageUrl: 'https://img/alice',
+  };
+  session = { id: 'sess_1', checkAuthorization: vi.fn().mockReturnValue(true) };
+  organization = { id: 'org_1' };
+  membershipRequests = { count: 4 };
+  userMemberships = {
+    data: [membership('org_1', 'Acme', 3), membership('org_9', 'Other', 1)],
+    count: 2,
+    revalidate: vi.fn().mockResolvedValue(undefined),
+  };
+  userInvitations = {
+    data: [acceptable('inv_1', 'org_3', 'Gamma')],
+    count: 1,
+    revalidate: vi.fn().mockResolvedValue(undefined),
+  };
+  userSuggestions = {
+    data: [acceptable('sug_1', 'org_2', 'Beta')],
+    count: 1,
+    revalidate: vi.fn().mockResolvedValue(undefined),
+  };
+  signedInSessions = [
+    { id: 'sess_1', user: user },
+    {
+      id: 'sess_2',
+      user: {
+        id: 'user_2',
+        firstName: 'Bob',
+        lastName: 'Jones',
+        username: null,
+        primaryEmailAddress: { emailAddress: 'bob@example.com' },
+        imageUrl: 'https://img/bob',
+      },
+    },
+  ];
+  setActive = vi.fn().mockResolvedValue(undefined);
+  signOut = vi.fn().mockResolvedValue(undefined);
+  navigate = vi.fn().mockResolvedValue(undefined);
+  singleSessionMode = false;
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+function renderUserButton() {
+  return render(
+    <MosaicProvider>
+      <UserButton />
+    </MosaicProvider>,
+  );
+}
+
+const trigger = () => document.querySelector('[data-cl-slot="user-button-trigger"]');
+const popup = () => document.querySelector('[data-cl-slot="user-button-popup"]');
+
+async function open() {
+  const user = userEvent.setup();
+  await user.click(screen.getByRole('button'));
+  expect(popup()).toBeInTheDocument();
+  return user;
+}
+
+describe('UserButton (connected)', () => {
+  it('renders a non-interactive skeleton trigger while the controller is loading', () => {
+    isUserLoaded = false;
+    renderUserButton();
+    const t = trigger();
+    expect(t).toBeInTheDocument();
+    expect(t).toHaveAttribute('data-cl-loading');
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+
+  it('renders nothing when there is no active user', () => {
+    user = null;
+    renderUserButton();
+    expect(trigger()).toBeNull();
+  });
+
+  it('renders the trigger and keeps the popover closed until clicked', () => {
+    renderUserButton();
+    expect(trigger()).toBeInTheDocument();
+    expect(popup()).toBeNull();
+  });
+
+  it('opens the popover on trigger click', async () => {
+    renderUserButton();
+    await open();
+    expect(screen.getByRole('button', { name: /Other/ })).toBeInTheDocument();
+  });
+
+  it('selecting an organization calls setActive without a redirect by default and closes the popover', async () => {
+    renderUserButton();
+    const user = await open();
+
+    await user.click(screen.getByRole('button', { name: /Other/ }));
+
+    expect(setActive).toHaveBeenCalledWith({ organization: 'org_9', redirectUrl: undefined });
+    await waitFor(() => expect(popup()).not.toBeInTheDocument());
+  });
+
+  it('selecting an organization redirects to the configured afterSelectOrganizationUrl', async () => {
+    const user = userEvent.setup();
+    render(
+      <MosaicProvider>
+        <UserButton afterSelectOrganizationUrl={org => `/o/${org.id}`} />
+      </MosaicProvider>,
+    );
+    await user.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button', { name: /Other/ }));
+
+    expect(setActive).toHaveBeenCalledWith({ organization: 'org_9', redirectUrl: '/o/org_9' });
+  });
+
+  it('selecting the personal workspace calls setActive with a null organization and closes', async () => {
+    renderUserButton();
+    const user = await open();
+
+    await user.click(screen.getByRole('button', { name: /Alice Smith/ }));
+
+    expect(setActive).toHaveBeenCalledWith(expect.objectContaining({ organization: null }));
+    await waitFor(() => expect(popup()).not.toBeInTheDocument());
+  });
+
+  it('switching to an additional account calls setActive with the session and closes', async () => {
+    renderUserButton();
+    const user = await open();
+
+    await user.click(screen.getByRole('button', { name: /Bob Jones/ }));
+
+    expect(setActive).toHaveBeenCalledWith(expect.objectContaining({ session: 'sess_2' }));
+    await waitFor(() => expect(popup()).not.toBeInTheDocument());
+  });
+
+  it('signing out of a single session calls signOut with the session id and closes', async () => {
+    renderUserButton();
+    await open();
+
+    // The per-row "Sign out" is hover-revealed (pointer-events: none until row hover), a visual
+    // state jsdom can't apply, so dispatch the click directly rather than through userEvent.
+    fireEvent.click(screen.getByRole('button', { name: 'Sign out' }));
+
+    expect(signOut).toHaveBeenCalledWith({ sessionId: 'sess_1', redirectUrl: '/after-single-signout' });
+    await waitFor(() => expect(popup()).not.toBeInTheDocument());
+  });
+
+  it('signing out of all accounts calls signOut with the after-sign-out url and closes', async () => {
+    renderUserButton();
+    const user = await open();
+
+    await user.click(screen.getByRole('button', { name: 'Sign out of all accounts' }));
+
+    expect(signOut).toHaveBeenCalledWith({ redirectUrl: '/after-signout' });
+    await waitFor(() => expect(popup()).not.toBeInTheDocument());
+  });
+
+  it('accepting an invitation accepts it, revalidates, and closes', async () => {
+    renderUserButton();
+    const user = await open();
+    const invitation = userInvitations.data[0];
+
+    await user.click(screen.getByRole('button', { name: 'Accept' }));
+
+    await waitFor(() => expect(invitation.accept).toHaveBeenCalledTimes(1));
+    expect(userInvitations.revalidate).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(popup()).not.toBeInTheDocument());
+  });
+
+  it('accepting a suggestion accepts it, revalidates, and closes', async () => {
+    renderUserButton();
+    const user = await open();
+    const suggestion = userSuggestions.data[0];
+
+    await user.click(screen.getByRole('button', { name: 'Join' }));
+
+    await waitFor(() => expect(suggestion.accept).toHaveBeenCalledTimes(1));
+    expect(userSuggestions.revalidate).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(popup()).not.toBeInTheDocument());
+  });
+
+  it('renders an accepted suggestion as non-actionable, without a Join button', async () => {
+    userSuggestions = {
+      data: [acceptable('sug_1', 'org_2', 'Beta', 'accepted')],
+      count: 1,
+      revalidate: vi.fn().mockResolvedValue(undefined),
+    };
+    renderUserButton();
+    await open();
+
+    expect(screen.queryByRole('button', { name: 'Join' })).toBeNull();
+    expect(screen.getByText('Pending approval')).toBeInTheDocument();
+  });
+
+  it('in single-session mode hides add-account and sign-out-of-all', async () => {
+    singleSessionMode = true;
+    signedInSessions = [{ id: 'sess_1', user: user as FakeUser }];
+    renderUserButton();
+    await open();
+
+    expect(screen.queryByRole('button', { name: 'Add account' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Sign out of all accounts' })).toBeNull();
+  });
+
+  it('shows pending invitations and suggestions even with no organization memberships', async () => {
+    userMemberships = { data: [], count: 0, revalidate: vi.fn().mockResolvedValue(undefined) };
+    organization = null;
+    renderUserButton();
+    await open();
+
+    expect(screen.getByRole('button', { name: 'Accept' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Join' })).toBeInTheDocument();
+  });
+
+  it('navigating to manage the organization navigates and leaves the popover open', async () => {
+    renderUserButton();
+    const user = await open();
+
+    await user.click(screen.getByRole('button', { name: 'Settings' }));
+
+    expect(navigate).toHaveBeenCalledWith('/org-profile');
+    expect(popup()).toBeInTheDocument();
+  });
+
+  it('navigating to manage the account (personal mode) navigates and leaves the popover open', async () => {
+    organization = null;
+    renderUserButton();
+    const user = await open();
+
+    await user.click(screen.getByRole('button', { name: 'Manage account' }));
+
+    expect(navigate).toHaveBeenCalledWith('/user-profile');
+    expect(popup()).toBeInTheDocument();
+  });
+
+  it('creating an organization navigates and leaves the popover open', async () => {
+    renderUserButton();
+    const user = await open();
+
+    await user.click(screen.getByRole('button', { name: 'Add organization' }));
+
+    expect(navigate).toHaveBeenCalledWith('/create-org');
+    expect(popup()).toBeInTheDocument();
+  });
+
+  it('shows a spinner on the clicked action and disables other actions while it is in flight', async () => {
+    const deferred = createDeferred();
+    setActive.mockReturnValueOnce(deferred.promise);
+    renderUserButton();
+    const user = await open();
+
+    await user.click(screen.getByRole('button', { name: /Other/ }));
+
+    // The spinner is spin-delayed, so it surfaces only after the delay window elapses.
+    await waitFor(() => expect(spinner()).toBeInTheDocument());
+    expect(screen.getByRole('button', { name: 'Sign out of all accounts' })).toBeDisabled();
+    expect(popup()).toBeInTheDocument();
+
+    deferred.resolve();
+    await waitFor(() => expect(popup()).not.toBeInTheDocument());
+  });
+
+  it('replaces the label with a spinner in the clicked inline button while accepting a suggestion', async () => {
+    const deferred = createDeferred();
+    userSuggestions.data[0].accept.mockReturnValueOnce(deferred.promise);
+    renderUserButton();
+    const user = await open();
+
+    await user.click(screen.getByRole('button', { name: 'Join' }));
+
+    await waitFor(() => expect(spinner()).toBeInTheDocument());
+    expect(screen.queryByRole('button', { name: 'Join' })).toBeNull();
+
+    deferred.resolve();
+    await waitFor(() => expect(popup()).not.toBeInTheDocument());
+  });
+
+  it('keeps the popover open and clears busy state when an action rejects', async () => {
+    const deferred = createDeferred();
+    setActive.mockReturnValueOnce(deferred.promise);
+    renderUserButton();
+    const user = await open();
+
+    await user.click(screen.getByRole('button', { name: /Other/ }));
+    await waitFor(() => expect(spinner()).toBeInTheDocument());
+
+    deferred.reject(new Error('setActive failed'));
+
+    await waitFor(() => expect(spinner()).toBeNull());
+    expect(popup()).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Sign out of all accounts' })).toBeEnabled();
+  });
+
+  const loadMore = () => popup()?.querySelector('[data-cl-slot="user-button-load-more"]') ?? null;
+
+  it('shows the load-more spinner while more workspace pages remain', async () => {
+    userMemberships.hasNextPage = true;
+    renderUserButton();
+    await open();
+
+    expect(loadMore()).toBeInTheDocument();
+    expect(loadMore()?.querySelector('[data-cl-spinner]')).toBeInTheDocument();
+  });
+
+  it('renders no load-more spinner when the workspace lists are fully loaded', async () => {
+    renderUserButton();
+    await open();
+
+    expect(loadMore()).toBeNull();
+  });
+});
diff --git a/packages/ui/src/mosaic/user-button/user-button.controller.tsx b/packages/ui/src/mosaic/user-button/user-button.controller.tsx
index 5a37b70c317..c5935e93535 100644
--- a/packages/ui/src/mosaic/user-button/user-button.controller.tsx
+++ b/packages/ui/src/mosaic/user-button/user-button.controller.tsx
@@ -1,7 +1,8 @@
-import { useClerk, useOrganization, useOrganizationList, useSession, useUser } from '@clerk/shared/react';
-import type { UserResource } from '@clerk/shared/types';
+import { useClerk, useOrganization, useSession, useUser } from '@clerk/shared/react';
+import type { OrganizationResource, UserResource } from '@clerk/shared/types';
 
-import { organizationListParams } from '../../components/OrganizationSwitcher/utils';
+import { populateParamFromObject } from '../../contexts/utils';
+import { useOrganizationListInView } from '../../hooks/useOrganizationListInView';
 import { useMosaicEnvironment } from '../hooks/useMosaicEnvironment';
 import { useMosaicRouter } from '../hooks/useMosaicRouter';
 import type {
@@ -11,15 +12,51 @@ import type {
   UserButtonInvitation,
   UserButtonMembership,
   UserButtonSuggestion,
-} from './user-button.view';
+} from './user-button.types';
+
+// The container awaits these one-shot actions to drive busy state, so the controller exposes their
+// promise; navigation callbacks stay fire-and-forget (`() => void`) and reach the view's DOM handlers.
+interface UserButtonAsyncCallbacks {
+  onSelectOrganization?: (organizationId: string) => void | Promise<unknown>;
+  onSelectPersonal?: () => void | Promise<unknown>;
+  onSwitchSession?: (sessionId: string) => void | Promise<unknown>;
+  onSignOutSession?: (sessionId: string) => void | Promise<unknown>;
+  onSignOutAll?: () => void | Promise<unknown>;
+  onAcceptSuggestion?: (suggestionId: string) => void | Promise<unknown>;
+  onAcceptInvitation?: (invitationId: string) => void | Promise<unknown>;
+}
 
 export type UserButtonController =
   | { status: 'loading' }
   | { status: 'hidden' }
-  | (UserButtonData & UserButtonCallbacks & { status: 'ready' });
+  | (UserButtonData &
+      Omit<UserButtonCallbacks, keyof UserButtonAsyncCallbacks> &
+      UserButtonAsyncCallbacks & { status: 'ready' });
 
 const MANAGE_MEMBERS_PERMISSION = 'org:sys_memberships:manage';
 
+// Mirrors the `<OrganizationSwitcher>` `afterSelect*Url` props: a full URL/path, a `:token` path
+// template resolved against the entity, or a builder function.
+type AfterSelectUrl<T> = ((entity: T) => string) | string;
+
+export interface UserButtonControllerOptions {
+  afterSelectOrganizationUrl?: AfterSelectUrl<OrganizationResource>;
+  afterSelectPersonalUrl?: AfterSelectUrl<UserResource>;
+}
+
+function resolveAfterSelectUrl<T extends OrganizationResource | UserResource>(
+  config: AfterSelectUrl<T> | undefined,
+  entity: T,
+): string | undefined {
+  if (typeof config === 'function') {
+    return config(entity);
+  }
+  if (config) {
+    return populateParamFromObject({ urlWithParam: config, entity });
+  }
+  return undefined;
+}
+
 function displayName(user: UserResource): string {
   const full = [user.firstName, user.lastName].filter(Boolean).join(' ').trim();
   if (full) {
@@ -41,7 +78,7 @@ function toSession(sessionId: string, user: UserResource): UserButtonSession {
   };
 }
 
-export function useUserButtonController(): UserButtonController {
+export function useUserButtonController(options?: UserButtonControllerOptions): UserButtonController {
   const { isLoaded: isUserLoaded, user } = useUser();
   const { isLoaded: isSessionLoaded, session } = useSession();
 
@@ -53,11 +90,13 @@ export function useUserButtonController(): UserButtonController {
     organization,
     membershipRequests,
   } = useOrganization({ membershipRequests: canManageMembers ? true : undefined });
-  const { userMemberships, userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
+  const { userMemberships, userInvitations, userSuggestions, ref: loadMoreRef } = useOrganizationListInView();
 
   const clerk = useClerk();
   const router = useMosaicRouter();
-  const displayConfig = useMosaicEnvironment()?.displayConfig;
+  const environment = useMosaicEnvironment();
+  const displayConfig = environment?.displayConfig;
+  const singleSessionMode = environment?.authConfig?.singleSessionMode ?? false;
 
   if (!isUserLoaded || !isSessionLoaded || !isOrgLoaded) {
     return { status: 'loading' };
@@ -116,18 +155,39 @@ export function useUserButtonController(): UserButtonController {
     suggestions,
     invitations,
     additionalSessions,
-    onSelectOrganization: organizationId =>
-      clerk.setActive({ organization: organizationId, redirectUrl: displayConfig?.afterCreateOrganizationUrl }),
-    onSelectPersonal: () => clerk.setActive({ organization: null }),
+    loadMoreRef,
+    hasMoreRows: Boolean(userMemberships.hasNextPage || userInvitations.hasNextPage || userSuggestions.hasNextPage),
+    isFetchingRows: Boolean(userMemberships.isFetching || userInvitations.isFetching || userSuggestions.isFetching),
+    onSelectOrganization: organizationId => {
+      const selected = membershipData.find(m => m.organization.id === organizationId)?.organization;
+      return clerk.setActive({
+        organization: organizationId,
+        redirectUrl: selected ? resolveAfterSelectUrl(options?.afterSelectOrganizationUrl, selected) : undefined,
+      });
+    },
+    onSelectPersonal: () =>
+      clerk.setActive({
+        organization: null,
+        redirectUrl: resolveAfterSelectUrl(options?.afterSelectPersonalUrl, user),
+      }),
     onSwitchSession: sessionId =>
       clerk.setActive({ session: sessionId, redirectUrl: displayConfig?.afterSwitchSessionUrl }),
-    onSignOutSession: sessionId => clerk.signOut({ sessionId }),
-    onSignOutAll: () => clerk.signOut(),
-    onManageAccount: () => router.navigate(clerk.buildUserProfileUrl()),
-    onManageOrganization: () => router.navigate(clerk.buildOrganizationProfileUrl()),
-    onManageMembers: () => router.navigate(clerk.buildOrganizationProfileUrl()),
-    onCreateOrganization: () => router.navigate(clerk.buildCreateOrganizationUrl()),
-    onAddAccount: () => router.navigate(clerk.buildSignInUrl()),
+    onSignOutSession: sessionId =>
+      clerk.signOut({
+        sessionId,
+        // Other users' sessions remain signed in, so route to the single-session-out URL; otherwise
+        // this is a full sign out.
+        redirectUrl:
+          additionalSessions.length > 0 ? clerk.buildAfterMultiSessionSingleSignOutUrl() : clerk.buildAfterSignOutUrl(),
+      }),
+    // Single-session apps cannot hold a second session, so adding an account and signing out of
+    // "all accounts" are meaningless there; the per-session sign out on the active row remains.
+    onSignOutAll: singleSessionMode ? undefined : () => clerk.signOut({ redirectUrl: clerk.buildAfterSignOutUrl() }),
+    onManageAccount: () => void router.navigate(clerk.buildUserProfileUrl()),
+    onManageOrganization: () => void router.navigate(clerk.buildOrganizationProfileUrl()),
+    onManageMembers: () => void router.navigate(clerk.buildOrganizationProfileUrl()),
+    onCreateOrganization: () => void router.navigate(clerk.buildCreateOrganizationUrl()),
+    onAddAccount: singleSessionMode ? undefined : () => void router.navigate(clerk.buildSignInUrl()),
     onAcceptSuggestion: suggestionId => {
       const suggestion = suggestionData.find(s => s.id === suggestionId);
       return Promise.resolve(suggestion?.accept()).finally(() => void userSuggestions.revalidate?.());
diff --git a/packages/ui/src/mosaic/user-button/user-button.recipe.ts b/packages/ui/src/mosaic/user-button/user-button.recipe.ts
new file mode 100644
index 00000000000..3cbe522b6a8
--- /dev/null
+++ b/packages/ui/src/mosaic/user-button/user-button.recipe.ts
@@ -0,0 +1,348 @@
+import { defineSlotRecipe } from '../slot-recipe';
+
+// Prototype accent (Clerk brand purple) for the plan badge and the Upgrade link. The neutral
+// Mosaic palette has no accent token yet; swap these for a token once one lands.
+const ACCENT = '#6c47ff';
+const ACCENT_SOFT = 'color-mix(in oklab, #6c47ff 14%, transparent)';
+
+export const userButtonRecipe = defineSlotRecipe(theme => ({
+  slots: {
+    trigger: { slot: 'user-button-trigger' },
+    triggerName: { slot: 'user-button-trigger-name' },
+    triggerBadge: { slot: 'user-button-trigger-badge' },
+    popup: { slot: 'user-button-popup' },
+    header: { slot: 'user-button-header' },
+    headerName: { slot: 'user-button-header-name' },
+    headerActions: { slot: 'user-button-header-actions' },
+    action: { slot: 'user-button-action' },
+    group: { slot: 'user-button-group' },
+    scroll: { slot: 'user-button-scroll' },
+    loadMore: { slot: 'user-button-load-more' },
+    groupLabel: { slot: 'user-button-group-label' },
+    item: { slot: 'user-button-item' },
+    select: { slot: 'user-button-select' },
+    name: { slot: 'user-button-name' },
+    secondary: { slot: 'user-button-secondary' },
+    upgrade: { slot: 'user-button-upgrade' },
+    suggestedBadge: { slot: 'user-button-suggested-badge' },
+    inlineButton: { slot: 'user-button-inline-button' },
+    hoverAction: { slot: 'user-button-hover-action' },
+    add: { slot: 'user-button-add' },
+    addIcon: { slot: 'user-button-add-icon' },
+    footer: { slot: 'user-button-footer' },
+    signOutAll: { slot: 'user-button-sign-out-all' },
+    branding: { slot: 'user-button-branding' },
+    avatar: { slot: 'user-button-avatar' },
+  },
+  base: {
+    trigger: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing(2),
+      width: '100%',
+      minWidth: 0,
+      padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
+      borderRadius: theme.rounded.md,
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      textAlign: 'start',
+      color: theme.color.cardForeground,
+      ...theme.text('sm'),
+      _hover: { backgroundColor: theme.color.muted },
+    },
+    triggerName: {
+      fontWeight: theme.font.medium,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+    triggerBadge: {
+      flexShrink: 0,
+      ...theme.text('xs'),
+      fontWeight: theme.font.medium,
+      padding: `${theme.spacing(0.5)} ${theme.spacing(1.5)}`,
+      borderRadius: theme.rounded.full,
+      backgroundColor: ACCENT_SOFT,
+      color: ACCENT,
+      whiteSpace: 'nowrap',
+    },
+    popup: {
+      width: '20rem',
+      maxWidth: 'calc(100vw - 2rem)',
+      backgroundColor: theme.color.card,
+      color: theme.color.cardForeground,
+      border: `1px solid ${theme.color.border}`,
+      borderRadius: theme.rounded.lg,
+      boxShadow: '0 10px 30px rgba(0, 0, 0, 0.12)',
+      overflow: 'hidden',
+      ...theme.text('sm'),
+    },
+    header: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing(3),
+      padding: theme.spacing(4),
+    },
+    headerName: {
+      ...theme.text('sm'),
+      fontWeight: theme.font.semibold,
+      color: theme.color.cardForeground,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+    headerActions: {
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr',
+      gap: theme.spacing(2),
+    },
+    action: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: theme.spacing(2),
+      padding: theme.spacing(2),
+      borderRadius: theme.rounded.md,
+      border: `1px solid ${theme.color.border}`,
+      background: theme.color.card,
+      color: theme.color.cardForeground,
+      ...theme.text('sm'),
+      fontWeight: theme.font.medium,
+      cursor: 'pointer',
+      _hover: { backgroundColor: theme.color.muted },
+    },
+    group: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing(0.5),
+      padding: theme.spacing(1.5),
+      borderTop: `1px solid ${theme.color.border}`,
+    },
+    scroll: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing(0.5),
+      maxHeight: '18rem',
+      overflowY: 'auto',
+    },
+    loadMore: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: theme.spacing(2),
+    },
+    groupLabel: {
+      padding: `${theme.spacing(1.5)} ${theme.spacing(2)} ${theme.spacing(1)}`,
+      ...theme.text('xs'),
+      fontWeight: theme.font.medium,
+      color: theme.color.mutedForeground,
+    },
+    item: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing(2),
+      padding: theme.spacing(2),
+      borderRadius: theme.rounded.md,
+      position: 'relative',
+      _hover: { backgroundColor: theme.color.muted },
+      // Hover-reveal sign out: hidden but focusable (kept in tab order); revealed on row hover
+      // or keyboard focus-within — never a bare `opacity: 0` that would strand the focused button.
+      '& [data-cl-slot="user-button-hover-action"]': { opacity: 0, pointerEvents: 'none' },
+      '&:hover [data-cl-slot="user-button-hover-action"], &:focus-within [data-cl-slot="user-button-hover-action"]':
+        { opacity: 1, pointerEvents: 'auto' },
+    },
+    select: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing(3),
+      flex: 1,
+      minWidth: 0,
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      margin: 0,
+      font: 'inherit',
+      color: 'inherit',
+      textAlign: 'start',
+      cursor: 'pointer',
+    },
+    name: {
+      ...theme.text('sm'),
+      fontWeight: theme.font.medium,
+      color: theme.color.cardForeground,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+    secondary: {
+      ...theme.text('xs'),
+      color: theme.color.mutedForeground,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+    upgrade: {
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      font: 'inherit',
+      cursor: 'pointer',
+      color: ACCENT,
+      fontWeight: theme.font.medium,
+    },
+    suggestedBadge: {
+      flexShrink: 0,
+      ...theme.text('xs'),
+      color: theme.color.mutedForeground,
+      padding: `${theme.spacing(0.5)} ${theme.spacing(1.5)}`,
+      borderRadius: theme.rounded.sm,
+      backgroundColor: theme.color.muted,
+      whiteSpace: 'nowrap',
+    },
+    inlineButton: {
+      flexShrink: 0,
+      ...theme.text('xs'),
+      fontWeight: theme.font.medium,
+      padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+      borderRadius: theme.rounded.md,
+      border: `1px solid ${theme.color.border}`,
+      background: theme.color.card,
+      color: theme.color.cardForeground,
+      cursor: 'pointer',
+      _hover: { backgroundColor: theme.color.muted },
+    },
+    hoverAction: {
+      flexShrink: 0,
+      ...theme.text('xs'),
+      fontWeight: theme.font.medium,
+      padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+      borderRadius: theme.rounded.md,
+      border: `1px solid ${theme.color.border}`,
+      background: theme.color.card,
+      color: theme.color.cardForeground,
+      cursor: 'pointer',
+      transition: 'opacity 120ms ease',
+      _hover: { backgroundColor: theme.color.muted },
+    },
+    add: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing(3),
+      width: '100%',
+      padding: theme.spacing(2),
+      borderRadius: theme.rounded.md,
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      textAlign: 'start',
+      ...theme.text('sm'),
+      color: theme.color.mutedForeground,
+      _hover: { backgroundColor: theme.color.muted },
+    },
+    addIcon: {
+      display: 'grid',
+      placeItems: 'center',
+      flexShrink: 0,
+      width: theme.spacing(9),
+      height: theme.spacing(9),
+      borderRadius: theme.rounded.full,
+      backgroundColor: theme.color.muted,
+      color: theme.color.mutedForeground,
+    },
+    footer: {
+      display: 'flex',
+      flexDirection: 'column',
+      borderTop: `1px solid ${theme.color.border}`,
+      padding: theme.spacing(1.5),
+    },
+    signOutAll: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing(3),
+      width: '100%',
+      padding: theme.spacing(2),
+      borderRadius: theme.rounded.md,
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      textAlign: 'start',
+      ...theme.text('sm'),
+      color: theme.color.mutedForeground,
+      _hover: { backgroundColor: theme.color.muted },
+    },
+    branding: {
+      marginTop: theme.spacing(1),
+      padding: theme.spacing(2),
+      borderTop: `1px solid ${theme.color.border}`,
+      textAlign: 'center',
+      ...theme.text('xs'),
+      color: theme.color.mutedForeground,
+    },
+    avatar: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+      overflow: 'hidden',
+      fontWeight: theme.font.medium,
+      textTransform: 'uppercase',
+      lineHeight: 1,
+      '& > img': { width: '100%', height: '100%', objectFit: 'cover' },
+    },
+  },
+  variants: {
+    shape: {
+      square: {
+        avatar: {
+          borderRadius: theme.rounded.md,
+          backgroundColor: theme.color.primary,
+          color: theme.color.primaryForeground,
+        },
+      },
+      circle: {
+        avatar: {
+          borderRadius: theme.rounded.full,
+          backgroundColor: theme.color.muted,
+          color: theme.color.mutedForeground,
+        },
+      },
+    },
+    size: {
+      sm: { avatar: { width: theme.spacing(5), height: theme.spacing(5), ...theme.text('xs') } },
+      md: { avatar: { width: theme.spacing(9), height: theme.spacing(9), ...theme.text('sm') } },
+    },
+  },
+  defaultVariants: { shape: 'circle', size: 'md' },
+}));
+
+declare module '../registry' {
+  interface MosaicSlotRegistry {
+    'user-button-trigger': true;
+    'user-button-trigger-name': true;
+    'user-button-trigger-badge': true;
+    'user-button-popup': true;
+    'user-button-header': true;
+    'user-button-header-name': true;
+    'user-button-header-actions': true;
+    'user-button-action': true;
+    'user-button-group': true;
+    'user-button-scroll': true;
+    'user-button-load-more': true;
+    'user-button-group-label': true;
+    'user-button-item': true;
+    'user-button-select': true;
+    'user-button-name': true;
+    'user-button-secondary': true;
+    'user-button-upgrade': true;
+    'user-button-suggested-badge': true;
+    'user-button-inline-button': true;
+    'user-button-hover-action': true;
+    'user-button-add': true;
+    'user-button-add-icon': true;
+    'user-button-footer': true;
+    'user-button-sign-out-all': true;
+    'user-button-branding': true;
+    'user-button-avatar': true;
+  }
+}
diff --git a/packages/ui/src/mosaic/user-button/user-button.tsx b/packages/ui/src/mosaic/user-button/user-button.tsx
index 086fe655b79..4bba809515e 100644
--- a/packages/ui/src/mosaic/user-button/user-button.tsx
+++ b/packages/ui/src/mosaic/user-button/user-button.tsx
@@ -2,42 +2,82 @@
 
 import { useState } from 'react';
 
-import { useUserButtonController } from './user-button.controller';
-import { UserButtonView } from './user-button.view';
+import { useSpinDelay } from '../hooks/useSpinDelay';
+import { type UserButtonControllerOptions, useUserButtonController } from './user-button.controller';
+import { userButtonBusyKeys } from './user-button.types';
+import { UserButtonTriggerSkeleton, UserButtonView } from './user-button.view';
+
+export type UserButtonProps = UserButtonControllerOptions;
 
 /**
  * The connected UserButton: reads live Clerk data through `useUserButtonController` and renders
- * the presentational `UserButtonView`. Owns the popover open state and closes it after a successful
- * one-shot action (select/switch/sign out/accept). Actions that open another surface
- * (manage/create navigations) leave the popover as-is.
+ * the presentational `UserButtonView`. Owns the popover open state and the single in-flight action:
+ * it marks the clicked affordance busy (spinner + disables the rest), closes the popover only when the
+ * action resolves, and clears busy state (leaving the popover open) if it rejects. Actions that open
+ * another surface (manage/create navigations) leave the popover as-is.
  */
-export function UserButton() {
-  const controller = useUserButtonController();
+export function UserButton(props: UserButtonProps = {}) {
+  const controller = useUserButtonController(props);
   const [open, setOpen] = useState(false);
+  const [pendingKey, setPendingKey] = useState<string | null>(null);
+
+  // Hold the spinner off for quick actions and steady it once shown. The container still guards
+  // re-entry on the immediate `pendingKey`; only the view's feedback is delayed.
+  const displayPendingKey = useSpinDelay(pendingKey);
+
+  if (controller.status === 'loading') {
+    return <UserButtonTriggerSkeleton />;
+  }
 
   if (controller.status !== 'ready') {
     return null;
   }
 
   const close = () => setOpen(false);
-  const closeOnSuccess = <Args extends unknown[]>(fn?: (...args: Args) => void) =>
-    fn ? (...args: Args) => void Promise.resolve(fn(...args)).finally(close) : undefined;
 
-  const { status, ...data } = controller;
+  // Wraps a one-shot callback: block re-entry while busy, key the in-flight action for the view,
+  // close on success, and always clear busy so a rejection can't leave the UI hanging.
+  const runAction = <Args extends unknown[]>(
+    keyFor: (...args: Args) => string,
+    fn?: (...args: Args) => void | Promise<unknown>,
+  ) =>
+    fn
+      ? (...args: Args) => {
+          if (pendingKey) {
+            return;
+          }
+          setPendingKey(keyFor(...args));
+          void Promise.resolve(fn(...args))
+            .then(close, () => {})
+            .finally(() => setPendingKey(null));
+        }
+      : undefined;
+
+  const {
+    status,
+    onSelectOrganization,
+    onSelectPersonal,
+    onSwitchSession,
+    onSignOutSession,
+    onSignOutAll,
+    onAcceptSuggestion,
+    onAcceptInvitation,
+    ...data
+  } = controller;
 
   return (
     <UserButtonView
       {...data}
-      status={status}
       open={open}
       onOpenChange={setOpen}
-      onSelectOrganization={closeOnSuccess(data.onSelectOrganization)}
-      onSelectPersonal={closeOnSuccess(data.onSelectPersonal)}
-      onSwitchSession={closeOnSuccess(data.onSwitchSession)}
-      onSignOutSession={closeOnSuccess(data.onSignOutSession)}
-      onSignOutAll={closeOnSuccess(data.onSignOutAll)}
-      onAcceptSuggestion={closeOnSuccess(data.onAcceptSuggestion)}
-      onAcceptInvitation={closeOnSuccess(data.onAcceptInvitation)}
+      pendingKey={displayPendingKey}
+      onSelectOrganization={runAction(userButtonBusyKeys.selectOrganization, onSelectOrganization)}
+      onSelectPersonal={runAction(userButtonBusyKeys.selectPersonal, onSelectPersonal)}
+      onSwitchSession={runAction(userButtonBusyKeys.switchSession, onSwitchSession)}
+      onSignOutSession={runAction(userButtonBusyKeys.signOutSession, onSignOutSession)}
+      onSignOutAll={runAction(userButtonBusyKeys.signOutAll, onSignOutAll)}
+      onAcceptSuggestion={runAction(userButtonBusyKeys.acceptSuggestion, onAcceptSuggestion)}
+      onAcceptInvitation={runAction(userButtonBusyKeys.acceptInvitation, onAcceptInvitation)}
     />
   );
 }
diff --git a/packages/ui/src/mosaic/user-button/user-button.types.ts b/packages/ui/src/mosaic/user-button/user-button.types.ts
new file mode 100644
index 00000000000..5dcfcb52610
--- /dev/null
+++ b/packages/ui/src/mosaic/user-button/user-button.types.ts
@@ -0,0 +1,94 @@
+// ─── Data contract ──────────────────────────────────────────────────────────
+// Session-backed, discriminated resource rows. 1:1 with `useUserButtonController()` output so the
+// controller is a drop-in for the presentational view.
+
+export interface UserButtonSession {
+  sessionId: string;
+  userId: string;
+  name: string;
+  email: string;
+  imageUrl?: string;
+}
+
+export interface UserButtonMembership {
+  kind: 'membership';
+  organizationId: string;
+  name: string;
+  imageUrl?: string;
+  membersCount?: number;
+  planLabel?: string;
+  upgradeable?: boolean;
+  membershipRequestCount?: number;
+}
+
+export interface UserButtonSuggestion {
+  kind: 'suggestion';
+  id: string;
+  organizationId: string;
+  name: string;
+  imageUrl?: string;
+  status: 'pending' | 'accepted';
+}
+
+export interface UserButtonInvitation {
+  kind: 'invitation';
+  id: string;
+  organizationId: string;
+  organizationName: string;
+  imageUrl?: string;
+}
+
+export interface UserButtonData {
+  activeSession: UserButtonSession;
+  /** `null` => the personal workspace is active. */
+  activeOrganizationId: string | null;
+  /** Explicit; do not derive from `memberships.length`. */
+  hasOrganizations: boolean;
+  memberships: UserButtonMembership[];
+  suggestions: UserButtonSuggestion[];
+  invitations: UserButtonInvitation[];
+  additionalSessions: UserButtonSession[];
+  /** Attach to the workspace-list sentinel; scrolling it into view pages in more rows. */
+  loadMoreRef?: (element: HTMLElement | null) => void;
+  /** More membership/invitation/suggestion pages remain to fetch. */
+  hasMoreRows?: boolean;
+  /** A page of workspace rows is currently being fetched. */
+  isFetchingRows?: boolean;
+}
+
+/** All optional. An unhandled action hides (or de-activates) the affordance it drives. */
+export interface UserButtonCallbacks {
+  onSelectOrganization?: (organizationId: string) => void;
+  onSelectPersonal?: () => void;
+  onAcceptSuggestion?: (suggestionId: string) => void;
+  onAcceptInvitation?: (invitationId: string) => void;
+  onSwitchSession?: (sessionId: string) => void;
+  onSignOutSession?: (sessionId: string) => void;
+  onSignOutAll?: () => void;
+  onManageOrganization?: () => void;
+  onManageMembers?: () => void;
+  onManageAccount?: () => void;
+  onCreateOrganization?: () => void;
+  onAddAccount?: () => void;
+  onUpgrade?: () => void;
+}
+
+/**
+ * Busy state for the popover. `pendingKey` is the target key of the single in-flight action (see
+ * `userButtonBusyKeys`), or `null` when idle. The affordance whose key matches shows a spinner; every
+ * other affordance is disabled to block double-submits.
+ */
+export interface UserButtonBusyState {
+  pendingKey?: string | null;
+}
+
+/** Stable keys identifying which affordance owns the in-flight action. Shared by container and view. */
+export const userButtonBusyKeys = {
+  selectOrganization: (organizationId: string) => `select-org:${organizationId}`,
+  selectPersonal: () => 'select-personal',
+  switchSession: (sessionId: string) => `switch:${sessionId}`,
+  signOutSession: (sessionId: string) => `sign-out:${sessionId}`,
+  signOutAll: () => 'sign-out-all',
+  acceptSuggestion: (suggestionId: string) => `accept-suggestion:${suggestionId}`,
+  acceptInvitation: (invitationId: string) => `accept-invitation:${invitationId}`,
+} as const;
diff --git a/packages/ui/src/mosaic/user-button/user-button.view.tsx b/packages/ui/src/mosaic/user-button/user-button.view.tsx
index 08ca2e564ab..e21d6231b18 100644
--- a/packages/ui/src/mosaic/user-button/user-button.view.tsx
+++ b/packages/ui/src/mosaic/user-button/user-button.view.tsx
@@ -4,426 +4,84 @@ import type { PopoverProps } from '@clerk/headless/popover';
 import type { ReactNode } from 'react';
 import React from 'react';
 
-import { useMosaicTheme } from '../MosaicProvider';
 import { Icon } from '../components/icon';
+import { Skeleton } from '../components/skeleton';
+import { Spinner } from '../components/spinner';
 import type { IconName } from '../icons/registry';
+import { useMosaicTheme } from '../MosaicProvider';
 import { Popover } from '../primitives/popover';
-import { defineSlotRecipe, useRecipe } from '../slot-recipe';
-
-// Prototype accent (Clerk brand purple) for the plan badge and the Upgrade link. The neutral
-// Mosaic palette has no accent token yet; swap these for a token once one lands.
-const ACCENT = '#6c47ff';
-const ACCENT_SOFT = 'color-mix(in oklab, #6c47ff 14%, transparent)';
-
-// ─── Data contract ──────────────────────────────────────────────────────────
-// Session-backed, discriminated resource rows. Intended to be 1:1 with a future
-// `useUserButtonController()` output so the controller is a drop-in follow-up.
+import { useRecipe } from '../slot-recipe';
+import { userButtonRecipe } from './user-button.recipe';
+import {
+  userButtonBusyKeys,
+  type UserButtonBusyState,
+  type UserButtonCallbacks,
+  type UserButtonData,
+  type UserButtonMembership,
+} from './user-button.types';
+
+type UserButtonContextValue = UserButtonData & UserButtonCallbacks & UserButtonBusyState;
 
-export interface UserButtonSession {
-  sessionId: string;
-  userId: string;
-  name: string;
-  email: string;
-  imageUrl?: string;
-}
-
-export interface UserButtonMembership {
-  kind: 'membership';
-  organizationId: string;
-  name: string;
-  imageUrl?: string;
-  membersCount?: number;
-  planLabel?: string;
-  upgradeable?: boolean;
-  membershipRequestCount?: number;
-}
+// ─── Context ────────────────────────────────────────────────────────────────
 
-export interface UserButtonSuggestion {
-  kind: 'suggestion';
-  id: string;
-  organizationId: string;
-  name: string;
-  imageUrl?: string;
-  status: 'pending' | 'accepted';
-}
+const UserButtonContext = React.createContext<UserButtonContextValue | null>(null);
 
-export interface UserButtonInvitation {
-  kind: 'invitation';
-  id: string;
-  organizationId: string;
-  organizationName: string;
-  imageUrl?: string;
+function useUserButtonContext(): UserButtonContextValue {
+  const ctx = React.useContext(UserButtonContext);
+  if (!ctx) {
+    throw new Error('UserButton compound components must be used within <UserButtonRoot>');
+  }
+  return ctx;
 }
 
-export interface UserButtonData {
-  status: 'loading' | 'ready';
-  activeSession: UserButtonSession;
-  /** `null` => the personal workspace is active. */
-  activeOrganizationId: string | null;
-  /** Explicit; do not derive from `memberships.length`. */
-  hasOrganizations: boolean;
-  memberships: UserButtonMembership[];
-  suggestions: UserButtonSuggestion[];
-  invitations: UserButtonInvitation[];
-  additionalSessions: UserButtonSession[];
+interface BusyState {
+  loading: boolean;
+  disabled: boolean;
 }
 
-/** All optional. An unhandled action hides (or de-activates) the affordance it drives. */
-export interface UserButtonCallbacks {
-  onSelectOrganization?: (organizationId: string) => void;
-  onSelectPersonal?: () => void;
-  onAcceptSuggestion?: (suggestionId: string) => void;
-  onAcceptInvitation?: (invitationId: string) => void;
-  onSwitchSession?: (sessionId: string) => void;
-  onSignOutSession?: (sessionId: string) => void;
-  onSignOutAll?: () => void;
-  onManageOrganization?: () => void;
-  onManageMembers?: () => void;
-  onManageAccount?: () => void;
-  onCreateOrganization?: () => void;
-  onAddAccount?: () => void;
-  onUpgrade?: () => void;
+/** A key-less affordance (navigation) is disabled whenever anything is pending, never `loading`. */
+function resolveBusy(pendingKey: string | null | undefined, key?: string): BusyState {
+  const busy = pendingKey !== null && pendingKey !== undefined;
+  return { loading: key !== undefined && pendingKey === key, disabled: busy && pendingKey !== key };
 }
 
-type UserButtonContextValue = UserButtonData & UserButtonCallbacks;
-
-// ─── Recipe ───────────────────────────────────────────────────────────────────
-
-export const userButtonRecipe = defineSlotRecipe(theme => ({
-  slots: {
-    trigger: { slot: 'user-button-trigger' },
-    triggerName: { slot: 'user-button-trigger-name' },
-    triggerBadge: { slot: 'user-button-trigger-badge' },
-    popup: { slot: 'user-button-popup' },
-    header: { slot: 'user-button-header' },
-    headerName: { slot: 'user-button-header-name' },
-    headerActions: { slot: 'user-button-header-actions' },
-    action: { slot: 'user-button-action' },
-    group: { slot: 'user-button-group' },
-    groupLabel: { slot: 'user-button-group-label' },
-    item: { slot: 'user-button-item' },
-    select: { slot: 'user-button-select' },
-    name: { slot: 'user-button-name' },
-    secondary: { slot: 'user-button-secondary' },
-    upgrade: { slot: 'user-button-upgrade' },
-    suggestedBadge: { slot: 'user-button-suggested-badge' },
-    inlineButton: { slot: 'user-button-inline-button' },
-    hoverAction: { slot: 'user-button-hover-action' },
-    add: { slot: 'user-button-add' },
-    addIcon: { slot: 'user-button-add-icon' },
-    footer: { slot: 'user-button-footer' },
-    signOutAll: { slot: 'user-button-sign-out-all' },
-    branding: { slot: 'user-button-branding' },
-    avatar: { slot: 'user-button-avatar' },
-  },
-  base: {
-    trigger: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: theme.spacing(2),
-      width: '100%',
-      minWidth: 0,
-      padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
-      borderRadius: theme.rounded.md,
-      background: 'none',
-      border: 'none',
-      cursor: 'pointer',
-      textAlign: 'start',
-      color: theme.color.cardForeground,
-      ...theme.text('sm'),
-      _hover: { backgroundColor: theme.color.muted },
-    },
-    triggerName: {
-      fontWeight: theme.font.medium,
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
-    triggerBadge: {
-      flexShrink: 0,
-      ...theme.text('xs'),
-      fontWeight: theme.font.medium,
-      padding: `${theme.spacing(0.5)} ${theme.spacing(1.5)}`,
-      borderRadius: theme.rounded.full,
-      backgroundColor: ACCENT_SOFT,
-      color: ACCENT,
-      whiteSpace: 'nowrap',
-    },
-    popup: {
-      width: '20rem',
-      maxWidth: 'calc(100vw - 2rem)',
-      backgroundColor: theme.color.card,
-      color: theme.color.cardForeground,
-      border: `1px solid ${theme.color.border}`,
-      borderRadius: theme.rounded.lg,
-      boxShadow: '0 10px 30px rgba(0, 0, 0, 0.12)',
-      overflow: 'hidden',
-      ...theme.text('sm'),
-    },
-    header: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: theme.spacing(3),
-      padding: theme.spacing(4),
-    },
-    headerName: {
-      ...theme.text('sm'),
-      fontWeight: theme.font.semibold,
-      color: theme.color.cardForeground,
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
-    headerActions: {
-      display: 'grid',
-      gridTemplateColumns: '1fr 1fr',
-      gap: theme.spacing(2),
-    },
-    action: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: theme.spacing(2),
-      padding: theme.spacing(2),
-      borderRadius: theme.rounded.md,
-      border: `1px solid ${theme.color.border}`,
-      background: theme.color.card,
-      color: theme.color.cardForeground,
-      ...theme.text('sm'),
-      fontWeight: theme.font.medium,
-      cursor: 'pointer',
-      _hover: { backgroundColor: theme.color.muted },
-    },
-    group: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: theme.spacing(0.5),
-      padding: theme.spacing(1.5),
-      borderTop: `1px solid ${theme.color.border}`,
-    },
-    groupLabel: {
-      padding: `${theme.spacing(1.5)} ${theme.spacing(2)} ${theme.spacing(1)}`,
-      ...theme.text('xs'),
-      fontWeight: theme.font.medium,
-      color: theme.color.mutedForeground,
-    },
-    item: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: theme.spacing(2),
-      padding: theme.spacing(2),
-      borderRadius: theme.rounded.md,
-      position: 'relative',
-      _hover: { backgroundColor: theme.color.muted },
-      // Hover-reveal sign out: hidden but focusable (kept in tab order); revealed on row hover
-      // or keyboard focus-within — never a bare `opacity: 0` that would strand the focused button.
-      '& [data-cl-slot="user-button-hover-action"]': { opacity: 0, pointerEvents: 'none' },
-      '&:hover [data-cl-slot="user-button-hover-action"], &:focus-within [data-cl-slot="user-button-hover-action"]':
-        { opacity: 1, pointerEvents: 'auto' },
-    },
-    select: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: theme.spacing(3),
-      flex: 1,
-      minWidth: 0,
-      background: 'none',
-      border: 'none',
-      padding: 0,
-      margin: 0,
-      font: 'inherit',
-      color: 'inherit',
-      textAlign: 'start',
-      cursor: 'pointer',
-    },
-    name: {
-      ...theme.text('sm'),
-      fontWeight: theme.font.medium,
-      color: theme.color.cardForeground,
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
-    secondary: {
-      ...theme.text('xs'),
-      color: theme.color.mutedForeground,
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
-    upgrade: {
-      background: 'none',
-      border: 'none',
-      padding: 0,
-      font: 'inherit',
-      cursor: 'pointer',
-      color: ACCENT,
-      fontWeight: theme.font.medium,
-    },
-    suggestedBadge: {
-      flexShrink: 0,
-      ...theme.text('xs'),
-      color: theme.color.mutedForeground,
-      padding: `${theme.spacing(0.5)} ${theme.spacing(1.5)}`,
-      borderRadius: theme.rounded.sm,
-      backgroundColor: theme.color.muted,
-      whiteSpace: 'nowrap',
-    },
-    inlineButton: {
-      flexShrink: 0,
-      ...theme.text('xs'),
-      fontWeight: theme.font.medium,
-      padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
-      borderRadius: theme.rounded.md,
-      border: `1px solid ${theme.color.border}`,
-      background: theme.color.card,
-      color: theme.color.cardForeground,
-      cursor: 'pointer',
-      _hover: { backgroundColor: theme.color.muted },
-    },
-    hoverAction: {
-      flexShrink: 0,
-      ...theme.text('xs'),
-      fontWeight: theme.font.medium,
-      padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
-      borderRadius: theme.rounded.md,
-      border: `1px solid ${theme.color.border}`,
-      background: theme.color.card,
-      color: theme.color.cardForeground,
-      cursor: 'pointer',
-      transition: 'opacity 120ms ease',
-      _hover: { backgroundColor: theme.color.muted },
-    },
-    add: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: theme.spacing(3),
-      width: '100%',
-      padding: theme.spacing(2),
-      borderRadius: theme.rounded.md,
-      background: 'none',
-      border: 'none',
-      cursor: 'pointer',
-      textAlign: 'start',
-      ...theme.text('sm'),
-      color: theme.color.mutedForeground,
-      _hover: { backgroundColor: theme.color.muted },
-    },
-    addIcon: {
-      display: 'grid',
-      placeItems: 'center',
-      flexShrink: 0,
-      width: theme.spacing(9),
-      height: theme.spacing(9),
-      borderRadius: theme.rounded.full,
-      backgroundColor: theme.color.muted,
-      color: theme.color.mutedForeground,
-    },
-    footer: {
-      display: 'flex',
-      flexDirection: 'column',
-      borderTop: `1px solid ${theme.color.border}`,
-      padding: theme.spacing(1.5),
-    },
-    signOutAll: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: theme.spacing(3),
-      width: '100%',
-      padding: theme.spacing(2),
-      borderRadius: theme.rounded.md,
-      background: 'none',
-      border: 'none',
-      cursor: 'pointer',
-      textAlign: 'start',
-      ...theme.text('sm'),
-      color: theme.color.mutedForeground,
-      _hover: { backgroundColor: theme.color.muted },
-    },
-    branding: {
-      marginTop: theme.spacing(1),
-      padding: theme.spacing(2),
-      borderTop: `1px solid ${theme.color.border}`,
-      textAlign: 'center',
-      ...theme.text('xs'),
-      color: theme.color.mutedForeground,
-    },
-    avatar: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexShrink: 0,
-      overflow: 'hidden',
-      fontWeight: theme.font.medium,
-      textTransform: 'uppercase',
-      lineHeight: 1,
-      '& > img': { width: '100%', height: '100%', objectFit: 'cover' },
-    },
-  },
-  variants: {
-    shape: {
-      square: {
-        avatar: {
-          borderRadius: theme.rounded.md,
-          backgroundColor: theme.color.primary,
-          color: theme.color.primaryForeground,
-        },
-      },
-      circle: {
-        avatar: {
-          borderRadius: theme.rounded.full,
-          backgroundColor: theme.color.muted,
-          color: theme.color.mutedForeground,
-        },
-      },
-    },
-    size: {
-      sm: { avatar: { width: theme.spacing(5), height: theme.spacing(5), ...theme.text('xs') } },
-      md: { avatar: { width: theme.spacing(9), height: theme.spacing(9), ...theme.text('sm') } },
-    },
-  },
-  defaultVariants: { shape: 'circle', size: 'md' },
-}));
-
-declare module '../registry' {
-  interface MosaicSlotRegistry {
-    'user-button-trigger': true;
-    'user-button-trigger-name': true;
-    'user-button-trigger-badge': true;
-    'user-button-popup': true;
-    'user-button-header': true;
-    'user-button-header-name': true;
-    'user-button-header-actions': true;
-    'user-button-action': true;
-    'user-button-group': true;
-    'user-button-group-label': true;
-    'user-button-item': true;
-    'user-button-select': true;
-    'user-button-name': true;
-    'user-button-secondary': true;
-    'user-button-upgrade': true;
-    'user-button-suggested-badge': true;
-    'user-button-inline-button': true;
-    'user-button-hover-action': true;
-    'user-button-add': true;
-    'user-button-add-icon': true;
-    'user-button-footer': true;
-    'user-button-sign-out-all': true;
-    'user-button-branding': true;
-    'user-button-avatar': true;
-  }
+function useBusy(key?: string): BusyState {
+  const { pendingKey } = useUserButtonContext();
+  return resolveBusy(pendingKey, key);
 }
 
-// ─── Context ────────────────────────────────────────────────────────────────
+type BusySlot = 'inlineButton' | 'hoverAction' | 'action' | 'signOutAll';
 
-const UserButtonContext = React.createContext<UserButtonContextValue | null>(null);
-
-function useUserButtonContext(): UserButtonContextValue {
-  const ctx = React.useContext(UserButtonContext);
-  if (!ctx) {
-    throw new Error('UserButton compound components must be used within <UserButtonRoot>');
-  }
-  return ctx;
+/**
+ * A button whose action can be in flight: swaps `leading` for a spinner while `busyKey` is the pending
+ * action, and disables itself whenever any action is pending. `children` persist across the swap.
+ */
+function BusyButton({
+  slot,
+  busyKey,
+  onClick,
+  leading,
+  children,
+}: {
+  slot: BusySlot;
+  busyKey?: string;
+  onClick: () => void;
+  leading?: ReactNode;
+  children?: ReactNode;
+}) {
+  const recipe = useRecipe(userButtonRecipe);
+  const { loading, disabled } = useBusy(busyKey);
+  return (
+    <button
+      type='button'
+      onClick={onClick}
+      disabled={loading || disabled}
+      {...recipe[slot]}
+    >
+      {loading ? <Spinner /> : leading}
+      {children}
+    </button>
+  );
 }
 
 function activeMembership(data: UserButtonData): UserButtonMembership | undefined {
@@ -484,11 +142,14 @@ interface RowProps {
   badge?: ReactNode;
   trailing?: ReactNode;
   hoverAction?: ReactNode;
+  /** Key for this row's own select action; drives its spinner/disabled state. */
+  busyKey?: string;
 }
 
-function Row({ name, secondary, shape, imageUrl, onSelect, active, badge, trailing, hoverAction }: RowProps) {
+function Row({ name, secondary, shape, imageUrl, onSelect, active, badge, trailing, hoverAction, busyKey }: RowProps) {
   const theme = useMosaicTheme();
   const { item, select, name: nameSlot, secondary: secondarySlot } = useRecipe(userButtonRecipe);
+  const { loading, disabled } = useBusy(busyKey);
   const inner = (
     <>
       <Avatar
@@ -512,6 +173,7 @@ function Row({ name, secondary, shape, imageUrl, onSelect, active, badge, traili
         <button
           type='button'
           onClick={onSelect}
+          disabled={loading || disabled}
           {...select}
         >
           {inner}
@@ -524,7 +186,9 @@ function Row({ name, secondary, shape, imageUrl, onSelect, active, badge, traili
           {inner}
         </div>
       )}
-      {active ? (
+      {loading ? (
+        <Spinner />
+      ) : active ? (
         <Icon
           name='check'
           size='sm'
@@ -542,39 +206,20 @@ function SuggestedBadge() {
   return <span {...suggestedBadge}>Suggested</span>;
 }
 
-function InlineButton({ label, onClick }: { label: string; onClick: () => void }) {
-  const { inlineButton } = useRecipe(userButtonRecipe);
-  return (
-    <button
-      type='button'
-      onClick={onClick}
-      {...inlineButton}
-    >
-      {label}
-    </button>
-  );
-}
-
-function HoverAction({ onClick }: { onClick: () => void }) {
-  const { hoverAction } = useRecipe(userButtonRecipe);
-  return (
-    <button
-      type='button'
-      onClick={onClick}
-      {...hoverAction}
-    >
-      Sign out
-    </button>
-  );
+function PendingApprovalLabel() {
+  const { suggestedBadge } = useRecipe(userButtonRecipe);
+  return <span {...suggestedBadge}>Pending approval</span>;
 }
 
 function AddRow({ label, onClick }: { label: string; onClick: () => void }) {
   const theme = useMosaicTheme();
   const { add, addIcon } = useRecipe(userButtonRecipe);
+  const { disabled } = useBusy();
   return (
     <button
       type='button'
       onClick={onClick}
+      disabled={disabled}
       {...add}
     >
       <span {...addIcon}>
@@ -595,12 +240,13 @@ interface HeaderAction {
   icon: IconName;
   label: string;
   onClick: () => void;
+  busyKey?: string;
 }
 
 function Header() {
   const theme = useMosaicTheme();
   const data = useUserButtonContext();
-  const { header, headerName, headerActions, action, secondary, upgrade } = useRecipe(userButtonRecipe);
+  const { header, headerName, headerActions, secondary, upgrade } = useRecipe(userButtonRecipe);
   const org = activeMembership(data);
   const isOrg = org !== undefined;
   const label = isOrg ? org.name : data.activeSession.name;
@@ -620,7 +266,12 @@ function Header() {
     }
     const signOut = data.onSignOutSession;
     if (signOut) {
-      actions.push({ icon: 'log-out', label: 'Sign out', onClick: () => signOut(data.activeSession.sessionId) });
+      actions.push({
+        icon: 'log-out',
+        label: 'Sign out',
+        onClick: () => signOut(data.activeSession.sessionId),
+        busyKey: userButtonBusyKeys.signOutSession(data.activeSession.sessionId),
+      });
     }
   }
 
@@ -646,6 +297,7 @@ function Header() {
                 <button
                   type='button'
                   onClick={data.onUpgrade}
+                  disabled={resolveBusy(data.pendingKey).disabled}
                   {...upgrade}
                 >
                   Upgrade
@@ -661,19 +313,21 @@ function Header() {
           style={{ gridTemplateColumns: `repeat(${actions.length}, 1fr)` }}
         >
           {actions.map(a => (
-            <button
+            <BusyButton
               key={a.label}
-              type='button'
+              slot='action'
               onClick={a.onClick}
-              {...action}
+              busyKey={a.busyKey}
+              leading={
+                <Icon
+                  name={a.icon}
+                  size='sm'
+                  style={{ color: theme.color.cardForeground }}
+                />
+              }
             >
-              <Icon
-                name={a.icon}
-                size='sm'
-                style={{ color: theme.color.cardForeground }}
-              />
               {a.label}
-            </button>
+            </BusyButton>
           ))}
         </div>
       ) : null}
@@ -683,7 +337,7 @@ function Header() {
 
 function WorkspaceList() {
   const data = useUserButtonContext();
-  const { group } = useRecipe(userButtonRecipe);
+  const { group, scroll, loadMore } = useRecipe(userButtonRecipe);
   const selectOrg = data.onSelectOrganization;
   const acceptSuggestion = data.onAcceptSuggestion;
   const acceptInvitation = data.onAcceptInvitation;
@@ -691,60 +345,95 @@ function WorkspaceList() {
 
   return (
     <div {...group}>
-      <Row
-        shape='circle'
-        name={data.activeSession.name}
-        secondary={data.activeSession.email}
-        imageUrl={data.activeSession.imageUrl}
-        onSelect={data.onSelectPersonal}
-        active={data.activeOrganizationId === null}
-        hoverAction={
-          signOutSession ? <HoverAction onClick={() => signOutSession(data.activeSession.sessionId)} /> : undefined
-        }
-      />
-      {data.memberships.map(m => (
-        <Row
-          key={m.organizationId}
-          shape='square'
-          name={m.name}
-          imageUrl={m.imageUrl}
-          onSelect={selectOrg ? () => selectOrg(m.organizationId) : undefined}
-          active={m.organizationId === data.activeOrganizationId}
-        />
-      ))}
-      {data.suggestions.map(s => (
-        <Row
-          key={s.id}
-          shape='square'
-          name={s.name}
-          imageUrl={s.imageUrl}
-          badge={<SuggestedBadge />}
-          trailing={
-            acceptSuggestion ? (
-              <InlineButton
-                label='Join'
-                onClick={() => acceptSuggestion(s.id)}
-              />
-            ) : undefined
-          }
-        />
-      ))}
-      {data.invitations.map(i => (
+      <div {...scroll}>
         <Row
-          key={i.id}
-          shape='square'
-          name={i.organizationName}
-          imageUrl={i.imageUrl}
-          trailing={
-            acceptInvitation ? (
-              <InlineButton
-                label='Accept'
-                onClick={() => acceptInvitation(i.id)}
+          shape='circle'
+          name={data.activeSession.name}
+          secondary={data.activeSession.email}
+          imageUrl={data.activeSession.imageUrl}
+          onSelect={data.onSelectPersonal}
+          active={data.activeOrganizationId === null}
+          busyKey={userButtonBusyKeys.selectPersonal()}
+          hoverAction={
+            signOutSession ? (
+              <BusyButton
+                slot='hoverAction'
+                leading='Sign out'
+                onClick={() => signOutSession(data.activeSession.sessionId)}
+                busyKey={userButtonBusyKeys.signOutSession(data.activeSession.sessionId)}
               />
             ) : undefined
           }
         />
-      ))}
+        {data.memberships.map(m => (
+          <Row
+            key={m.organizationId}
+            shape='square'
+            name={m.name}
+            imageUrl={m.imageUrl}
+            onSelect={selectOrg ? () => selectOrg(m.organizationId) : undefined}
+            active={m.organizationId === data.activeOrganizationId}
+            busyKey={userButtonBusyKeys.selectOrganization(m.organizationId)}
+          />
+        ))}
+        {data.suggestions.map(s =>
+          s.status === 'accepted' ? (
+            <Row
+              key={s.id}
+              shape='square'
+              name={s.name}
+              imageUrl={s.imageUrl}
+              trailing={<PendingApprovalLabel />}
+            />
+          ) : (
+            <Row
+              key={s.id}
+              shape='square'
+              name={s.name}
+              imageUrl={s.imageUrl}
+              badge={<SuggestedBadge />}
+              trailing={
+                acceptSuggestion ? (
+                  <BusyButton
+                    slot='inlineButton'
+                    leading='Join'
+                    onClick={() => acceptSuggestion(s.id)}
+                    busyKey={userButtonBusyKeys.acceptSuggestion(s.id)}
+                  />
+                ) : undefined
+              }
+            />
+          ),
+        )}
+        {data.invitations.map(i => (
+          <Row
+            key={i.id}
+            shape='square'
+            name={i.organizationName}
+            imageUrl={i.imageUrl}
+            trailing={
+              acceptInvitation ? (
+                <BusyButton
+                  slot='inlineButton'
+                  leading='Accept'
+                  onClick={() => acceptInvitation(i.id)}
+                  busyKey={userButtonBusyKeys.acceptInvitation(i.id)}
+                />
+              ) : undefined
+            }
+          />
+        ))}
+        <div
+          ref={data.loadMoreRef}
+          aria-hidden
+        >
+          {data.hasMoreRows || data.isFetchingRows ? (
+            <div {...loadMore}>
+              <Spinner />
+            </div>
+          ) : null}
+        </div>
+      </div>
       {data.onCreateOrganization ? (
         <AddRow
           label='Add organization'
@@ -775,6 +464,7 @@ function SessionsSection() {
           secondary={a.email}
           imageUrl={a.imageUrl}
           onSelect={switchSession ? () => switchSession(a.sessionId) : undefined}
+          busyKey={userButtonBusyKeys.switchSession(a.sessionId)}
         />
       ))}
       {data.onAddAccount ? (
@@ -790,22 +480,24 @@ function SessionsSection() {
 function Footer() {
   const theme = useMosaicTheme();
   const data = useUserButtonContext();
-  const { footer, signOutAll, branding } = useRecipe(userButtonRecipe);
+  const { footer, branding } = useRecipe(userButtonRecipe);
   return (
     <div {...footer}>
       {data.onSignOutAll ? (
-        <button
-          type='button'
+        <BusyButton
+          slot='signOutAll'
           onClick={data.onSignOutAll}
-          {...signOutAll}
+          busyKey={userButtonBusyKeys.signOutAll()}
+          leading={
+            <Icon
+              name='log-out'
+              size='sm'
+              style={{ color: theme.color.mutedForeground }}
+            />
+          }
         >
-          <Icon
-            name='log-out'
-            size='sm'
-            style={{ color: theme.color.mutedForeground }}
-          />
           <span>Sign out of all accounts</span>
-        </button>
+        </BusyButton>
       ) : null}
       <div {...branding}>Secured by Clerk</div>
     </div>
@@ -814,7 +506,7 @@ function Footer() {
 
 // ─── Public parts ───────────────────────────────────────────────────────────
 
-export interface UserButtonRootProps extends UserButtonData, UserButtonCallbacks {
+export interface UserButtonRootProps extends UserButtonData, UserButtonCallbacks, UserButtonBusyState {
   children: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
@@ -881,6 +573,31 @@ export function UserButtonTrigger() {
   );
 }
 
+/**
+ * Placeholder shown in the trigger's slot while the controller loads, so the sidebar reserves the
+ * trigger's space and nothing shifts when the real avatar/name land. Non-interactive.
+ */
+export function UserButtonTriggerSkeleton() {
+  const { trigger } = useRecipe(userButtonRecipe);
+  return (
+    <div
+      {...trigger}
+      data-cl-loading=''
+      css={{ ...trigger.css, cursor: 'default' }}
+    >
+      <Skeleton
+        width='1.25rem'
+        height='1.25rem'
+        sx={t => ({ borderRadius: t.rounded.full, flexShrink: 0 })}
+      />
+      <Skeleton
+        width='7rem'
+        height='0.875rem'
+      />
+    </div>
+  );
+}
+
 /** The popover surface: header, workspace list, additional accounts, and footer. */
 export function UserButtonPopup() {
   const data = useUserButtonContext();
@@ -890,7 +607,9 @@ export function UserButtonPopup() {
       <Popover.Positioner css={{ zIndex: 50 }}>
         <Popover.Popup {...popup}>
           <Header />
-          {data.hasOrganizations ? <WorkspaceList /> : null}
+          {data.hasOrganizations || data.suggestions.length > 0 || data.invitations.length > 0 ? (
+            <WorkspaceList />
+          ) : null}
           <SessionsSection />
           <Footer />
         </Popover.Popup>
@@ -899,13 +618,13 @@ export function UserButtonPopup() {
   );
 }
 
-export type UserButtonProps = Omit<UserButtonRootProps, 'children'>;
+export type UserButtonViewProps = Omit<UserButtonRootProps, 'children'>;
 
 /**
  * Presentational all-in-one: renders the trigger + popup from a single prop-driven call. The
  * connected, Clerk-backed `UserButton` lives in `user-button.tsx` and wraps this view.
  */
-export function UserButtonView(props: UserButtonProps) {
+export function UserButtonView(props: UserButtonViewProps) {
   return (
     <UserButtonRoot {...props}>
       <UserButtonTrigger />