@@ -42,12 +42,18 @@ const CONSENT_CATEGORY_COPY: Record<string, ConsentCategoryCopy | undefined> = {
   },
 } satisfies Record<ConsentCategory, ConsentCategoryCopy>
 
+/** The runtime's category union, without re-declaring it. */
+type ConsentCategoryName = Parameters<ReturnType<typeof useConsentManager>['setSelectedConsent']>[0]
+
 interface ConsentPreferencesProps {
   /**
    * Called after a switch stages its new value, for a surface that commits per
-   * toggle. The banner omits it and commits from its own footer instead.
+   * toggle. `revert` puts the category back, for a commit that then fails. The
+   * banner omits this and commits from its own footer instead.
    */
-  onChange?: () => void
+  onChange?: (change: { name: ConsentCategoryName; revert: () => void }) => void
+  /** Locks every switch, e.g. while a commit is in flight. */
+  disabled?: boolean
 }
 
 /**
@@ -58,7 +64,7 @@ interface ConsentPreferencesProps {
  *
  * Must be rendered inside a `ConsentStoreProvider`.
  */
-export function ConsentPreferences({ onChange }: ConsentPreferencesProps) {
+export function ConsentPreferences({ onChange, disabled = false }: ConsentPreferencesProps) {
   const { consents, selectedConsents, setSelectedConsent, getDisplayedConsents } =
     useConsentManager()
 
@@ -85,10 +91,13 @@ export function ConsentPreferences({ onChange }: ConsentPreferencesProps) {
             <Switch
               id={inputId}
               checked={selectedConsents[type.name] ?? consents[type.name] ?? false}
-              disabled={type.disabled}
+              disabled={type.disabled || disabled}
               onCheckedChange={(checked) => {
                 setSelectedConsent(type.name, checked)
-                onChange?.()
+                onChange?.({
+                  name: type.name,
+                  revert: () => setSelectedConsent(type.name, !checked),
+                })
               }}
             />
           </li>
 
@@ -6,31 +6,72 @@ import { act } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-const { mockUseConsentManager, mockSaveConsents } = vi.hoisted(() => ({
-  mockUseConsentManager: vi.fn(),
-  mockSaveConsents: vi.fn(),
-}))
+const { mockUseConsentManager, mockSaveConsents, mockToastError, mockRevert, lastProps } =
+  vi.hoisted(() => ({
+    mockUseConsentManager: vi.fn(),
+    mockSaveConsents: vi.fn(),
+    mockToastError: vi.fn(),
+    mockRevert: vi.fn(),
+    lastProps: vi.fn(),
+  }))
 
-vi.mock('@sim/emcn', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
+vi.mock('@sim/emcn', () => ({ toast: { success: vi.fn(), error: mockToastError } }))
 vi.mock('@c15t/nextjs/headless', () => ({ useConsentManager: mockUseConsentManager }))
 vi.mock('@/app/_shell/consent/consent-store-provider', () => ({
   ConsentStoreProvider: ({ children }: { children: ReactNode }) => children,
 }))
 vi.mock('@/app/_shell/consent/consent-preferences', () => ({
   CONSENT_LINK_CLASS: 'link',
-  ConsentPreferences: ({ onChange }: { onChange?: () => void }) => (
-    <button type='button' data-testid='toggle' onClick={onChange} />
-  ),
+  ConsentPreferences: (props: {
+    onChange?: (change: { name: string; revert: () => void }) => void
+    disabled?: boolean
+  }) => {
+    lastProps(props)
+    return (
+      <button
+        type='button'
+        data-testid='toggle'
+        disabled={props.disabled}
+        onClick={() => props.onChange?.({ name: 'measurement', revert: mockRevert })}
+      />
+    )
+  },
 }))
 
 import { CookiePreferences } from '@/app/workspace/[workspaceId]/settings/components/general/components/cookie-preferences'
 
 let root: Root | null = null
 
+/** The props the switch list was last rendered with. */
+function props() {
+  return lastProps.mock.calls.at(-1)?.[0] as { disabled?: boolean }
+}
+
+function render() {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(<CookiePreferences />))
+  return container
+}
+
+/** Resolves the pending save on demand, so the in-flight state is observable. */
+function deferredSave() {
+  let resolve!: () => void
+  let reject!: (error: Error) => void
+  mockSaveConsents.mockReturnValue(
+    new Promise<void>((res, rej) => {
+      resolve = res
+      reject = rej
+    })
+  )
+  return { resolve, reject }
+}
+
 beforeEach(() => {
-  mockUseConsentManager.mockReturnValue({
-    saveConsents: mockSaveConsents.mockResolvedValue(undefined),
-  })
+  mockUseConsentManager.mockReturnValue({ saveConsents: mockSaveConsents })
+  mockSaveConsents.mockResolvedValue(undefined)
 })
 
 afterEach(() => {
@@ -40,19 +81,45 @@ afterEach(() => {
 })
 
 describe('CookiePreferences', () => {
-  it('commits on every toggle, matching the telemetry switch beside it', () => {
-    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    root = createRoot(container)
-    act(() => root?.render(<CookiePreferences />))
+  it('commits on every toggle, matching the telemetry switch beside it', async () => {
+    const container = render()
 
     expect(mockSaveConsents).not.toHaveBeenCalled()
-    act(() => container.querySelector<HTMLButtonElement>('[data-testid="toggle"]')?.click())
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>('[data-testid="toggle"]')?.click()
+    })
 
     // `saveConsents('custom')` reads `selectedConsents` from the store at call
     // time and the switch's `setSelectedConsent` write is synchronous, so the
     // value this toggle staged is the one committed.
     expect(mockSaveConsents).toHaveBeenCalledWith('custom', { uiSource: 'settings' })
   })
+
+  it('locks the switches while a commit is in flight, so two toggles cannot race', async () => {
+    const pending = deferredSave()
+    const container = render()
+
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="toggle"]')?.click()
+    })
+    expect(props().disabled).toBe(true)
+
+    await act(async () => {
+      pending.resolve()
+    })
+    expect(props().disabled).toBe(false)
+  })
+
+  it('puts the switch back when the commit fails', async () => {
+    mockSaveConsents.mockRejectedValue(new Error('network down'))
+    const container = render()
+
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>('[data-testid="toggle"]')?.click()
+    })
+
+    expect(mockRevert).toHaveBeenCalledTimes(1)
+    expect(mockToastError).toHaveBeenCalled()
+    expect(props().disabled).toBe(false)
+  })
 })
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import { useConsentManager } from '@c15t/nextjs/headless'
 import { toast } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -14,24 +15,35 @@ import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/componen
  */
 function CookiePreferencesBody() {
   const { saveConsents } = useConsentManager()
+  const [saving, setSaving] = useState(false)
 
   /**
    * Each toggle commits, matching the telemetry switch directly above it — one
    * interaction model on the page, and no "unsaved consent" state to reason
    * about. The banner stages instead, because its footer owns the commit.
+   *
+   * The switches lock while a commit is in flight, as the telemetry switch does
+   * on its own mutation. Without that, two quick toggles race: each save sends
+   * the whole `selectedConsents` snapshot, so the slower request can land last
+   * and overwrite the newer choice. A failed commit puts the switch back rather
+   * than leaving it showing a preference that was never recorded.
    */
-  const commit = async () => {
+  const commit = async ({ revert }: { revert: () => void }) => {
+    setSaving(true)
     try {
       await saveConsents('custom', { uiSource: 'settings' })
     } catch (error) {
+      revert()
       toast.error(getErrorMessage(error, 'Could not save your cookie preferences'))
+    } finally {
+      setSaving(false)
     }
   }
 
   return (
     <SettingsSection label='Cookies'>
       <div className='flex flex-col gap-3'>
-        <ConsentPreferences onChange={commit} />
+        <ConsentPreferences onChange={commit} disabled={saving} />
         <p className='text-[var(--text-muted)] text-small'>
           Your choice applies to this browser and is kept for 365 days. The{' '}
           <Link
 
@@ -561,8 +561,9 @@ export function General() {
               <Chip onClick={() => setView('privacy')}>Manage</Chip>
             </div>
             <p className='text-[var(--text-muted)] text-small'>
-              Choose what Sim may collect about how you use it — anonymous telemetry, and which
-              cookies this browser allows.
+              {isHosted
+                ? 'Choose what Sim may collect about how you use it — anonymous telemetry, and which cookies this browser allows.'
+                : 'Choose what Sim may collect about how you use it.'}
             </p>
           </div>
         </SettingsSection>