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

web/src/features/pricing/hooks/use-filters.ts

@@ -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,