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

1 files changed, 13 insertions, 19 deletions

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>
+      }
+    />
   );
 }