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

5 files changed, 25 insertions, 2 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>
   );
diff --git a/packages/web/lib/hooks/use-loading-card.ts b/packages/web/lib/hooks/use-loading-card.ts
new file mode 100644
index 00000000..7bd7776a
--- /dev/null
+++ b/packages/web/lib/hooks/use-loading-card.ts
@@ -0,0 +1,9 @@
+import { create } from "zustand";
+
+export const useLoadingCard = create<{
+  loading: boolean,
+  setLoading: (val: boolean) => void,
+}>((set) => ({
+  loading: false,
+  setLoading: (val: boolean) => set({ loading: val }),
+}));
diff --git a/packages/web/package.json b/packages/web/package.json
index 997e4042..724845f5 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -40,7 +40,8 @@
     "server-only": "^0.0.1",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zustand": "^4.5.1"
   },
   "devDependencies": {
     "@types/bcrypt": "^5.0.2",