feature: Inital attempt at showing a skeleton card while bookmark is loaded

1 files changed, 6 insertions, 0 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
index 711c296b..1963a980 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
@@ -1,3 +1,7 @@
+"use client";
+
+import { useLoadingCard } from "@/lib/hooks/use-loading-card";
+import BookmarkCardSkeleton from "./BookmarkCardSkeleton";
 import LinkCard from "./LinkCard";
 import { ZBookmark } from "@/lib/types/api/bookmarks";
 
@@ -13,8 +17,10 @@ export default function BookmarksGrid({
 }: {
   bookmarks: ZBookmark[];
 }) {
+  const { loading } = useLoadingCard();
   return (
     <div className="container grid grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+      {loading && <BookmarkCardSkeleton />}
       {bookmarks.map((b) => renderBookmark(b))}
     </div>
   );