src/hooks/useFetch.jsx

@@ -6,7 +6,6 @@ const useFetch = (url) => {
     const [loading, setLoading] = useState(false)
     const [error, setError] = useState({})
     useEffect(() => {
-        // console.log("Inside fetch")
         const fetch = async () => {
             let response;
             try {

src/pages/HomePage.jsx

@@ -16,8 +16,6 @@ const HomePage = () => {
         url + "&s=" + searchValue + "&page=" + page
     );
 
-    console.log(page);
-
     const handlePageChange = (e) => {
         setPage(e?.target?.textContent);
     };
@@ -50,7 +48,14 @@ const HomePage = () => {
             </div>
             {data?.Search?.length > 0 && (
                 <div className="flex flex-col items-center m-10">
-                    <ClipLoader color="#fff" loading={loading} size={100} />
+                    {/* <ClipLoader color="#fff" loading={loading} size={100} /> */}
+                    {loading && (
+                        <svg
+                            className="animate-spin h-12 w-12 border-4 border-[#fff] mb-6"
+                            viewBox="0 0 24 24"
+                            fill="#fff"
+                        ></svg>
+                    )}
                     <div className="flex flex-wrap gap-4 mb-6 justify-center">
                         {data?.Search?.map((movie) => (
                             <Card key={movie?.imdbID} movie={movie} />