feat(form-builder): show thinking spinner while LLM streams

changelog/8135-form-builder-thinking-spinner.yaml

@@ -0,0 +1,4 @@
+type: Added
+description: Loading spinner in the privacy center form builder chat while the LLM is streaming a response
+pr: 8135
+labels: []

clients/admin-ui/src/features/properties/privacy-center-config/form-builder/ChatPane.tsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Input, SparkleIcon } from "fidesui";
+import { Alert, Button, Input, SparkleIcon, Spin } from "fidesui";
 import { useEffect, useRef, useState } from "react";
 
 import type { ChatMessage, Status } from "./useFormBuilder";
@@ -84,6 +84,21 @@ export const ChatPane = ({
             {m.content}
           </div>
         ))}
+        {isStreaming && (
+          <div
+            role="status"
+            aria-live="polite"
+            aria-label="Assistant is thinking"
+            style={{
+              padding: 8,
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+            }}
+          >
+            <Spin size="small" />
+          </div>
+        )}
       </div>
       <div style={composerStyle}>
         <Input.TextArea

clients/admin-ui/src/features/properties/privacy-center-config/form-builder/__tests__/ChatPane.test.tsx

@@ -18,6 +18,36 @@ describe("ChatPane", () => {
     expect(screen.getByRole("textbox")).toBeDisabled();
   });
 
+  it("shows a thinking indicator while streaming", () => {
+    render(
+      <ChatPane
+        messages={[{ role: "user", content: "Add an email field" }]}
+        status="streaming"
+        error={null}
+        onSend={jest.fn()}
+        onAbort={jest.fn()}
+      />,
+    );
+    const status = screen.getByRole("status", { name: /thinking/i });
+    expect(status).toBeInTheDocument();
+    expect(status.querySelector('[aria-busy="true"]')).toBeInTheDocument();
+  });
+
+  it("does not show a thinking indicator when idle", () => {
+    render(
+      <ChatPane
+        messages={[]}
+        status="idle"
+        error={null}
+        onSend={jest.fn()}
+        onAbort={jest.fn()}
+      />,
+    );
+    expect(
+      screen.queryByRole("status", { name: /thinking/i }),
+    ).not.toBeInTheDocument();
+  });
+
   it("calls onSend with the typed text and clears input", async () => {
     const onSend = jest.fn();
     render(