fix: prevent rerender by router

src/app/explorer/components/InfiniteScrollGuilds.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
+import { Skeleton } from "@/components/ui/Skeleton";
 import { env } from "@/lib/env";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useIntersection } from "foxact/use-intersection";
@@ -23,7 +25,7 @@ export const InfiniteScrollGuilds = () => {
     [search],
   );
 
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
     useInfiniteQuery({
       queryKey: ["guilds", search],
       queryFn: fetchGuilds,
@@ -51,16 +53,15 @@ export const InfiniteScrollGuilds = () => {
 
   return (
     <section className="grid gap-2">
-      <h2 className="font-bold text-lg">Explore guilds</h2>
-      {guilds && guilds.length > 0 ? (
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {guilds.map((guild) => (
-            <GuildCard key={guild.id} guild={guild} />
-          ))}
-        </div>
-      ) : (
-        <p>Couldn&apos;t fetch guilds</p>
-      )}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {isLoading
+          ? Array.from({ length: 33 }, (_, i) => (
+              <Card key={i}>
+                <Skeleton className="size-full h-[114px]" />
+              </Card>
+            ))
+          : guilds?.map((guild) => <GuildCard key={guild.id} guild={guild} />)}
+      </div>
 
       <div
         ref={(element: HTMLDivElement | null) => {

src/app/explorer/components/Search.tsx

@@ -3,12 +3,11 @@
 import { Input } from "@/components/ui/Input";
 import { useDebouncedValue } from "foxact/use-debounced-value";
 import { useSetAtom } from "jotai";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { searchAtom } from "../atoms";
 
 export const Search = () => {
-  const router = useRouter();
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const [value, setValue] = useState(
@@ -17,6 +16,7 @@ export const Search = () => {
 
   const debouncedValue = useDebouncedValue(value, 200);
   const setSearch = useSetAtom(searchAtom);
+
   useEffect(() => {
     setSearch(debouncedValue);
   }, [debouncedValue]);
@@ -25,10 +25,11 @@ export const Search = () => {
     const newSearchParams = new URLSearchParams(
       Object.entries({ search: value }).filter(([_, value]) => value),
     );
-
-    router.replace(`${pathname}?${newSearchParams.toString()}`, {
-      scroll: false,
-    });
+    window.history.replaceState(
+      null,
+      "",
+      `${pathname}?${newSearchParams.toString()}`,
+    );
   }, [value]);
 
   return (

src/app/explorer/page.tsx

@@ -39,7 +39,7 @@ export default function Explorer() {
         <Search />
       </section>
 
-      <InfiniteScrollGuilds search="haho" />
+      <InfiniteScrollGuilds />
     </main>
   );
 }