diff --git a/src/modules/parcel-sync/components/parcel-sync-module.tsx b/src/modules/parcel-sync/components/parcel-sync-module.tsx index 0be718d..dcec7f4 100644 --- a/src/modules/parcel-sync/components/parcel-sync-module.tsx +++ b/src/modules/parcel-sync/components/parcel-sync-module.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState, useEffect, useCallback, useMemo, useRef } from "react"; +import { useState, useEffect, useCallback, useMemo, useRef, useDeferredValue } from "react"; import { Search, Download, @@ -615,37 +615,35 @@ export function ParcelSyncModule() { /* UAT autocomplete filter */ /* ════════════════════════════════════════════════════════════ */ + // useDeferredValue lets React prioritize the input update over the filter + const deferredUatQuery = useDeferredValue(uatQuery); + useEffect(() => { - const raw = uatQuery.trim(); + const raw = deferredUatQuery.trim(); if (raw.length < 2) { setUatResults([]); return; } - const timer = setTimeout(() => { - const isDigit = /^\d+$/.test(raw); - const query = normalizeText(raw); - // Filter and sort: UAT name matches first, then county-only matches - const nameMatches: typeof uatData = []; - const countyOnlyMatches: typeof uatData = []; + const isDigit = /^\d+$/.test(raw); + const query = normalizeText(raw); + const nameMatches: typeof uatData = []; + const countyOnlyMatches: typeof uatData = []; - for (const item of uatData) { - if (isDigit) { - if (item.siruta.startsWith(raw)) nameMatches.push(item); - } else { - const nameMatch = normalizeText(item.name).includes(query); - const countyMatch = - item.county && normalizeText(item.county).includes(query); - if (nameMatch) nameMatches.push(item); - else if (countyMatch) countyOnlyMatches.push(item); - } + for (const item of uatData) { + if (isDigit) { + if (item.siruta.startsWith(raw)) nameMatches.push(item); + } else { + const nameMatch = normalizeText(item.name).includes(query); + const countyMatch = + item.county && normalizeText(item.county).includes(query); + if (nameMatch) nameMatches.push(item); + else if (countyMatch) countyOnlyMatches.push(item); } + } - // UAT name matches first (priority), then county-only matches - const results = [...nameMatches, ...countyOnlyMatches].slice(0, 12); - setUatResults(results); - }, 150); - return () => clearTimeout(timer); - }, [uatQuery, uatData]); + const results = [...nameMatches, ...countyOnlyMatches].slice(0, 12); + setUatResults(results); + }, [deferredUatQuery, uatData]); /* ════════════════════════════════════════════════════════════ */ /* Auto-connect: trigger on first UAT keystroke */