From 81c975cff85877db5c41753bfd1d3eb43e2b8da8 Mon Sep 17 00:00:00 2001
From: mateo-berri <277851410+mateo-berri@users.noreply.github.com>
Date: Wed, 19 Aug 2026 14:47:18 -0700
Subject: [PATCH] test(ui): cover the loading state while a newer user search
 is in flight

---
 .../user_search_modal.test.tsx                | 21 ++++++++++++
 .../create_key_button.integration.test.tsx    | 32 +++++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/common_components/user_search_modal.test.tsx b/ui/litellm-dashboard/src/components/common_components/user_search_modal.test.tsx
index dfe6d762ac6..cf4461a2b7a 100644
--- a/ui/litellm-dashboard/src/components/common_components/user_search_modal.test.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/user_search_modal.test.tsx
@@ -271,4 +271,25 @@ describe("UserSearchModal out-of-order search results", () => {
     expect(screen.queryByRole("option")).not.toBeInTheDocument();
     expect(screen.getByText("No results")).toBeInTheDocument();
   });
+
+  it("keeps loading while a newer search is still in flight", async () => {
+    const user = userEvent.setup();
+    render(<UserSearchModal isVisible onCancel={vi.fn()} onSubmit={vi.fn()} accessToken="sk-test" />);
+
+    const input = getEmailSearchInput();
+    await user.click(input);
+    await user.type(input, "ali");
+    await waitFor(() => expect(answers.has("ali")).toBe(true), { timeout: 3000 });
+
+    await user.type(input, "ce.smith@example.com");
+    await waitFor(() => expect(answers.has("alice.smith@example.com")).toBe(true), { timeout: 3000 });
+
+    await answerFor("ali", []);
+
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+    expect(screen.queryByText("No results")).not.toBeInTheDocument();
+
+    await answerFor("alice.smith@example.com", [{ user_id: "u-smith", user_email: "alice.smith@example.com" }]);
+    await screen.findByRole("option", { name: "alice.smith@example.com" });
+  });
 });
diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.integration.test.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.integration.test.tsx
index 8072a90fcad..dbeaf7998e6 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.integration.test.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.integration.test.tsx
@@ -863,6 +863,38 @@ describe("CreateKey", () => {
       expect(screen.queryByTitle("alice.jones@example.com (u-jones)")).not.toBeInTheDocument();
       expect(screen.getByText("No users found")).toBeInTheDocument();
     });
+
+    it("keeps searching while a newer search is still in flight", async () => {
+      const answers = new Map<string, (users: { user_id: string; user_email: string }[]) => void>();
+      vi.mocked(userFilterUICall).mockImplementation(
+        (_accessToken, params) =>
+          new Promise((resolve) => {
+            answers.set(params.get("user_email") ?? "", resolve);
+          }) as never,
+      );
+
+      const user = userEvent.setup();
+      renderCreateKey({ autoOpenCreate: true, prefillData: { owned_by: "another_user" } });
+      const search = antdSearchInput(await screen.findByText("Type email to search for users"));
+
+      await user.type(search, "ali");
+      await waitFor(() => expect(answers.has("ali")).toBe(true), { timeout: 3000 });
+
+      await user.type(search, "ce.smith@example.com");
+      await waitFor(() => expect(answers.has("alice.smith@example.com")).toBe(true), { timeout: 3000 });
+
+      await act(async () => {
+        answers.get("ali")?.([]);
+      });
+
+      expect(screen.getByText("Searching...")).toBeInTheDocument();
+      expect(screen.queryByText("No users found")).not.toBeInTheDocument();
+
+      await act(async () => {
+        answers.get("alice.smith@example.com")?.([{ user_id: "u-smith", user_email: "alice.smith@example.com" }]);
+      });
+      await screen.findByTitle("alice.smith@example.com (u-smith)");
+    });
   });
 
   describe("created key display", () => {