adding loading component and apply it

src/App.jsx

@@ -6,6 +6,7 @@ import Header from "@/layouts/header";
 // components
 import Starfield from "react-starfield";
 import Cursor from "./components/Cursor";
+import Loading from "./components/ui/Loading";
 // Data
 import menus from "./pages/tree-view/data";
 
@@ -61,7 +62,7 @@ function App() {
       </div>
 
       <Header setCursorVariant={setCursorVariant} />
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<Loading />}>
         <Routes>
           <Route path="React-Projects">
             <Route

src/components/ui/Loading.jsx

@@ -0,0 +1,10 @@
+
+const Loading = () => {
+  return (
+    <div className="absolute inset-0 m-auto flex justify-center items-center">
+      <div className="loader"></div>
+    </div>
+  );
+};
+
+export default Loading;

src/pages/CustomHooks/use-fetch/test.jsx

@@ -11,11 +11,7 @@ const UseFetchHookTest = () => {
       <h1 className="text-2xl font-mono text-center mb-2">
         <span className="text-primary font-bold">useFetch</span> Hook
       </h1>
-      {pending ? (
-        <div className="absolute inset-0 m-auto flex justify-center items-center">
-          <div className="loader "></div>
-        </div>
-      ) : error ? <h3 className="text-rose-500 text-lg">{error}</h3> : data && data.products && data.products.length ? (
+      {pending ? <Loading /> : error ? <h3 className="text-rose-500 text-lg">{error}</h3> : data && data.products && data.products.length ? (
         data.products.map((productItem) => (
           <p key={productItem.key} className="text-center">{productItem.title}</p>
         ))

src/pages/GithubProfileFinder/GithubProfileFinder.jsx

@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useEffect, useState } from "react";
 import { User } from "./User";
+import Loading from "@/components/ui/Loading";
 
 const GithubProfileFinder = () => {
   const [userName, setUserName] = useState("No0ne003");
@@ -44,11 +45,7 @@ const GithubProfileFinder = () => {
           Search
         </Button>
       </div>
-      {loading ? (
-        <div className="absolute inset-0 m-auto flex justify-center items-center">
-          <div className="loader "></div>
-        </div>
-      ) : userData !== null ? (
+      {loading ? <Loading /> : userData !== null ? (
         <User user={userData} />
       ) : null}
     </div>

src/pages/LoadMoreData.jsx

@@ -1,3 +1,4 @@
+import Loading from "@/components/ui/Loading";
 import { Button } from "@/components/ui/button";
 import { useEffect, useState } from "react";
 
@@ -34,11 +35,7 @@ function LoadMoreData() {
   }, [products]);
 
   if (loading) {
-    return (
-      <div className="absolute inset-0 m-auto flex justify-center items-center">
-        <div className="loader "></div>
-      </div>
-    );
+    return <Loading />
   }
   console.log(products);
 

src/pages/SearchAutoComplete/SearchAutoComplete.jsx

@@ -1,6 +1,7 @@
 import { Input } from "@/components/ui/input";
 import { useEffect, useState } from "react";
 import { Suggesstions } from "./Suggesstions";
+import Loading from "@/components/ui/Loading";
 
 const SearchAutoComplete = () => {
   const [loading, setLoading] = useState(false);
@@ -65,11 +66,7 @@ const SearchAutoComplete = () => {
         name="search"
         placeholder="Search Users Here..."
       />
-      {loading ? (
-        <div className="absolute inset-0 m-auto flex justify-center items-center">
-          <div className="loader "></div>
-        </div>
-      ) : showDropDown && <Suggesstions handleClick={handleClick} data={filteredUsers} /> }
+      {loading ? <Loading /> : showDropDown && <Suggesstions handleClick={handleClick} data={filteredUsers} /> }
     </div>
   );
 };