fix search

Author: xPaw

web/src/components/Lists.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import { useWindowVirtualizer } from "@tanstack/react-virtual";
 
 interface Props<T> {
@@ -9,12 +9,19 @@ interface Props<T> {
 
 export function LazyList<T>({ className, data, render }: Props<T>) {
   const listRef = useRef<HTMLDivElement>(null);
+  const [scrollMargin, setScrollMargin] = useState(0);
+
+  useLayoutEffect(() => {
+    if (listRef.current) {
+      setScrollMargin(listRef.current.offsetTop);
+    }
+  }, []);
 
   const virtualizer = useWindowVirtualizer({
     count: data.length,
     estimateSize: () => 200,
-    overscan: 3,
-    scrollMargin: listRef.current?.offsetTop ?? 0,
+    overscan: 10,
+    scrollMargin,
   });
 
   return (
@@ -30,7 +37,7 @@ export function LazyList<T>({ className, data, render }: Props<T>) {
               top: 0,
               left: 0,
               width: "100%",
-              transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`,
+              transform: `translateY(${virtualRow.start - scrollMargin}px)`,
             }}
           >
             {render(data[virtualRow.index])}

web/src/components/Search/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { SearchContext } from "./SearchContext";
@@ -46,32 +46,45 @@ export const SearchInput = styled.input.attrs({ type: "search" })`
 
 export function SearchBox({ baseUrl, className, placeholder = "Search..." }: { baseUrl: string; className?: string; placeholder?: string }) {
   const { search, setSearch } = useContext(SearchContext);
+  const [inputValue, setInputValue] = useState(search);
   const navigate = useNavigate();
   const location = useLocation();
   const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const pendingRef = useRef(inputValue);
 
-  // Sync context from URL (back/forward navigation, clicking links)
+  // Sync from URL (back/forward navigation, clicking links)
   useEffect(() => {
     const urlSearch = new URLSearchParams(location.search).get("search") ?? "";
     if (urlSearch !== search) {
       setSearch(urlSearch);
+      setInputValue(urlSearch);
+      pendingRef.current = urlSearch;
     }
   }, [location.search]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Sync input when search is set externally (e.g. from programmatic navigation)
+  useEffect(() => {
+    setInputValue(search);
+    pendingRef.current = search;
+  }, [search]);
+
   // Cleanup debounce timer on unmount
   useEffect(() => () => clearTimeout(timerRef.current), []);
 
   const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
     ({ target: { value } }) => {
-      setSearch(value);
+      setInputValue(value);
+      pendingRef.current = value;
       clearTimeout(timerRef.current);
       timerRef.current = setTimeout(() => {
-        if (value === "") {
+        const latest = pendingRef.current;
+        setSearch(latest);
+        if (latest === "") {
           navigate(baseUrl, { replace: true });
         } else {
-          navigate(`${baseUrl}?search=${encodeURIComponent(value)}`, { replace: true });
+          navigate(`${baseUrl}?search=${encodeURIComponent(latest)}`, { replace: true });
         }
-      }, 300);
+      }, 150);
     },
     [setSearch, navigate, baseUrl],
   );
@@ -83,7 +96,7 @@ export function SearchBox({ baseUrl, className, placeholder = "Search..." }: { b
       className={className}
       placeholder={placeholder}
       ref={ref}
-      value={search}
+      value={inputValue}
       onChange={onChange}
       aria-label="Search"
     />