refacto: Cover review

src/components/ui/mark-as-unread-button.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { BookX } from "lucide-react";
+import { BookX, Loader2 } from "lucide-react";
 import { Button } from "./button";
 import { useToast } from "./use-toast";
 import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
+import { useState } from "react";
+
 interface MarkAsUnreadButtonProps {
   bookId: string;
   onSuccess?: () => void;
@@ -12,9 +14,11 @@ interface MarkAsUnreadButtonProps {
 
 export function MarkAsUnreadButton({ bookId, onSuccess, className }: MarkAsUnreadButtonProps) {
   const { toast } = useToast();
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleMarkAsUnread = async (e: React.MouseEvent) => {
     e.stopPropagation(); // Empêcher la propagation au parent
+    setIsLoading(true);
     try {
       ClientOfflineBookService.removeCurrentPageById(bookId);
       const response = await fetch(`/api/komga/books/${bookId}/read-progress`, {
@@ -37,6 +41,8 @@ export function MarkAsUnreadButton({ bookId, onSuccess, className }: MarkAsUnrea
         description: "Impossible de marquer le tome comme non lu",
         variant: "destructive",
       });
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -46,9 +52,10 @@ export function MarkAsUnreadButton({ bookId, onSuccess, className }: MarkAsUnrea
       size="icon"
       onClick={handleMarkAsUnread}
       className={`h-8 w-8 p-0 rounded-br-lg rounded-tl-lg ${className}`}
+      disabled={isLoading}
       aria-label="Marquer comme non lu"
     >
-      <BookX className="h-5 w-5" />
+      {isLoading ? <Loader2 className="h-5 w-5 animate-spin" /> : <BookX className="h-5 w-5" />}
     </Button>
   );
 }