Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

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;