feat(mentorlist): add mainloader to mentorlist page

.env

@@ -1,15 +1,12 @@
-#Connected to demo backend so our main backend database do not affected
-# NEXT_PUBLIC_BACKEND_URL=https://grabtern-backend-demo.vercel.app
-# NEXT_PUBLIC_FRONTEND_URL=https://grabtern.com
+# Environment variables for the demo backend to prevent affecting the main backend database
+NEXT_PUBLIC_BACKEND_URL=https://demoapi.grabtern.in
+NEXT_PUBLIC_FRONTEND_URL=https://grabtern.com
 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=grabtern-demo
-NEXT_PUBLIC_ENCRYPTION_SECRET_KEY = "encryptionSecretKey"
+NEXT_PUBLIC_ENCRYPTION_SECRET_KEY="encryptionSecretKey"
 NEXT_PUBLIC_GOOGLE_CLIENT_ID="secured h"
 
-## If you backend server running on localhost you can this one.
+# Uncomment the following line if your backend server is running on localhost
 # NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
-NEXT_PUBLIC_BACKEND_URL=https://demoapi.grabtern.in
-#up is the prod. link
 
-## To use production one please uncomment this one( this is for OSS community)
-# NEXT_PUBLIC_BACKEND_URL=https://grabtern-backend-demo.vercel.app
-NEXT_PUBLIC_FORNTEND_URL=http://localhost:3000
+# Uncomment the following line to use the production backend.
+# NEXT_PUBLIC_BACKEND_URL=ttps://api.grabtern.in

components/UI/MainLoader.js

@@ -0,0 +1,77 @@
+import React from "react";
+
+const MainLoader = () => {
+  return (
+    <div style={styles.newPreloaderContainer}>
+      <div style={styles.newLoaderBackground}></div>
+      <div id="new-preloader-active" style={styles.newPreloaderActive}>
+        <div style={styles.newPreloader}>
+          <div style={styles.newPreloaderInner}>
+            <div style={styles.newPreloaderCircle}></div>
+            <div style={styles.newPreloaderImg}>
+              <div style={styles.newImgWrapper}>
+                <img src="faviconn.png" alt="Loading" style={styles.newImg} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  newPreloaderContainer: {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+  },
+  newLoaderBackground: {
+    // Add necessary styles for new loader background
+  },
+  newPreloaderActive: {
+    transition: "all 0.5s",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+  },
+  newPreloader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  newPreloaderInner: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+  },
+  newPreloaderCircle: {
+    width: "80px",
+    height: "80px",
+    border: "5px solid #f0f0f0",
+    borderTop: "5px solid purple",
+    borderRadius: "50%",
+    animation: "spin 1s linear infinite",
+  },
+  newPreloaderImg: {
+    position: "absolute",
+  },
+  newImgWrapper: {
+    backgroundColor: "white",
+    width: "80px",
+    height: "80px",
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  newImg: {
+    width: "55px",
+    height: "55px",
+    borderRadius: "50%",
+  },
+};
+
+export default MainLoader;

pages/mentorList.page.js

@@ -6,6 +6,7 @@ import { useApi } from "../hook/useAPi";
 import { Section, Input } from "../components/UI";
 import Loader from "../components/loader";
 import { ToastContainer, toast } from "react-toastify";
+import MainLoader from "../components/UI/MainLoader";
 
 const Header = dynamic(() => import("../components/layout/Header"));
 const SimpleBanner = dynamic(() => import("../components/basic/SimpleBanner"));
@@ -57,7 +58,7 @@ function Mentors() {
           {/* mentors cards */}
           <div className="tw-grid tw-gap-6 md:tw-grid-cols-2 lg:tw-grid-cols-3">
             {isLoading ? (
-              <Loader />
+              <MainLoader />
             ) : filteredMentors.length === 0 ? (
               <div className="tw-text-black tw-text-xl ">
                 <h1>No match found</h1>