From 03faa429f9342b4b5aa15d870b4e86ee5bf41650 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 20 Mar 2024 18:26:59 +0000
Subject: fix(web): Greatly improve the search feeling by removing the flicker

---
 .../dashboard/bookmarks/UpdatableBookmarksGrid.tsx | 41 ++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx

(limited to 'apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx')

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}
+    />
+  );
+}
-- 
cgit v1.2.3-70-g09d2