Move to next/form (#1369)

app/search/children-wrapper.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { Fragment } from 'react';
+
+// Ensure children are re-rendered when the search query changes
+export default function ChildrenWrapper({ children }: { children: React.ReactNode }) {
+  const searchParams = useSearchParams();
+  return <Fragment key={searchParams.get('q')}>{children}</Fragment>;
+}

app/search/layout.tsx

@@ -2,6 +2,7 @@ import Footer from 'components/layout/footer';
 import Collections from 'components/layout/search/collections';
 import FilterList from 'components/layout/search/filter';
 import { sorting } from 'lib/constants';
+import ChildrenWrapper from './children-wrapper';
 
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -10,7 +11,9 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
         <div className="order-first w-full flex-none md:max-w-[125px]">
           <Collections />
         </div>
-        <div className="order-last min-h-screen w-full md:order-none">{children}</div>
+        <div className="order-last min-h-screen w-full md:order-none">
+          <ChildrenWrapper>{children}</ChildrenWrapper>
+        </div>
         <div className="order-none flex-none md:order-last md:w-[125px]">
           <FilterList list={sorting} title="Sort by" />
         </div>

app/search/loading.tsx

@@ -2,14 +2,17 @@ import Grid from 'components/grid';
 
 export default function Loading() {
   return (
-    <Grid className="grid-cols-2 lg:grid-cols-3">
-      {Array(12)
-        .fill(0)
-        .map((_, index) => {
-          return (
-            <Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-800" />
-          );
-        })}
-    </Grid>
+    <>
+      <div className="mb-4 h-6" />
+      <Grid className="grid-cols-2 lg:grid-cols-3">
+        {Array(12)
+          .fill(0)
+          .map((_, index) => {
+            return (
+              <Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-800" />
+            );
+          })}
+      </Grid>
+    </>
   );
 }