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

3 files changed, 58 insertions, 35 deletions

diff --git a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
index 96e5c067..cee620c9 100644
--- a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
+++ b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
@@ -4,16 +4,16 @@ import { getServerAuthSession } from "@/server/auth";
 
 import type { ZGetBookmarksRequest } from "@hoarder/trpc/types/bookmarks";
 
-import BookmarksGrid from "./BookmarksGrid";
+import UpdatableBookmarksGrid from "./UpdatableBookmarksGrid";
 
 export default async function Bookmarks({
-  favourited,
-  archived,
-  title,
+  query,
+  header,
   showDivider,
   showEditorCard = false,
-}: ZGetBookmarksRequest & {
-  title: string;
+}: {
+  query: ZGetBookmarksRequest;
+  header: React.ReactNode;
   showDivider?: boolean;
   showEditorCard?: boolean;
 }) {
@@ -22,18 +22,13 @@ export default async function Bookmarks({
     redirect("/");
   }
 
-  const query = {
-    favourited,
-    archived,
-  };
-
   const bookmarks = await api.bookmarks.getBookmarks(query);
 
   return (
     <div className="container flex flex-col gap-3">
-      <div className="text-2xl">{title}</div>
+      {header}
       {showDivider && <hr />}
-      <BookmarksGrid
+      <UpdatableBookmarksGrid
         query={query}
         bookmarks={bookmarks}
         showEditorCard={showEditorCard}
diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
index 03c60a66..39638553 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
@@ -2,17 +2,12 @@
 
 import { useMemo } from "react";
 import { ActionButton } from "@/components/ui/action-button";
-import { api } from "@/lib/trpc";
 import tailwindConfig from "@/tailwind.config";
 import { Slot } from "@radix-ui/react-slot";
 import Masonry from "react-masonry-css";
 import resolveConfig from "tailwindcss/resolveConfig";
 
-import type {
-  ZBookmark,
-  ZGetBookmarksRequest,
-  ZGetBookmarksResponse,
-} from "@hoarder/trpc/types/bookmarks";
+import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
 
 import AssetCard from "./AssetCard";
 import EditorCard from "./EditorCard";
@@ -56,27 +51,19 @@ function renderBookmark(bookmark: ZBookmark) {
 }
 
 export default function BookmarksGrid({
-  query,
-  bookmarks: initialBookmarks,
+  bookmarks,
+  hasNextPage = false,
+  fetchNextPage = () => ({}),
+  isFetchingNextPage = false,
   showEditorCard = false,
 }: {
-  query: ZGetBookmarksRequest;
-  bookmarks: ZGetBookmarksResponse;
+  bookmarks: ZBookmark[];
   showEditorCard?: boolean;
-  itemsPerPage?: number;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  fetchNextPage?: () => void;
 }) {
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
-    api.bookmarks.getBookmarks.useInfiniteQuery(query, {
-      initialData: () => ({
-        pages: [initialBookmarks],
-        pageParams: [query.cursor],
-      }),
-      initialCursor: null,
-      getNextPageParam: (lastPage) => lastPage.nextCursor,
-    });
-
   const breakpointConfig = useMemo(() => getBreakpointConfig(), []);
-  const bookmarks = data!.pages.flatMap((b) => b.bookmarks);
   if (bookmarks.length == 0 && !showEditorCard) {
     return <p>No bookmarks</p>;
   }
diff --git a/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx
new file mode 100644
index 00000000..a344320e
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { api } from "@/lib/trpc";
+
+import type {
+  ZGetBookmarksRequest,
+  ZGetBookmarksResponse,
+} from "@hoarder/trpc/types/bookmarks";
+
+import BookmarksGrid from "./BookmarksGrid";
+
+export default function UpdatableBookmarksGrid({
+  query,
+  bookmarks: initialBookmarks,
+  showEditorCard = false,
+}: {
+  query: ZGetBookmarksRequest;
+  bookmarks: ZGetBookmarksResponse;
+  showEditorCard?: boolean;
+  itemsPerPage?: number;
+}) {
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    api.bookmarks.getBookmarks.useInfiniteQuery(query, {
+      initialData: () => ({
+        pages: [initialBookmarks],
+        pageParams: [query.cursor],
+      }),
+      initialCursor: null,
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    });
+
+  return (
+    <BookmarksGrid
+      bookmarks={data!.pages.flatMap((b) => b.bookmarks)}
+      hasNextPage={hasNextPage}
+      fetchNextPage={() => fetchNextPage()}
+      isFetchingNextPage={isFetchingNextPage}
+      showEditorCard={showEditorCard}
+    />
+  );
+}