diff options
Diffstat (limited to 'packages/web')
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", |