scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-09 22:31:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 87

refactor(ui): standardize debounce waits behind shared DEBOUNCE_WAIT_MS constant (#33040)

Browse source
This commit is contained in:
ryan-crabbe-berri 2026-07-13 12:19:57 -07:00 • committed by GitHub
parent 7fce761cde
commit aa9dcb43cf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
View file

@ -8,6 +8,7 @@
import { DownOutlined, ExportOutlined, InfoCircleOutlined, LoadingOutlined, RightOutlined } from "@ant-design/icons";
import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants";
import {
Card,
Col,
@ -94,7 +95,7 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
// Debounced search for user selector
const [userSearchInput, setUserSearchInput] = useState("");
const [debouncedUserSearch, setDebouncedUserSearch] = useDebouncedState("", {
wait: 300,
wait: DEBOUNCE_WAIT_MS,
});
const {

3
ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.tsx
View file

@ -16,6 +16,7 @@ import {
import OnboardingModal, { InvitationLink } from "@/components/onboarding_link";
import { updateExistingKeys } from "@/utils/dataUtils";
import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants";
import { isAdminRole, isProxyAdminRole } from "@/utils/roles";
import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
import { useQuery, useQueryClient } from "@tanstack/react-query";
@ -86,7 +87,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
const [userToDelete, setUserToDelete] = useState<UserInfo | null>(null);
const [activeTab, setActiveTab] = useState("users");
const [filters, setFilters] = useState<FilterState>(initialFilters);
const [debouncedFilters, setDebouncedFilters, debouncer] = useDebouncedState(filters, { wait: 300 });
const [debouncedFilters, setDebouncedFilters, debouncer] = useDebouncedState(filters, { wait: DEBOUNCE_WAIT_MS });
const [isInvitationLinkModalVisible, setIsInvitationLinkModalVisible] = useState(false);
const [invitationLinkData, setInvitationLinkData] = useState<InvitationLink | null>(null);
const [baseUrl, setBaseUrl] = useState<string | null>(null);

4
ui/litellm-dashboard/src/components/KeyAliasSelect/PaginatedKeyAliasSelect/PaginatedKeyAliasSelect.tsx
View file

@ -1,4 +1,5 @@
import { useInfiniteKeyAliases } from "@/app/(dashboard)/hooks/keys/useKeyAliases";
import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants";
import { LoadingOutlined } from "@ant-design/icons";
import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
import { Select } from "antd";
@ -16,7 +17,6 @@ export interface PaginatedKeyAliasSelectProps {
}
const SCROLL_THRESHOLD = 0.8;
const DEBOUNCE_MS = 300;
export const PaginatedKeyAliasSelect = ({
value,
@ -30,7 +30,7 @@ export const PaginatedKeyAliasSelect = ({
}: PaginatedKeyAliasSelectProps) => {
const [searchInput, setSearchInput] = useState("");
const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", {
wait: DEBOUNCE_MS,
wait: DEBOUNCE_WAIT_MS,
});
const teamId = allFilters?.["Team ID"] || undefined;

4
ui/litellm-dashboard/src/components/ModelSelect/PaginatedModelSelect/PaginatedModelSelect.tsx
View file

@ -1,4 +1,5 @@
import { useInfiniteModelInfo } from "@/app/(dashboard)/hooks/models/useModels";
import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants";
import { LoadingOutlined } from "@ant-design/icons";
import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
import { Select, Space, Typography } from "antd";
@ -17,7 +18,6 @@ export interface PaginatedModelSelectProps {
}
const SCROLL_THRESHOLD = 0.8;
const DEBOUNCE_MS = 300;
export const PaginatedModelSelect = ({
value,
@ -30,7 +30,7 @@ export const PaginatedModelSelect = ({
}: PaginatedModelSelectProps) => {
const [searchInput, setSearchInput] = useState("");
const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", {
wait: DEBOUNCE_MS,
wait: DEBOUNCE_WAIT_MS,
});
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfiniteModelInfo(

3
ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.tsx
View file

@ -4,6 +4,7 @@ import { useOrganizations } from "@/app/(dashboard)/hooks/organizations/useOrgan
import { useAllTeams } from "@/app/(dashboard)/hooks/teams/useTeams";
import { useDebouncedValue } from "@tanstack/react-pacer/debouncer";
import { formatNumberWithCommas } from "@/utils/dataUtils";
import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants";
import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, SwitchVerticalIcon } from "@heroicons/react/outline";
import {
ColumnDef,
@ -64,7 +65,7 @@ export function VirtualKeysTable() {
pageSize: 50,
});
const [filters, setFilters] = useState<KeyFilterState>(DEFAULT_KEY_FILTERS);
const [debouncedFilters] = useDebouncedValue(filters, { wait: 300 });
const [debouncedFilters] = useDebouncedValue(filters, { wait: DEBOUNCE_WAIT_MS });
const sortBy = sorting.length > 0 ? sorting[0].id : null;
const sortOrder = sorting.length > 0 ? (sorting[0].desc ? "desc" : "asc") : null;

4
ui/litellm-dashboard/src/components/common_components/team_dropdown.tsx
View file

@ -3,6 +3,7 @@ import { Select, Typography } from "antd";
import { LoadingOutlined } from "@ant-design/icons";
import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
import { useInfiniteTeams } from "@/app/(dashboard)/hooks/teams/useTeams";
import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants";
import { Team } from "../key_team_helpers/key_list";
const { Text } = Typography;
@ -19,7 +20,6 @@ interface TeamDropdownProps {
}
const SCROLL_THRESHOLD = 0.8;
const DEBOUNCE_MS = 300;
const TeamDropdown: React.FC<TeamDropdownProps> = ({
value,
@ -31,7 +31,7 @@ const TeamDropdown: React.FC<TeamDropdownProps> = ({
}) => {
const [searchInput, setSearchInput] = useState("");
const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", {
wait: DEBOUNCE_MS,
wait: DEBOUNCE_WAIT_MS,
});
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfiniteTeams(

4
ui/litellm-dashboard/src/components/common_components/team_multi_select.tsx
View file

@ -3,6 +3,7 @@ import { Select, Typography } from "antd";
import { LoadingOutlined } from "@ant-design/icons";
import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
import { useInfiniteTeams } from "@/app/(dashboard)/hooks/teams/useTeams";
import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants";
import { Team } from "../key_team_helpers/key_list";
const { Text } = Typography;
@ -17,7 +18,6 @@ interface TeamMultiSelectProps {
}
const SCROLL_THRESHOLD = 0.8;
const DEBOUNCE_MS = 300;
const TeamMultiSelect: React.FC<TeamMultiSelectProps> = ({
value = [],
@ -29,7 +29,7 @@ const TeamMultiSelect: React.FC<TeamMultiSelectProps> = ({
}) => {
const [searchInput, setSearchInput] = useState("");
const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", {
wait: DEBOUNCE_MS,
wait: DEBOUNCE_WAIT_MS,
});
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfiniteTeams(

3
ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.tsx
View file

@ -9,6 +9,7 @@ import {
DataTableToolbar,
} from "@/components/shared/DataTable";
import { Input } from "@/components/ui/input";
import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants";
import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/outline";
import { useDebouncedValue } from "@tanstack/react-pacer/debouncer";
import { ColumnDef, ColumnFiltersState, OnChangeFn, PaginationState, SortingState } from "@tanstack/react-table";
@ -43,7 +44,7 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [filtersOpen, setFiltersOpen] = useState(false);
const [searchInput, setSearchInput] = useState("");
const [searchQuery] = useDebouncedValue(searchInput, { wait: 300 });
const [searchQuery] = useDebouncedValue(searchInput, { wait: DEBOUNCE_WAIT_MS });
const handleSearchChange = useCallback((value: string) => {
setSearchInput(value);

1
ui/litellm-dashboard/src/utils/debounceConstants.ts Normal file
View file

@ -0,0 +1 @@
export const DEBOUNCE_WAIT_MS = 300;