diff --git a/components/navbar.tsx b/components/navbar.tsx index c2b9b1f..dca289b 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -4,7 +4,7 @@ import { AnimatePresence, motion } from "motion/react" import logo from "@/app/icon.png" import Image from "next/image" import Link from "next/link" -import { useEffect, useRef, useState } from "react" +import { useEffect, useLayoutEffect, useRef, useState } from "react" import { CircleXIcon, Gamepad2Icon, MenuIcon, XIcon } from "lucide-react" import { routes } from "@/lib/routes" import { usePathname, useRouter, useSearchParams } from "next/navigation" @@ -26,19 +26,35 @@ export default function Navbar() { const [forceFocusStyles, setForceFocusStyles] = useState(false) const inputRef = useRef(null) + // When syncing state from the URL (e.g. after navigating from the landing + // page), skip the next URL-write cycle so the stale/empty debounced value + // doesn't overwrite the URL params before it catches up. + const skipNextUrlWrite = useRef(false) + const { data: session, isPending: isSessionLoading } = useSession() const [userMenuOpen, setUserMenuOpen] = useState(false) // Sync search query with URL ?q= param - useEffect(() => { + useLayoutEffect(() => { const q = searchParams.get("q") || "" - const timeout = setTimeout(() => setSearchQuery(q), 0) - return () => clearTimeout(timeout) + // If the URL has a different value than our state, we're syncing after + // a navigation — skip the next URL-write to avoid clearing the param + if (q !== searchQuery) { + skipNextUrlWrite.current = true + } + setSearchQuery(q) }, [searchParams]) // Update URL when debounced query changes (skip if already matches) useEffect(() => { + // Skip one cycle after syncing from URL so the stale/empty debounced + // value doesn't overwrite the URL params before it catches up + if (skipNextUrlWrite.current) { + skipNextUrlWrite.current = false + return + } + if (isLanding) return const currentQ = searchParams.get("q") || "" if (debouncedQuery === currentQ) return diff --git a/middleware.ts b/proxy.ts similarity index 92% rename from middleware.ts rename to proxy.ts index 3a3183f..4447b46 100644 --- a/middleware.ts +++ b/proxy.ts @@ -7,7 +7,7 @@ const authRoutes = [ "/reset-password", ] -export default async function middleware(req: NextRequest) { +export default async function proxy(req: NextRequest) { const path = req.nextUrl.pathname const isAuthRoute = authRoutes.some((route) => path.startsWith(route))