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

1 files changed, 41 insertions, 0 deletions

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