handle bookmark delete loading state

packages/web/src/app/bookmarks.tsx

@@ -6,6 +6,7 @@ import { create } from "zustand"
 import { fetchApi, useAuthenticatedQuery } from "~/api"
 import { Button } from "~/components/button"
 import { useDeleteBookmark } from "~/bookmark/api"
+import { LoadingSpinner } from "~/components/loading-spinner"
 import { useMnemonics } from "~/hooks/use-mnemonics"
 import { Dialog, DialogActionRow, DialogBody, DialogTitle } from "~/components/dialog"
 
@@ -171,8 +172,8 @@ function DeleteBookmarkDialog() {
 
 	useMnemonics(
 		{
-			p: proceed,
-			c: cancel,
+			y: proceed,
+			n: cancel,
 		},
 		{ active: true },
 	)
@@ -192,22 +193,50 @@ function DeleteBookmarkDialog() {
 		markBookmarkForDeletion(null)
 	}
 
+	function body() {
+		switch (deleteBookmarkMutation.status) {
+			case "pending":
+				return (
+					<p>
+						Deleting <LoadingSpinner />
+					</p>
+				)
+			case "idle":
+				return (
+					<p>
+						The bookmark titled{" "}
+						<strong>
+							<em>"{bookmark.title}"</em>
+						</strong>{" "}
+						will be deleted. Proceed?
+					</p>
+				)
+			case "error":
+				return <p className="text-red-500">Failed to delete the bookmark!</p>
+		}
+	}
+
+	function title() {
+		switch (deleteBookmarkMutation.status) {
+			case "pending":
+				return "PLEASE WAIT"
+			case "idle":
+				return "CONFIRM"
+			case "error":
+				return "ERROR OCCURRED"
+		}
+	}
+
 	return (
 		<Dialog>
-			<DialogTitle>CONFIRM</DialogTitle>
-			<DialogBody>
-				The bookmark titled{" "}
-				<strong>
-					<em>"{bookmark.title}"</em>
-				</strong>{" "}
-				will be deleted. Proceed?
-			</DialogBody>
+			<DialogTitle>{title()}</DialogTitle>
+			<DialogBody>{body()}</DialogBody>
 			<DialogActionRow>
 				<Button disabled={deleteBookmarkMutation.isPending} onClick={proceed}>
-					<span className="underline">P</span>roceed
+					{deleteBookmarkMutation.isError ? "Retry" : "Proceed"} (y)
 				</Button>
 				<Button disabled={deleteBookmarkMutation.isPending} onClick={cancel}>
-					<span className="underline">C</span>ancel
+					Cancel (n)
 				</Button>
 			</DialogActionRow>
 		</Dialog>
@@ -215,17 +244,23 @@ function DeleteBookmarkDialog() {
 }
 
 function BookmarkListSection() {
-	const {
-		data: bookmarks,
-		error,
-		status,
-	} = useAuthenticatedQuery(["bookmarks"], () => fetchApi<LinkBookmark[]>("/bookmarks").then(([data]) => data))
+	const { data: bookmarks, status } = useAuthenticatedQuery(["bookmarks"], () =>
+		fetchApi<LinkBookmark[]>("/bookmarks").then(([data]) => data),
+	)
 
 	switch (status) {
 		case "pending":
-			return <p>Loading...</p>
+			return (
+				<p className="container max-w-2xl">
+					Loading&nbsp;
+					<LoadingSpinner />
+				</p>
+			)
 		case "success":
-			return <BookmarkList bookmarks={bookmarks} />
+			if (bookmarks) {
+				return <BookmarkList bookmarks={bookmarks} />
+			}
+			return null
 		default:
 			return null
 	}

packages/web/src/app/login.tsx

@@ -66,7 +66,7 @@ function Page() {
 				<form onSubmit={submitLoginForm}>
 					<FormField type="text" name="username" label="USERNAME" className="mb-2" />
 					<FormField type="password" name="password" label="PASSWORD" className="mb-8" />
-					<Button className="w-full py-2" type="submit">
+					<Button className="w-full py-2 md:py-2" type="submit">
 						Log in
 					</Button>
 				</form>