From 014ca376a8834f1e6c75c93a778c0f22fd70b84d Mon Sep 17 00:00:00 2001
From: bhavnisharora <bhavnisharora786@gmail.com>
Date: Thu, 2 Jan 2025 16:21:24 +0530
Subject: [PATCH] hotfix/ loading and ID

---
 src/App.css                                         | 1 +
 src/components/characterDetail/CharacterDetails.jsx | 7 +++++--
 src/pages/Home.jsx                                  | 7 +++----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index e65c32d..3ed2c15 100644
--- a/src/App.css
+++ b/src/App.css
@@ -202,3 +202,4 @@ body {
     max-width: 300px;
   }
 }
+  
\ No newline at end of file
diff --git a/src/components/characterDetail/CharacterDetails.jsx b/src/components/characterDetail/CharacterDetails.jsx
index 4c814bf..b3b2c62 100644
--- a/src/components/characterDetail/CharacterDetails.jsx
+++ b/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}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 7f8efe9..5cdb1a2 100644
--- a/src/pages/Home.jsx
+++ b/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) => (