Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(web): debounce server and large-list searches (#6727)

Browse Source
This commit is contained in:
Seefs
2026-08-10 12:47:55 +08:00
committed by GitHub
parent 5d3423bec1
commit 7dd1000a19
10 changed files with 45 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/features/keys/components/api-keys-table.tsx
+1
View File
@@ -307,6 +307,7 @@ export function ApiKeysTable() {
applyHeaderSize
toolbarProps={{
searchPlaceholder: t('Filter by name...'),
searchDebounceMs: 500,
additionalSearch: (
<Input
placeholder={t('Filter by API key...')}
web/src/features/models/components/deployments-table.tsx
+1
View File
@@ -230,6 +230,7 @@ export function DeploymentsTable() {
applyHeaderSize
toolbarProps={{
searchPlaceholder: t('Search deployments...'),
searchDebounceMs: 500,
filters: [
{
columnId: 'status',
web/src/features/models/components/dialogs/upstream-conflict-dialog.tsx
+5 -3
View File
@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { useQueryClient } from '@tanstack/react-query'
import { type ColumnDef, type RowSelectionState } from '@tanstack/react-table'
import type { ColumnDef, RowSelectionState } from '@tanstack/react-table'
import {
Search,
Info,
@@ -48,6 +48,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { useDebounce } from '@/hooks/use-debounce'
import { useIsMobile } from '@/hooks/use-mobile'
import { applyUpstreamOverwrite } from '../../api'
@@ -117,6 +118,7 @@ export function UpstreamConflictDialog({
} = useModels()
const isMobile = useIsMobile()
const [search, setSearch] = useState('')
const debouncedSearch = useDebounce(search, 200)
const [isSubmitting, setIsSubmitting] = useState(false)
const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
const [pageSize, setPageSize] = useState(10)
@@ -149,7 +151,7 @@ export function UpstreamConflictDialog({
const totalModels = upstreamConflicts.length
const totalFields = conflictRows.length
const normalizedSearch = search.trim().toLowerCase()
const normalizedSearch = debouncedSearch.trim().toLowerCase()
const { matchingModelNames, visibleRowIds } = useMemo(() => {
if (!normalizedSearch) {
@@ -396,7 +398,7 @@ export function UpstreamConflictDialog({
const payload: SyncOverwritePayload[] = Object.entries(groupedSelections)
.map(([modelName, fields]) => ({
model_name: modelName,
fields: Array.from(fields),
fields: [...fields],
}))
.filter((item) => item.fields.length > 0)
web/src/features/models/components/models-table.tsx
+1
View File
@@ -202,6 +202,7 @@ export function ModelsTable() {
applyHeaderSize
toolbarProps={{
searchPlaceholder: t('Filter by model name...'),
searchDebounceMs: 500,
filters: [
{
columnId: 'status',
web/src/features/pricing/hooks/use-filters.ts
+5 -2
View File
@@ -19,6 +19,8 @@ For commercial licensing, please contact support@quantumnous.com
import { useSearch } from '@tanstack/react-router'
import { useMemo, useCallback, useState } from 'react'
import { useDebounce } from '@/hooks/use-debounce'
import {
FILTER_ALL,
SORT_OPTIONS,
@@ -67,6 +69,7 @@ export function useFilters(models: PricingModel[]) {
}))
const searchInput = filterState.search || ''
const debouncedSearchInput = useDebounce(searchInput, 200)
const sortBy = filterState.sort || SORT_OPTIONS.NAME
const vendorFilter = filterState.vendor || FILTER_ALL
const groupFilter = filterState.group || FILTER_ALL
@@ -147,7 +150,7 @@ export function useFilters(models: PricingModel[]) {
if (!models || models.length === 0) return []
return filterAndSortModels(models, {
search: searchInput,
search: debouncedSearchInput,
vendor: vendorFilter,
group: groupFilter,
quotaType: quotaTypeFilter,
@@ -157,7 +160,7 @@ export function useFilters(models: PricingModel[]) {
})
}, [
models,
searchInput,
debouncedSearchInput,
vendorFilter,
groupFilter,
quotaTypeFilter,
web/src/features/redemption-codes/components/redemptions-table.tsx
+1
View File
@@ -171,6 +171,7 @@ export function RedemptionsTable() {
applyHeaderSize
toolbarProps={{
searchPlaceholder: t('Filter by name or ID...'),
searchDebounceMs: 500,
filters: [
{
columnId: 'status',
web/src/features/system-settings/models/channel-selector-dialog.tsx
+5 -3
View File
@@ -39,6 +39,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { useDebounce } from '@/hooks/use-debounce'
import type { UpstreamChannel } from '../types'
import {
@@ -80,6 +81,7 @@ export function ChannelSelectorDialog({
}: ChannelSelectorDialogProps) {
const { t } = useTranslation()
const [search, setSearch] = useState('')
const debouncedSearch = useDebounce(search, 200)
const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
useEffect(() => {
@@ -273,15 +275,15 @@ export function ChannelSelectorDialog({
)
const filteredChannels = useMemo(() => {
if (!search.trim()) return channels
if (!debouncedSearch.trim()) return channels
const searchLower = search.toLowerCase()
const searchLower = debouncedSearch.toLowerCase()
return channels.filter(
(ch) =>
ch.name.toLowerCase().includes(searchLower) ||
ch.base_url.toLowerCase().includes(searchLower)
)
}, [channels, search])
}, [channels, debouncedSearch])
const sortedChannels = useMemo(() => {
return [...filteredChannels].sort((a, b) => {
web/src/features/system-settings/models/model-ratio-visual-editor.tsx
+1
View File
@@ -682,6 +682,7 @@ const ModelRatioVisualEditorComponent = forwardRef<
<DataTableToolbar
table={table}
searchPlaceholder={t('Search models...')}
searchDebounceMs={250}
filters={[
{
columnId: 'billingMode',
web/src/features/system-settings/models/upstream-ratio-sync-table.tsx
+5 -3
View File
@@ -34,6 +34,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { useDebounce } from '@/hooks/use-debounce'
import type { DifferencesMap, RatioType } from '../types'
import { RATIO_TYPE_OPTIONS } from './constants'
@@ -88,6 +89,7 @@ export function UpstreamRatioSyncTable({
}: UpstreamRatioSyncTableProps) {
const { t } = useTranslation()
const [search, setSearch] = useState('')
const debouncedSearch = useDebounce(search, 250)
const [ratioTypeFilter, setRatioTypeFilter] = useState<string>('')
const dataSource = useMemo<ModelRow[]>(() => {
@@ -106,8 +108,8 @@ export function UpstreamRatioSyncTable({
const filteredData = useMemo(() => {
let data = dataSource
if (search.trim()) {
const lower = search.toLowerCase()
if (debouncedSearch.trim()) {
const lower = debouncedSearch.toLowerCase()
data = data.filter((row) => row.model.toLowerCase().includes(lower))
}
@@ -116,7 +118,7 @@ export function UpstreamRatioSyncTable({
}
return data
}, [dataSource, search, ratioTypeFilter])
}, [dataSource, debouncedSearch, ratioTypeFilter])
const upstreamNames = useMemo(() => {
const set = new Set<string>()
web/src/features/wallet/hooks/use-billing-history.ts
+20 -7
View File
@@ -17,10 +17,11 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import i18next from 'i18next'
import { useState, useEffect, useCallback } from 'react'
import { useState, useEffect, useCallback, useRef } from 'react'
import { toast } from 'sonner'
import { useIsAdmin } from '@/hooks/use-admin'
import { useDebounce } from '@/hooks/use-debounce'
import {
getUserBillingHistory,
@@ -50,6 +51,8 @@ export function useBillingHistory(options: UseBillingHistoryOptions = {}) {
const [page, setPage] = useState(initialPage)
const [pageSize, setPageSize] = useState(initialPageSize)
const [keyword, setKeyword] = useState('')
const debouncedKeyword = useDebounce(keyword)
const requestIdRef = useRef(0)
const [loading, setLoading] = useState(false)
const [completing, setCompleting] = useState(false)
@@ -57,11 +60,14 @@ export function useBillingHistory(options: UseBillingHistoryOptions = {}) {
* Fetch billing history
*/
const fetchBillingHistory = useCallback(async () => {
const requestId = ++requestIdRef.current
setLoading(true)
try {
const response = isAdmin
? await getAllBillingHistory(page, pageSize, keyword)
: await getUserBillingHistory(page, pageSize, keyword)
? await getAllBillingHistory(page, pageSize, debouncedKeyword)
: await getUserBillingHistory(page, pageSize, debouncedKeyword)
if (requestId !== requestIdRef.current) return
if (isApiSuccess(response) && response.data) {
setRecords(response.data.items || [])
@@ -74,15 +80,19 @@ export function useBillingHistory(options: UseBillingHistoryOptions = {}) {
setTotal(0)
}
} catch (error) {
if (requestId !== requestIdRef.current) return
// eslint-disable-next-line no-console
console.error('Failed to fetch billing history:', error)
toast.error(i18next.t('Failed to load billing history'))
setRecords([])
setTotal(0)
} finally {
setLoading(false)
if (requestId === requestIdRef.current) {
setLoading(false)
}
}
}, [isAdmin, page, pageSize, keyword])
}, [debouncedKeyword, isAdmin, page, pageSize])
/**
* Complete a pending order (admin only)
@@ -137,14 +147,17 @@ export function useBillingHistory(options: UseBillingHistoryOptions = {}) {
* Search by keyword
*/
const handleSearch = useCallback((newKeyword: string) => {
requestIdRef.current += 1
setKeyword(newKeyword)
setPage(1) // Reset to first page when searching
}, [])
// Fetch data when dependencies change
// Fetch data after the search draft has settled.
useEffect(() => {
if (keyword !== debouncedKeyword) return
fetchBillingHistory()
}, [fetchBillingHistory])
}, [debouncedKeyword, fetchBillingHistory, keyword])
return {
records,