From f9878736a2f0a695829a20ba4bcd33337c3a1880 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 17 Feb 2024 12:54:43 +0000
Subject: feature: Inital attempt at showing a skeleton card while bookmark is
 loaded

---
 packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx')

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