Clean up remaining smells: remove isFetchingDeferred, internalize selectedTimeInterval, fix circular import

- Remove useDeferredValue/isButtonLoading — pass logsQuery.isFetching directly
- Move selectedTimeInterval into LogsTableToolbar as internal state
- Move PaginatedResponse type from index.tsx to log_filter_logic.tsx

ui/litellm-dashboard/src/components/view_logs/LogsTableToolbar.tsx

@@ -4,7 +4,7 @@ import { SyncOutlined } from "@ant-design/icons";
 import { Button, Switch } from "antd";
 import { QUICK_SELECT_OPTIONS } from "./constants";
 import { getTimeRangeDisplay } from "./logs_utils";
-import type { PaginatedResponse } from ".";
+import type { PaginatedResponse } from "./log_filter_logic";
 
 interface LogsTableToolbarProps {
   searchTerm: string;
@@ -15,8 +15,6 @@ interface LogsTableToolbarProps {
   onEndTimeChange: (value: string) => void;
   isCustomDate: boolean;
   onIsCustomDateChange: (value: boolean) => void;
-  selectedTimeInterval: { value: number; unit: string };
-  onSelectedTimeIntervalChange: (value: { value: number; unit: string }) => void;
   isLiveTail: boolean;
   onIsLiveTailChange: (value: boolean) => void;
   currentPage: number;
@@ -37,8 +35,6 @@ export function LogsTableToolbar({
   onEndTimeChange,
   isCustomDate,
   onIsCustomDateChange,
-  selectedTimeInterval,
-  onSelectedTimeIntervalChange,
   isLiveTail,
   onIsLiveTailChange,
   currentPage,
@@ -50,6 +46,7 @@ export function LogsTableToolbar({
   filteredLogs,
 }: LogsTableToolbarProps) {
   const [quickSelectOpen, setQuickSelectOpen] = useState(false);
+  const [selectedTimeInterval, setSelectedTimeInterval] = useState<{ value: number; unit: string }>({ value: 24, unit: "hours" });
   const quickSelectRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -127,7 +124,7 @@ export function LogsTableToolbar({
                                 .subtract(option.value, option.unit as any)
                                 .format("YYYY-MM-DDTHH:mm"),
                             );
-                            onSelectedTimeIntervalChange({ value: option.value, unit: option.unit });
+                            setSelectedTimeInterval({ value: option.value, unit: option.unit });
                             onIsCustomDateChange(false);
                             setQuickSelectOpen(false);
                           }}

ui/litellm-dashboard/src/components/view_logs/index.tsx

@@ -1,5 +1,5 @@
 import moment from "moment";
-import { useCallback, useDeferredValue, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { SettingOutlined } from "@ant-design/icons";
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
 import { Button } from "antd";
@@ -28,14 +28,6 @@ interface SpendLogsTableProps {
   premiumUser: boolean;
 }
 
-export interface PaginatedResponse {
-  data: LogEntry[];
-  total: number;
-  page: number;
-  page_size: number;
-  total_pages: number;
-}
-
 export default function SpendLogsTable({
   accessToken,
   token,
@@ -77,10 +69,6 @@ export default function SpendLogsTable({
     sessionStorage.setItem("isLiveTail", JSON.stringify(isLiveTail));
   }, [isLiveTail]);
 
-  const [selectedTimeInterval, setSelectedTimeInterval] = useState<{ value: number; unit: string }>({
-    value: 24,
-    unit: "hours",
-  });
 
   useEffect(() => {
     const fetchKeyInfo = async () => {
@@ -131,19 +119,11 @@ export default function SpendLogsTable({
     currentPage,
   });
 
-  // Defer the transition from "Fetching" to "Fetch" so the button stays loading until
-  // the table has rendered with the new data (avoids the visual gap where the button
-  // exits loading state before the table updates)
-  const isFetchingDeferred = useDeferredValue(logsQuery.isFetching);
-  const isButtonLoading = logsQuery.isFetching || isFetchingDeferred;
-
   const handleFilterReset = useCallback(() => {
     handleFilterResetFromHook();
-    // Reset custom time range to default (last 24 hours)
     setStartTime(moment().subtract(24, "hours").format("YYYY-MM-DDTHH:mm"));
     setEndTime(moment().format("YYYY-MM-DDTHH:mm"));
     setIsCustomDate(false);
-    setSelectedTimeInterval({ value: 24, unit: "hours" });
     setCurrentPage(1);
   }, [handleFilterResetFromHook]);
 
@@ -279,15 +259,13 @@ export default function SpendLogsTable({
                     onEndTimeChange={setEndTime}
                     isCustomDate={isCustomDate}
                     onIsCustomDateChange={setIsCustomDate}
-                    selectedTimeInterval={selectedTimeInterval}
-                    onSelectedTimeIntervalChange={setSelectedTimeInterval}
                     isLiveTail={isLiveTail}
                     onIsLiveTailChange={setIsLiveTail}
                     currentPage={currentPage}
                     onCurrentPageChange={setCurrentPage}
                     pageSize={pageSize}
                     isLoading={logsQuery.isLoading}
-                    isButtonLoading={isButtonLoading}
+                    isButtonLoading={logsQuery.isFetching}
                     onRefetch={() => logsQuery.refetch()}
                     filteredLogs={filteredLogs}
                   />

ui/litellm-dashboard/src/components/view_logs/log_filter_logic.tsx

@@ -5,8 +5,15 @@ import { Team } from "../key_team_helpers/key_list";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { fetchAllTeams } from "../../components/key_team_helpers/filter_helpers";
 import { defaultPageSize } from "../constants";
-import { PaginatedResponse } from ".";
-import type { LogsSortField } from "./columns";
+import type { LogEntry, LogsSortField } from "./columns";
+
+export interface PaginatedResponse {
+  data: LogEntry[];
+  total: number;
+  page: number;
+  page_size: number;
+  total_pages: number;
+}
 
 function useDebouncedValue<T>(value: T, delayMs: number): T {
   const [debounced, setDebounced] = useState(value);