feat: SPA pour les pages existantes

assets/react/app/presentation/pages/MangaDetailPage.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Layout } from '../components/Layout/Layout.jsx';
 import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
@@ -25,19 +25,26 @@ export function MangaDetailPage() {
     getMangaFromCollection
   } = useManga();
 
+  const [isLoadingDetails, setIsLoadingDetails] = useState(false);
+
+  // Obtenir les données du manga depuis le cache ou la collection
   const manga = detailedMangas[slug];
   const collectionManga = getMangaFromCollection(slug);
+  const displayManga = manga || collectionManga;
 
   useEffect(() => {
-    // Si on n'a pas les détails du manga, on les charge
-    if (!manga) {
-      loadMangaDetail(slug);
-    }
-  }, [slug, manga, loadMangaDetail]);
+    const loadDetails = async () => {
+      if (!manga && displayManga) {
+        setIsLoadingDetails(true);
+        await loadMangaDetail(slug);
+        setIsLoadingDetails(false);
+      } else if (!manga && !displayManga) {
+        await loadMangaDetail(slug);
+      }
+    };
 
-  const handleMangaClick = (mangaSlug) => {
-    navigate(`/manga/${mangaSlug}`);
-  };
+    loadDetails();
+  }, [slug, manga, displayManga, loadMangaDetail]);
 
   const handleAddMangaClick = (query = '') => {
     navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
@@ -45,8 +52,8 @@ export function MangaDetailPage() {
 
   const toolbarConfig = {
     leftSection: [
-      { icon: faArrowLeft, onClick: () => navigate(-1) },
-      { icon: faRefresh, onClick: () => loadMangaDetail(slug) }
+      { icon: faArrowLeft, navigateBack: true },
+      { icon: faRefresh, onClick: () => {} }
     ],
     rightSection: [
       { icon: faBookmark, onClick: () => {} },
@@ -55,7 +62,7 @@ export function MangaDetailPage() {
     ]
   };
 
-  if (loading) {
+  if (loading && !displayManga) {
     return <div className="flex justify-center items-center h-screen">Loading...</div>;
   }
 
@@ -63,14 +70,12 @@ export function MangaDetailPage() {
     return <div className="text-red-500 text-center p-4">{error}</div>;
   }
 
-  // Utiliser les données de base de la collection pendant le chargement des détails
-  const displayManga = manga || collectionManga;
   if (!displayManga) {
     return <div className="text-center p-4">Manga not found</div>;
   }
 
   return (
-    <Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
+    <Layout onAddMangaClick={handleAddMangaClick}>
       <Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
 
       {/* Hero section with manga info */}
@@ -91,6 +96,11 @@ export function MangaDetailPage() {
               <span className="px-2 py-1 bg-green-500 rounded-full text-sm">
                 {displayManga.status}
               </span>
+              {isLoadingDetails && (
+                <span className="text-sm text-gray-300">
+                  Chargement des détails...
+                </span>
+              )}
             </div>
             
             <div className="flex items-center gap-6 mb-4">
@@ -182,6 +192,14 @@ export function MangaDetailPage() {
           ))}
         </div>
       )}
+
+      {!manga && (
+        <div className="container mx-auto px-4 py-8">
+          <div className="bg-gray-100 rounded-lg p-4 text-gray-600 text-center">
+            Chargement des chapitres...
+          </div>
+        </div>
+      )}
     </Layout>
   );
 }