skeleton updated

src/pages/Home.jsx

@@ -23,7 +23,6 @@ const Home = () => {
     if (!hasMore) return;
 
     setShowSkeleton(true);
-
     setTimeout(() => {
       axios
         .get(`https://swapi.py4e.com/api/people/?page=${page}`)
@@ -37,6 +36,10 @@ const Home = () => {
           }
           setLoading(false);
           setShowSkeleton(false);
+        })
+        .catch(() => {
+          setShowSkeleton(false);
+          setHasMore(false);
         });
     }, 1000);
   }, [page]);
@@ -57,13 +60,11 @@ const Home = () => {
       return;
     }
 
-    // FILTER DATA ACCORDING TO CHARACTER NAME
     const filtered = data.filter((character) =>
       character.name.toLowerCase().includes(query)
     );
     setFilteredData(filtered);
 
-    // AUTO COMPLETE SUGGESTIONS
     const autoSuggestions = data
       .map((character) => character.name)
       .filter((name) => name.toLowerCase().includes(query))
@@ -71,7 +72,6 @@ const Home = () => {
     setSuggestions(autoSuggestions);
   };
 
-  // AUTO COMPLETE SUGGESTIONS ONCLICK
   const handleSuggestionClick = (suggestion) => {
     setSearchQuery(suggestion);
     setFilteredData(
@@ -124,7 +124,7 @@ const Home = () => {
 
       <CharacterCard data={filteredData} />
 
-      {showSkeleton && (
+      {showSkeleton && hasMore && (
         <ul className="skeleton-character-container">
           {[...Array.from({ length: 5 })].map((_, index) => (
             <li className="skeleton-character-card skeleton" key={index}>
@@ -138,7 +138,6 @@ const Home = () => {
             </li>
           ))}
         </ul>
-        
       )}
 
       {hasMore && <div ref={ref}></div>}