feat: landing & watchlist brn optimist

Author: agmmtoo

components/books/BtnWatchlist.tsx

@@ -1,6 +1,6 @@
 'use client'
-import { useTransition } from 'react'
-import { BellMinus, BellRing, Loader } from 'lucide-react'
+import { startTransition, useOptimistic } from 'react'
+import { BellMinus, BellRing } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import {
   addToWatchlistAction,
@@ -14,29 +14,36 @@ export default function BtnWatchlist({
   bookId: string
   isWatched: boolean
 }) {
-  const [pending, startTransition] = useTransition()
+  const [optimisticWatched, setOptimisticWatched] = useOptimistic(
+    isWatched,
+    (_, next: boolean) => next
+  )
+
+  const onToggle = () => {
+    const currentState = optimisticWatched
+    const nextState = !currentState
 
-  const handleAdd = () =>
     startTransition(async () => {
-      await addToWatchlistAction(bookId)
+      setOptimisticWatched(nextState)
+      
+      if (currentState) {
+        await removeFromWatchlistAction(bookId)
+      } else {
+        await addToWatchlistAction(bookId)
+      }
     })
-  const handleRemove = () =>
-    startTransition(async () => await removeFromWatchlistAction(bookId))
+  }
 
-  if (isWatched) {
+  if (optimisticWatched) {
     return (
       <Button
         variant="outline"
         className="w-full bg-transparent"
-        onClick={handleRemove}
-        disabled={pending}
+        onClick={onToggle}
+        aria-pressed={optimisticWatched}
       >
         <>
-          {pending ? (
-            <Loader className="mr-2 h-4 w-4 animate-spin" />
-          ) : (
-            <BellMinus className="mr-2 h-4 w-4 text-destructive" />
-          )}
+          <BellMinus className="mr-2 h-4 w-4 text-destructive" />
           Remove from Watchlist
         </>
       </Button>
@@ -46,15 +53,11 @@ export default function BtnWatchlist({
     <Button
       variant="outline"
       className="w-full hover:bg-(--color-light-vibrant) hover:text-white dark:hover:bg-(--color-dark-vibrant) dark:hover:text-white"
-      onClick={handleAdd}
-      disabled={pending}
+      onClick={onToggle}
+      aria-pressed={optimisticWatched}
     >
       <>
-        {pending ? (
-          <Loader className="mr-2 h-4 w-4 animate-spin" />
-        ) : (
-          <BellRing className="mr-2 h-4 w-4" />
-        )}
+        <BellRing className="mr-2 h-4 w-4" />
         Add to Watchlist
       </>
     </Button>