web: highlight word matches, limit search results

web/src/components/search/SearchShell.tsx

@@ -22,8 +22,9 @@ export function SearchShell({
 }) {
   const { replace } = useRouter();
   const [inputValue, setInputValue] = useState(initialQuery);
-  const [, startTransition] = useTransition();
+  const [isPending, startTransition] = useTransition();
   const lastPushedRef = useRef(initialQuery);
+  const fetching = isPending || inputValue !== lastPushedRef.current;
 
   const pushQuery = useDebouncedCallback((next: string) => {
     lastPushedRef.current = next;
@@ -73,7 +74,12 @@ export function SearchShell({
           </div>
         </div>
       </form>
-      {children}
+      <div
+        className={fetching ? styles.fetching : undefined}
+        aria-busy={fetching}
+      >
+        {children}
+      </div>
     </div>
   );
 }