perf: speed up search

This commit is contained in:
rusconn
2023-05-24 13:17:20 +00:00
parent f1c3bd2971
commit 0cf5774e16
5 changed files with 48 additions and 15 deletions

View File

@@ -1,7 +1,8 @@
"use client";
import { useMemo, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { useSetSearchText } from "@/contexts/search-text";
import { cn } from "@/lib/style";
import { Button, ButtonProps } from "@/components/ui/button";
@@ -12,10 +13,17 @@ export function SearchBar() {
const router = useRouter();
const inputRef = useRef<HTMLInputElement>(null);
const [text, setText] = useState("");
const setSearchText = useSetSearchText();
// prefetch to speed up the first search
useEffect(() => router.prefetch("/search"), [router]);
const search = () => {
if (text.trim()) {
router.push(`/search?q=${text.trim()}`);
// next/navigation doesn't support shallow routing, use context instead of query params for speed
// https://github.com/vercel/next.js/issues/49668
setSearchText(text.trim());
router.push("/search");
}
};