fix(web): Greatly improve the search feeling by removing the flicker

6 files changed, 35 insertions, 44 deletions

diff --git a/apps/web/app/dashboard/archive/page.tsx b/apps/web/app/dashboard/archive/page.tsx
index 69559185..bc6971db 100644
--- a/apps/web/app/dashboard/archive/page.tsx
+++ b/apps/web/app/dashboard/archive/page.tsx
@@ -3,7 +3,11 @@ import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 export default async function ArchivedBookmarkPage() {
   return (
     <div className="continer mt-4">
-      <Bookmarks title="🗄️ Archive" archived={true} showDivider={true} />
+      <Bookmarks
+        header={<p className="text-2xl">🗄️ Archive</p>}
+        query={{ archived: true }}
+        showDivider={true}
+      />
     </div>
   );
 }
diff --git a/apps/web/app/dashboard/bookmarks/page.tsx b/apps/web/app/dashboard/bookmarks/page.tsx
index e310df01..02964482 100644
--- a/apps/web/app/dashboard/bookmarks/page.tsx
+++ b/apps/web/app/dashboard/bookmarks/page.tsx
@@ -1,5 +1,11 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 
 export default async function BookmarksPage() {
-  return <Bookmarks title="Bookmarks" archived={false} showEditorCard={true} />;
+  return (
+    <Bookmarks
+      header={<p className="text-2xl">Bookmarks</p>}
+      query={{ archived: false }}
+      showEditorCard={true}
+    />
+  );
 }
diff --git a/apps/web/app/dashboard/favourites/page.tsx b/apps/web/app/dashboard/favourites/page.tsx
index de17461d..310117b1 100644
--- a/apps/web/app/dashboard/favourites/page.tsx
+++ b/apps/web/app/dashboard/favourites/page.tsx
@@ -4,9 +4,8 @@ export default async function FavouritesBookmarkPage() {
   return (
     <div className="continer mt-4">
       <Bookmarks
-        title="⭐️ Favourites"
-        archived={false}
-        favourited={true}
+        header={<p className="text-2xl">⭐️ Favourites</p>}
+        query={{ favourited: true, archived: false }}
         showDivider={true}
       />
     </div>
diff --git a/apps/web/app/dashboard/lists/[listId]/page.tsx b/apps/web/app/dashboard/lists/[listId]/page.tsx
index a8ba4feb..f28d94b1 100644
--- a/apps/web/app/dashboard/lists/[listId]/page.tsx
+++ b/apps/web/app/dashboard/lists/[listId]/page.tsx
@@ -1,5 +1,5 @@
 import { notFound, redirect } from "next/navigation";
-import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
+import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 import DeleteListButton from "@/components/dashboard/lists/DeleteListButton";
 import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
@@ -27,24 +27,18 @@ export default async function ListPage({
     throw e;
   }
 
-  const bookmarks = await api.bookmarks.getBookmarks({
-    listId: list.id,
-    archived: false,
-  });
-
   return (
-    <div className="container flex flex-col gap-3">
-      <div className="flex justify-between">
-        <span className="pt-4 text-2xl">
-          {list.icon} {list.name}
-        </span>
-        <DeleteListButton list={list} />
-      </div>
-      <hr />
-      <BookmarksGrid
-        query={{ listId: list.id, archived: false }}
-        bookmarks={bookmarks}
-      />
-    </div>
+    <Bookmarks
+      query={{ listId: list.id, archived: false }}
+      showDivider={true}
+      header={
+        <div className="flex justify-between">
+          <span className="pt-4 text-2xl">
+            {list.icon} {list.name}
+          </span>
+          <DeleteListButton list={list} />
+        </div>
+      }
+    />
   );
 }
diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index 76d23af2..26b984a7 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -17,14 +17,7 @@ function SearchComp() {
     <div className="container flex flex-col gap-3 p-4">
       <SearchInput ref={inputRef} autoFocus={true} />
       <hr />
-      {data ? (
-        <BookmarksGrid
-          query={{ ids: data.bookmarks.map((b) => b.id) }}
-          bookmarks={data}
-        />
-      ) : (
-        <Loading />
-      )}
+      {data ? <BookmarksGrid bookmarks={data.bookmarks} /> : <Loading />}
     </div>
   );
 }
diff --git a/apps/web/app/dashboard/tags/[tagName]/page.tsx b/apps/web/app/dashboard/tags/[tagName]/page.tsx
index f06062c3..326d550e 100644
--- a/apps/web/app/dashboard/tags/[tagName]/page.tsx
+++ b/apps/web/app/dashboard/tags/[tagName]/page.tsx
@@ -1,5 +1,5 @@
 import { notFound, redirect } from "next/navigation";
-import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
+import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
 import { TRPCError } from "@trpc/server";
@@ -27,18 +27,13 @@ export default async function TagPage({
     throw e;
   }
 
-  const query = {
-    archived: false,
-    tagId: tag.id,
-  };
-
-  const bookmarks = await api.bookmarks.getBookmarks(query);
-
   return (
-    <div className="container flex flex-col gap-3">
-      <span className="pt-4 text-2xl">{tagName}</span>
-      <hr />
-      <BookmarksGrid query={query} bookmarks={bookmarks} />
+    <div className="continer mt-4">
+      <Bookmarks
+        header={<p className="text-2xl">{tagName}</p>}
+        query={{ archived: false, tagId: tag.id }}
+        showEditorCard={true}
+      />
     </div>
   );
 }