ajout loader et modif pour affichage personnages avec images

src/components/loader.jsx

@@ -0,0 +1,9 @@
+import '../style/loader.scss';
+
+export default function Loader() {
+  return (
+    <div className='load'>
+      <img src='/pictures/hammer.png' alt='' /> <p> Loading..... </p>
+    </div>
+  );
+}

src/components/marvel-characters.jsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import Card from '../components/card';
 import Modal from '../components/modal';
 import Profile from '../components/profile';
+import Loader from './loader';
 
 const publicKey = import.meta.env.VITE_PUBLIC_KEY;
 
@@ -12,25 +13,42 @@ export default function MarvelCharacters({ addToFavorites }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [comics, setComics] = useState([]);
   const [currentPage, setCurrentPage] = useState(0);
-  const charactersPerPage = 20;
+  const [loading, setLoading] = useState(true);
+  const [err, setError] = useState(null);
+  const charactersPerPage = 15;
 
   useEffect(() => {
-    const apiComics = `https://gateway.marvel.com/v1/public/characters?apikey=${publicKey}&limit=100`;
+    const apiComics = `https://gateway.marvel.com/v1/public/characters?apikey=${publicKey}&limit=40`;
 
     fetch(apiComics)
       .then((res) => {
         if (!res.ok) throw new Error('Erreur réseau');
         return res.json();
       })
       .then((data) => {
-        const randomCharacters = data.data.results.sort(() => Math.random() - 1);
-        setMarvelCharacter(randomCharacters);
+        const filteredCharacters = data.data.results.filter(
+          (marvel) =>
+            marvel.thumbnail &&
+            marvel.thumbnail.path &&
+            marvel.thumbnail.extension &&
+            !marvel.thumbnail.path.includes('image_not_available'),
+        );
+        setLoading(false);
+        setMarvelCharacter(filteredCharacters);
       })
-      // eslint-disable-next-line no-console
-      .catch((err) => console.error(err));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [MarvelCharacters]);
 
+      .catch((err) => {
+        setError(err);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading)
+    return (
+      <div>
+        <Loader />
+      </div>
+    );
   const handleAddToFavorites = (character) => {
     addToFavorites(character);
   };
@@ -84,6 +102,8 @@ export default function MarvelCharacters({ addToFavorites }) {
     )
     .slice(currentPage * charactersPerPage, (currentPage + 1) * charactersPerPage);
 
+  if (err) return <div>Error: {err.message}</div>;
+
   return (
     <div className='characters-comics'>
       <div className='pagination'>

src/style/loader.scss

@@ -0,0 +1,29 @@
+@use 'settings' as *;
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.load {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    padding-bottom: 20px;
+    color: white;
+    font-size: 50px;
+
+    font-family: $font-family;
+  }
+  img {
+    width: 150px;
+    animation: spin 1s linear infinite;
+    padding-top: 20px;
+  }
+}