Improve search performance

Author: xPaw

src/components/Docs/ContentList.tsx

@@ -9,7 +9,6 @@ import { SchemaEnumView } from "./SchemaEnum";
 import { ClassTree } from "./ClassTree";
 import { Declaration } from "./api";
 import { DeclarationsContext, declarationKey } from "./DeclarationsContext";
-import { SearchContext } from "../Search/SearchContext";
 import { GAMES } from "../../games";
 
 const CardBlock = styled.div`
@@ -176,7 +175,6 @@ function renderItem(declaration: Declaration) {
 
 export function ContentList() {
   const { declarations, metadata, loading, error } = useContext(DeclarationsContext);
-  const { search } = useContext(SearchContext);
   const { data, isSearching } = useFilteredData(declarations);
   const [showTree, setShowTree] = useState(
     () => /bot|crawl|spider|slurp/i.test(navigator.userAgent) || navigator.webdriver,
@@ -186,7 +184,7 @@ export function ContentList() {
     <ContentWrapper>
       {data.length > 0 ? (
         isSearching ? (
-          <LazyList key={search} data={data} render={renderItem} />
+          <LazyList data={data} render={renderItem} />
         ) : (
           <ScrollableList data={data} render={renderItem} />
         )

src/components/Lists.tsx

@@ -1,5 +1,5 @@
-import React, { useRef } from "react";
-import { useVirtualizer, useWindowVirtualizer } from "@tanstack/react-virtual";
+import React, { useEffect, useRef } from "react";
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
 
 interface Props<T> {
   data: T[];
@@ -13,7 +13,7 @@ export function LazyList<T>({ data, render }: Props<T>) {
   const virtualizer = useWindowVirtualizer({
     count: data.length,
     estimateSize: () => 80,
-    overscan: 10,
+    overscan: 2,
     scrollMargin: parentOffsetRef.current,
   });
 
@@ -24,6 +24,15 @@ export function LazyList<T>({ data, render }: Props<T>) {
     }
   }, []);
 
+  // Scroll to top when search results change (skip initial mount)
+  const prevDataRef = useRef(data);
+  useEffect(() => {
+    if (prevDataRef.current !== data) {
+      prevDataRef.current = data;
+      window.scrollTo(0, 0);
+    }
+  }, [data]);
+
   return (
     <div ref={parentRef}>
       <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>

src/components/Search/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState, useTransition } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { styled } from "@linaria/react";
 import { SearchContext } from "./SearchContext";
@@ -60,7 +60,7 @@ export function SearchBox({
   const [inputValue, setInputValue] = useState(search);
   const navigate = useNavigate();
   const location = useLocation();
-  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const [, startTransition] = useTransition();
   const ownNavigateRef = useRef(false);
 
   // Sync from URL (back/forward navigation, clicking links)
@@ -70,37 +70,27 @@ export function SearchBox({
       return;
     }
     const urlSearch = new URLSearchParams(location.search).get("search") ?? "";
-    setSearch(urlSearch);
     setInputValue(urlSearch);
-    clearTimeout(timerRef.current);
+    startTransition(() => setSearch(urlSearch));
     // Intentionally depends only on location.search — we sync *from* the URL.
     // search/setSearch are omitted because including them would create an
     // infinite loop: setSearch triggers a navigate which changes location.search.
   }, [location.search]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Cleanup debounce timer on unmount
-  useEffect(() => () => clearTimeout(timerRef.current), []);
-
-  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
-    ({ target: { value } }) => {
-      setInputValue(value);
-      clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(() => {
-        const wasSearching = search !== "";
-        setSearch(value);
-        ownNavigateRef.current = true;
-        // Push a history entry when starting a new search so back button works.
-        // Replace while typing to avoid polluting history with every keystroke.
-        const replace = wasSearching || value === "";
-        if (value === "") {
-          navigate(baseUrl, { replace });
-        } else {
-          navigate(`${baseUrl}?search=${encodeURIComponent(value)}`, { replace });
-        }
-      }, 150);
-    },
-    [search, setSearch, navigate, baseUrl],
-  );
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = ({ target: { value } }) => {
+    const wasSearching = inputValue !== "";
+    setInputValue(value);
+    ownNavigateRef.current = true;
+    // Push a history entry when starting a new search so back button works.
+    // Replace while typing to avoid polluting history with every keystroke.
+    const replace = wasSearching || value === "";
+    startTransition(() => {
+      setSearch(value);
+      navigate(value === "" ? baseUrl : `${baseUrl}?search=${encodeURIComponent(value)}`, {
+        replace,
+      });
+    });
+  };
 
   const ref = useCtrlFHook<HTMLInputElement>();