From c75a9613248d090adcdb50bae8a7d8ed92aba140 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 16:02:26 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/contacts.index.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

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<Set<string>>(new Set());
   const [bulkType, setBulkType] = useState<string>("");
   const [letter, setLetter] = useState<string>("all");
+  const [visibleLimit, setVisibleLimit] = useState<number>(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<string, ContactRow[]>();
-    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;