done assignment 4

src/pages/Home.jsx

@@ -23,7 +23,6 @@ const Home = () => {
     if (!hasMore) return;
 
     setShowSkeleton(true);
-    setLoading(true);
 
     setTimeout(() => {
       axios
@@ -39,7 +38,7 @@ const Home = () => {
           setLoading(false);
           setShowSkeleton(false);
         });
-    }, 2000);
+    }, 1000);
   }, [page]);
 
   useEffect(() => {
@@ -58,11 +57,13 @@ 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))
@@ -70,6 +71,7 @@ const Home = () => {
     setSuggestions(autoSuggestions);
   };
 
+  // AUTO COMPLETE SUGGESTIONS ONCLICK
   const handleSuggestionClick = (suggestion) => {
     setSearchQuery(suggestion);
     setFilteredData(
@@ -124,7 +126,7 @@ const Home = () => {
 
       {showSkeleton && (
         <ul className="skeleton-character-container">
-          {Array.from({ length: 5 }).map((_, index) => (
+          {[...Array.from({ length: 5 })].map((_, index) => (
             <li className="skeleton-character-card skeleton" key={index}>
               <div className="skeleton-character-details">
                 <div className="skeleton-line skeleton-title"></div>
@@ -136,6 +138,7 @@ const Home = () => {
             </li>
           ))}
         </ul>
+        
       )}
 
       {hasMore && <div ref={ref}></div>}