feat: loader on pagination

src/components/library/PaginatedSeriesGrid.tsx

@@ -6,6 +6,7 @@ import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { useState, useEffect } from "react";
 import { Loader2, Filter } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useNetworkRequest } from "@/lib/hooks/use-network-request";
 
 interface PaginatedSeriesGridProps {
   series: any[];
@@ -25,6 +26,7 @@ export function PaginatedSeriesGrid({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const { executeRequest } = useNetworkRequest();
   const [isChangingPage, setIsChangingPage] = useState(false);
   const [showOnlyUnread, setShowOnlyUnread] = useState(searchParams.get("unread") === "true");
 
@@ -33,22 +35,24 @@ export function PaginatedSeriesGrid({
     setIsChangingPage(false);
   }, [series]);
 
-  const handlePageChange = (page: number) => {
+  const handlePageChange = async (page: number) => {
     setIsChangingPage(true);
     // Créer un nouvel objet URLSearchParams pour manipuler les paramètres
-    const params = new URLSearchParams(searchParams);
+    const params = new URLSearchParams(searchParams.toString());
     params.set("page", page.toString());
     if (showOnlyUnread) {
       params.set("unread", "true");
     }
 
     // Rediriger vers la nouvelle URL avec les paramètres mis à jour
+    await executeRequest(async () => {
       router.push(`${pathname}?${params.toString()}`);
+    });
   };
 
-  const handleUnreadFilter = () => {
+  const handleUnreadFilter = async () => {
     setIsChangingPage(true);
-    const params = new URLSearchParams(searchParams);
+    const params = new URLSearchParams(searchParams.toString());
     params.set("page", "1"); // Retourner à la première page lors du changement de filtre
 
     if (!showOnlyUnread) {
@@ -58,7 +62,9 @@ export function PaginatedSeriesGrid({
     }
 
     setShowOnlyUnread(!showOnlyUnread);
+    await executeRequest(async () => {
       router.push(`${pathname}?${params.toString()}`);
+    });
   };
 
   // Calcul des indices de début et de fin pour l'affichage

src/components/series/PaginatedBookGrid.tsx

@@ -7,6 +7,7 @@ import { useState, useEffect } from "react";
 import { Loader2, Filter } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { KomgaBook } from "@/types/komga";
+import { useNetworkRequest } from "@/lib/hooks/use-network-request";
 
 interface PaginatedBookGridProps {
   books: KomgaBook[];
@@ -26,6 +27,7 @@ export function PaginatedBookGrid({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const { executeRequest } = useNetworkRequest();
   const [isChangingPage, setIsChangingPage] = useState(false);
   const [showOnlyUnread, setShowOnlyUnread] = useState(searchParams.get("unread") === "true");
 
@@ -34,22 +36,24 @@ export function PaginatedBookGrid({
     setIsChangingPage(false);
   }, [books]);
 
-  const handlePageChange = (page: number) => {
+  const handlePageChange = async (page: number) => {
     setIsChangingPage(true);
     // Créer un nouvel objet URLSearchParams pour manipuler les paramètres
-    const params = new URLSearchParams(searchParams);
+    const params = new URLSearchParams(searchParams.toString());
     params.set("page", page.toString());
     if (showOnlyUnread) {
       params.set("unread", "true");
     }
 
     // Rediriger vers la nouvelle URL avec les paramètres mis à jour
+    await executeRequest(async () => {
       router.push(`${pathname}?${params.toString()}`);
+    });
   };
 
-  const handleUnreadFilter = () => {
+  const handleUnreadFilter = async () => {
     setIsChangingPage(true);
-    const params = new URLSearchParams(searchParams);
+    const params = new URLSearchParams(searchParams.toString());
     params.set("page", "1"); // Retourner à la première page lors du changement de filtre
 
     if (!showOnlyUnread) {
@@ -59,15 +63,15 @@ export function PaginatedBookGrid({
     }
 
     setShowOnlyUnread(!showOnlyUnread);
+    await executeRequest(async () => {
       router.push(`${pathname}?${params.toString()}`);
+    });
   };
 
-  const handleBookClick = (book: KomgaBook) => {
-    console.log("PaginatedBookGrid - handleBookClick:", {
-      bookId: book.id,
-      bookTitle: book.metadata.title,
-    });
+  const handleBookClick = async (book: KomgaBook) => {
+    await executeRequest(async () => {
       router.push(`/books/${book.id}`);
+    });
   };
 
   // Calcul des indices de début et de fin pour l'affichage