diff --git a/src/routes/contacts.index.tsx b/src/routes/contacts.index.tsx index 0a17e9a..9d841b8 100644 --- a/src/routes/contacts.index.tsx +++ b/src/routes/contacts.index.tsx @@ -44,6 +44,7 @@ function ContactsIndex() { const [selected, setSelected] = useState>(new Set()); const [bulkType, setBulkType] = useState(""); const [letter, setLetter] = useState("all"); + const [visibleLimit, setVisibleLimit] = useState(100); const load = async () => { setLoading(true); @@ -140,9 +141,17 @@ function ContactsIndex() { return preLetterFiltered.filter((r) => letterOf(r.name) === letter); }, [preLetterFiltered, letter]); + // Reset paging window when filters change + useEffect(() => { + setVisibleLimit(100); + }, [q, typeFilter, view, letter]); + + const visibleRows = useMemo(() => filtered.slice(0, visibleLimit), [filtered, visibleLimit]); + const hasMore = filtered.length > visibleRows.length; + const grouped = useMemo(() => { const map = new Map(); - for (const r of filtered) { + for (const r of visibleRows) { const l = letterOf(r.name); if (!map.has(l)) map.set(l, []); map.get(l)!.push(r); @@ -152,7 +161,7 @@ function ContactsIndex() { if (b === "#") return -1; return a.localeCompare(b); }); - }, [filtered]); + }, [visibleRows]); const archivedCount = rows.filter((r) => r.archived_at).length; const activeCount = rows.length - archivedCount;