src/App.css

@@ -202,3 +202,4 @@ body {
     max-width: 300px;
   }
 }
+  

src/components/characterDetail/CharacterDetails.jsx

@@ -19,8 +19,11 @@ const CharacterDetails = () => {
       })
       .catch((err) => {
         console.log(err);
+      })
+      .finally(() => {
+        setLoading(false);
       });
-  }, []);
+  }, [id]);
 
   if (loading) {
     return <p> loading...</p>;
@@ -50,7 +53,7 @@ const CharacterDetails = () => {
         <strong>Skin Color </strong> {character.skin_color}
       </p>
       <p>
-        <strong>Eye Color  </strong> {character.eye_color}
+        <strong>Eye Color </strong> {character.eye_color}
       </p>
       <p>
         <strong>Birth Year </strong> {character.birth_year}

src/pages/Home.jsx

@@ -29,7 +29,7 @@ const Home = () => {
         .then((res) => {
           const results = res.data.results;
           if (results.length > 0) {
-            setData((prevData) => [...prevData, ...results]);
+            setData((prevData) => [...prevData, ...results]); 
             setFilteredData((prevData) => [...prevData, ...results]);
           } else {
             setHasMore(false);
@@ -42,7 +42,7 @@ const Home = () => {
           setHasMore(false);
         });
     }, 1000);
-  }, [page]);
+  }, [page]); 
 
   useEffect(() => {
     if (inView && hasMore && !loading) {
@@ -122,8 +122,7 @@ const Home = () => {
         </div>
       </div>
 
-      <CharacterCard data={filteredData} />
+      <CharacterCard data={filteredData} /> 
-
       {showSkeleton && hasMore && (
         <ul className="skeleton-character-container">
           {[...Array.from({ length: 5 })].map((_, index) => (