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

3 files changed, 14 insertions, 1 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/AddLink.tsx b/packages/web/app/dashboard/bookmarks/components/AddLink.tsx
index 0ef4d193..6cd51c1d 100644
--- a/packages/web/app/dashboard/bookmarks/components/AddLink.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/AddLink.tsx
@@ -10,6 +10,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "@/components/ui/use-toast";
 import { api } from "@/lib/trpc";
 import { ActionButton } from "@/components/ui/action-button";
+import { useLoadingCard } from "@/lib/hooks/use-loading-card";
 
 const formSchema = z.object({
   url: z.string().url({ message: "The link must be a valid URL" }),
@@ -17,13 +18,20 @@ const formSchema = z.object({
 
 export default function AddLink() {
   const router = useRouter();
+  const {setLoading} = useLoadingCard();
   const bookmarkLinkMutator = api.bookmarks.bookmarkLink.useMutation({
+    onMutate: () => {
+      setLoading(true);
+    },
     onSuccess: () => {
       router.refresh();
     },
     onError: () => {
       toast({ description: "Something went wrong", variant: "destructive" });
     },
+    onSettled: () => {
+      setLoading(false);
+    },
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
diff --git a/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx b/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
index bd144a67..0afb42bd 100644
--- a/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
@@ -14,7 +14,6 @@ export default async function Bookmarks({
     redirect("/");
   }
 
-  // TODO: Migrate to a server side call in trpc instead
   const bookmarks = await api.bookmarks.getBookmarks({
     favourited,
     archived,
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>
   );