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
-    router.push(`${pathname}?${params.toString()}`);
+    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);
-    router.push(`${pathname}?${params.toString()}`);
+    await executeRequest(async () => {
+      router.push(`${pathname}?${params.toString()}`);
+    });
   };
 
   // Calcul des indices de début et de fin pour l'affichage