From c2dfcca3281dd95012d0138ae6c6cf4c6c38027c Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 24 Sep 2026 10:32:23 +0000
Subject: [PATCH] test(ui): inject the auto-router availability debounce so
 saves settle deterministically

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../src/components/add_model/AutoRouterAvailability.tsx     | 6 ++++--
 .../components/add_model/autoRouterAvailabilityDebounce.ts  | 3 +++
 ui/litellm-dashboard/tests/test-utils.tsx                   | 5 ++++-
 3 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/add_model/autoRouterAvailabilityDebounce.ts

diff --git a/ui/litellm-dashboard/src/components/add_model/AutoRouterAvailability.tsx b/ui/litellm-dashboard/src/components/add_model/AutoRouterAvailability.tsx
index b1233ef03b8..10284f80258 100644
--- a/ui/litellm-dashboard/src/components/add_model/AutoRouterAvailability.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/AutoRouterAvailability.tsx
@@ -1,6 +1,7 @@
 import { createContext, useContext, useEffect, useState } from "react";
 import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
 import { apiClient } from "@/components/networking";
+import { AutoRouterAvailabilityDebounceContext } from "@/components/add_model/autoRouterAvailabilityDebounce";
 import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "@/components/ui/popover";
 import type { components } from "@/lib/http/schema";
 
@@ -21,10 +22,11 @@ export const AutoRouterAvailabilityContext = createContext<AvailabilityState>({
 export const useAutoRouterAvailability = (accessToken: string, body: Request, enabled = true) => {
   const serialized = JSON.stringify(body.complexity_router_config ?? null);
   const [debounced, setDebounced] = useState(serialized);
+  const debounceMs = useContext(AutoRouterAvailabilityDebounceContext);
   useEffect(() => {
-    const timeout = setTimeout(() => setDebounced(serialized), 300);
+    const timeout = setTimeout(() => setDebounced(serialized), debounceMs);
     return () => clearTimeout(timeout);
-  }, [serialized]);
+  }, [serialized, debounceMs]);
   const options: UseQueryOptions<Availability> = {
     queryKey: ["autoRouterAvailability", accessToken, body.team_id, body.saved_model_id, debounced],
     queryFn: ({ signal }) =>
diff --git a/ui/litellm-dashboard/src/components/add_model/autoRouterAvailabilityDebounce.ts b/ui/litellm-dashboard/src/components/add_model/autoRouterAvailabilityDebounce.ts
new file mode 100644
index 00000000000..c899d4f3981
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/add_model/autoRouterAvailabilityDebounce.ts
@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const AutoRouterAvailabilityDebounceContext = createContext(300);
diff --git a/ui/litellm-dashboard/tests/test-utils.tsx b/ui/litellm-dashboard/tests/test-utils.tsx
index 553726faff0..fb02516f79b 100644
--- a/ui/litellm-dashboard/tests/test-utils.tsx
+++ b/ui/litellm-dashboard/tests/test-utils.tsx
@@ -4,6 +4,7 @@ import type userEvent from "@testing-library/user-event";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NuqsTestingAdapter, OnUrlUpdateFunction } from "nuqs/adapters/testing";
 import { expect } from "vitest";
+import { AutoRouterAvailabilityDebounceContext } from "@/components/add_model/autoRouterAvailabilityDebounce";
 
 // Create a client for testing
 export const testQueryClient = new QueryClient({
@@ -31,7 +32,9 @@ export const renderWithProviders = (ui: React.ReactElement, options?: RenderOpti
   const { searchParams, onUrlUpdate, ...renderOptions } = options ?? {};
   const Providers: React.FC<PropsWithChildren> = ({ children }) => (
     <NuqsTestingAdapter searchParams={searchParams} onUrlUpdate={onUrlUpdate} hasMemory>
-      <QueryClientProvider client={testQueryClient}>{children}</QueryClientProvider>
+      <QueryClientProvider client={testQueryClient}>
+        <AutoRouterAvailabilityDebounceContext.Provider value={0}>{children}</AutoRouterAvailabilityDebounceContext.Provider>
+      </QueryClientProvider>
     </NuqsTestingAdapter>
   );
   return render(ui, { wrapper: Providers, ...renderOptions });