center loading on screen after remove it from the component

No0ne003 · May 17, 2024 · 6c5a100 · 6c5a100
1 parent a802095
commit 6c5a100
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 5 deletions.
diff --git a/src/pages/CustomHooks/use-fetch/test.jsx b/src/pages/CustomHooks/use-fetch/test.jsx
@@ -13,7 +13,9 @@ const UseFetchHookTest = () => {
         <span className="text-primary font-bold">useFetch</span> Hook
       </h1>
       {pending ? (
-        <Loading />
+        <div className="absolute inset-0 m-auto flex justify-center items-center">
+          <Loading />
+        </div>
       ) : error ? (
         <h3 className="text-rose-500 text-lg text-center">{error}</h3>
       ) : data && data.products && data.products.length ? (

diff --git a/src/pages/GithubProfileFinder/GithubProfileFinder.jsx b/src/pages/GithubProfileFinder/GithubProfileFinder.jsx
@@ -59,7 +59,9 @@ const GithubProfileFinder = () => {
         </Button>
       </div>
       {loading ? (
-        <Loading />
+        <div className="absolute flex justify-center items-center m-auto inset-0">
+          <Loading />
+        </div>
       ) : userData !== null ? (
         <div className="my-24">
           <User user={userData} />

diff --git a/src/pages/ImageSlider.jsx b/src/pages/ImageSlider.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { BsArrowLeftCircleFill, BsArrowRightCircleFill } from "react-icons/bs";
+import Loading from "@/components/ui/Loading";
 
 function ImageSlider({
   url = "https://meme-api.com/gimme",
@@ -34,7 +35,7 @@ function ImageSlider({
   }, [url]);
 
   if (loading) {
-    return <div>Loading data ! please wait</div>;
+    return <div className="absolute inset-0 m-auto flex justify-center items-center"><Loading /></div>;
   }
   if (errorMsg !== null) {
     return <div>Error occured ! {errorMsg}</div>;

diff --git a/src/pages/LoadMoreData.jsx b/src/pages/LoadMoreData.jsx
@@ -35,7 +35,7 @@ function LoadMoreData() {
   }, [products]);
 
   if (loading) {
-    return <Loading />
+    return <div className="absolute inset-0 m-auto flex justify-center items-center"><Loading /></div>
   }
   console.log(products);
 

diff --git a/src/pages/SearchAutoComplete/SearchAutoComplete.jsx b/src/pages/SearchAutoComplete/SearchAutoComplete.jsx
@@ -80,7 +80,9 @@ const SearchAutoComplete = () => {
         placeholder="Search Users Here..."
       />
       {loading ? (
-        <Loading />
+        <div className="absolute inset-0 m-auto flex justify-center items-center">
+          <Loading />
+        </div>
       ) : (
         showDropDown && (
           <Suggesstions handleClick={handleClick} data={filteredUsers} />