From f1509fc58849cb4f1bb4386bcc818ec12b1a15d7 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Wed, 27 Aug 2025 10:08:21 +0000
Subject: feat: Add a bookmark skeleton for search

---
 apps/web/app/dashboard/search/page.tsx             |  4 +-
 .../dashboard/bookmarks/BookmarksGridSkeleton.tsx  | 84 ++++++++++++++++++++++
 2 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/components/dashboard/bookmarks/BookmarksGridSkeleton.tsx

(limited to 'apps')

diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index 930ad6bb..03dbb196 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -2,7 +2,7 @@
 
 import { Suspense, useEffect } from "react";
 import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
-import { FullPageSpinner } from "@/components/ui/full-page-spinner";
+import BookmarksGridSkeleton from "@/components/dashboard/bookmarks/BookmarksGridSkeleton";
 import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
 import { useInSearchPageStore } from "@/lib/store/useInSearchPageStore";
 import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
@@ -35,7 +35,7 @@ function SearchComp() {
           bookmarks={data.pages.flatMap((b) => b.bookmarks)}
         />
       ) : (
-        <FullPageSpinner />
+        <BookmarksGridSkeleton />
       )}
     </div>
   );
diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGridSkeleton.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGridSkeleton.tsx
new file mode 100644
index 00000000..b592919b
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGridSkeleton.tsx
@@ -0,0 +1,84 @@
+// TODO: Refactor the bookmark layout grid to be generic and allow to pass the bookmark component generically.
+// This removes the need for handling the layout in this component.
+import { useMemo } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  bookmarkLayoutSwitch,
+  useBookmarkLayout,
+  useGridColumns,
+} from "@/lib/userLocalSettings/bookmarksLayout";
+import tailwindConfig from "@/tailwind.config";
+import Masonry from "react-masonry-css";
+import resolveConfig from "tailwindcss/resolveConfig";
+
+function getBreakpointConfig(userColumns: number) {
+  const fullConfig = resolveConfig(tailwindConfig);
+
+  const breakpointColumnsObj: { [key: number]: number; default: number } = {
+    default: userColumns,
+  };
+
+  const lgColumns = Math.max(1, Math.min(userColumns, userColumns - 1));
+  const mdColumns = Math.max(1, Math.min(userColumns, 2));
+  const smColumns = 1;
+
+  breakpointColumnsObj[parseInt(fullConfig.theme.screens.lg)] = lgColumns;
+  breakpointColumnsObj[parseInt(fullConfig.theme.screens.md)] = mdColumns;
+  breakpointColumnsObj[parseInt(fullConfig.theme.screens.sm)] = smColumns;
+  return breakpointColumnsObj;
+}
+
+function BookmarkCardSkeleton({ height }: { height: string }) {
+  return (
+    <div className="mb-4 border border-border bg-card p-4">
+      <div className="space-y-3">
+        <Skeleton className={`w-full ${height}`} />
+        <div className="flex items-center space-x-2">
+          <Skeleton className="h-4 w-4 rounded-full" />
+          <Skeleton className="h-3 w-24" />
+        </div>
+        <Skeleton className="h-4 w-3/4" />
+      </div>
+    </div>
+  );
+}
+
+export default function BookmarksGridSkeleton({
+  count = 12,
+}: {
+  count?: number;
+}) {
+  const layout = useBookmarkLayout();
+  const gridColumns = useGridColumns();
+  const breakpointConfig = useMemo(
+    () => getBreakpointConfig(gridColumns),
+    [gridColumns],
+  );
+
+  const children = Array.from({ length: count }, (_, i) => (
+    <BookmarkCardSkeleton
+      key={i}
+      height={bookmarkLayoutSwitch(layout, {
+        masonry: "h-48",
+        grid: "h-48",
+        list: "h-32",
+        compact: "h-4",
+      })}
+    />
+  ));
+
+  return bookmarkLayoutSwitch(layout, {
+    masonry: (
+      <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
+        {children}
+      </Masonry>
+    ),
+    grid: (
+      <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
+        {children}
+      </Masonry>
+    ),
+    list: <div className="grid grid-cols-1">{children}</div>,
+    compact: <div className="grid grid-cols-1">{children}</div>,
+  });
+}
-- 
cgit v1.2.3-70-g09d2