From 0697b568fe5ae269a15e4d7b1fb6c17cf1bf7d72 Mon Sep 17 00:00:00 2001
From: Alan Buscaglia <gentlemanprogramming@gmail.com>
Date: Thu, 11 Jun 2026 16:14:00 +0200
Subject: [PATCH] fix(ui): degrade combobox loading spinner under reduced
 motion

---
 .../shadcn/combobox/combobox.test.tsx          | 18 ++++++++++++++++++
 ui/components/shadcn/combobox/combobox.tsx     |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/ui/components/shadcn/combobox/combobox.test.tsx b/ui/components/shadcn/combobox/combobox.test.tsx
index 928472f0eb..a15b5797d1 100644
--- a/ui/components/shadcn/combobox/combobox.test.tsx
+++ b/ui/components/shadcn/combobox/combobox.test.tsx
@@ -101,6 +101,24 @@ describe("Combobox", () => {
     expect(unselectedCheck).toHaveClass("scale-95", "opacity-0");
   });
 
+  it("degrades the loading spinner animation under reduced motion", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Combobox options={options} placeholder="Select provider" loading />,
+    );
+
+    // When
+    await user.click(
+      screen.getByRole("combobox", { name: /select provider/i }),
+    );
+    const content = document.querySelector("[data-slot='popover-content']");
+    const spinner = content?.querySelector("svg");
+
+    // Then
+    expect(spinner).toHaveClass("animate-spin", "motion-reduce:animate-none");
+  });
+
   it("opens with the shared Popover content motion contract", async () => {
     // Given
     const user = userEvent.setup();
diff --git a/ui/components/shadcn/combobox/combobox.tsx b/ui/components/shadcn/combobox/combobox.tsx
index 90493f62aa..b8d32bb80f 100644
--- a/ui/components/shadcn/combobox/combobox.tsx
+++ b/ui/components/shadcn/combobox/combobox.tsx
@@ -139,7 +139,7 @@ export function Combobox({
           <CommandList className="minimal-scrollbar max-h-[400px]">
             {loading && (
               <div className="text-text-neutral-tertiary flex items-center gap-2 px-3 py-2 text-sm">
-                <Loader2 className="h-4 w-4 animate-spin" />
+                <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
                 <span>{loadingMessage}</span>
               </div>
             )}