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

web/src/features/models/components/deployments-table.tsx

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

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

@@ -202,6 +202,7 @@ export function ModelsTable() {
       applyHeaderSize
       toolbarProps={{
         searchPlaceholder: t('Filter by model name...'),
+        searchDebounceMs: 500,
         filters: [
           {
             columnId: 'status',