diff --git a/src/components/Activities/InfraPlanning.jsx b/src/components/Activities/InfraPlanning.jsx
index e7a4003a..3b77472a 100644
--- a/src/components/Activities/InfraPlanning.jsx
+++ b/src/components/Activities/InfraPlanning.jsx
@@ -24,7 +24,7 @@ import { useProfile } from "../../hooks/useProfile";
 import { refreshData, setProjectId } from "../../slices/localVariablesSlice";
 import InfraTable from "../Project/Infrastructure/InfraTable";
 import { useSelectedProject } from "../../slices/apiDataManager";
-import Loader from "../common/Loader";
+import { SpinnerLoader } from "../common/Loader";
 
 const InfraPlanning = () => {
   const { profile: LoggedUser, refetch: fetchData } = useProfile();
@@ -57,9 +57,17 @@ const InfraPlanning = () => {
   }
 
   if (isLoading) {
-    return <Loader />;
+    return(
+      <div
+        className="d-flex justify-content-center align-items-center"
+        style={{ height: "60vh" }}
+      >
+        <SpinnerLoader />
+      </div>
+    );
   }
 
+
   if (isFetched && (!projectInfra || projectInfra.length === 0)) {
     return (
       <div
diff --git a/src/components/Charts/HorizontalBarChart.jsx b/src/components/Charts/HorizontalBarChart.jsx
index 5aec5e12..10fd5b7a 100644
--- a/src/components/Charts/HorizontalBarChart.jsx
+++ b/src/components/Charts/HorizontalBarChart.jsx
@@ -30,7 +30,6 @@ const HorizontalBarChart = ({
         >
           <SpinnerLoader />
         </div>
-        {/* Replace this with a skeleton or spinner if you prefer */}
       </div>
     );
   }
@@ -43,8 +42,16 @@ const HorizontalBarChart = ({
     categories.length === seriesData.length;
 
   if (!hasValidData) {
-    return <div className="text-center text-gray-500">No data to display</div>;
+    return (
+      <div
+        className="d-flex justify-content-center align-items-center text-muted"
+        style={{ height: "380px" }}
+      >
+        No data to display
+      </div>
+    );
   }
+
   // Combine seriesData and categories, then sort in descending order
   const combined = seriesData.map((value, index) => ({
     value,
diff --git a/src/components/Dashboard/ExpenseAnalysis.jsx b/src/components/Dashboard/ExpenseAnalysis.jsx
index ae7c9f37..92465d13 100644
--- a/src/components/Dashboard/ExpenseAnalysis.jsx
+++ b/src/components/Dashboard/ExpenseAnalysis.jsx
@@ -99,7 +99,7 @@ const ExpenseAnalysis = () => {
         {isLoading && (
           <div
             className="d-flex justify-content-center align-items-center"
-            style={{ height: "200px" }}
+            style={{ minHeight: "50vh" }}
           >
             <SpinnerLoader />
           </div>
diff --git a/src/components/Dashboard/ExpenseByProject.jsx b/src/components/Dashboard/ExpenseByProject.jsx
index 96e3fb56..a6aeac0c 100644
--- a/src/components/Dashboard/ExpenseByProject.jsx
+++ b/src/components/Dashboard/ExpenseByProject.jsx
@@ -7,6 +7,7 @@ import { formatCurrency } from "../../utils/appUtils";
 import { formatDate_DayMonth } from "../../utils/dateUtils";
 import { useProjectName } from "../../hooks/useProjects";
 import { useSelectedProject } from "../../slices/apiDataManager";
+import { SpinnerLoader } from "../common/Loader";
 
 const ExpenseByProject = () => {
   const projectId = useSelector((store) => store.localVariables.projectId);
@@ -163,12 +164,15 @@ const ExpenseByProject = () => {
       {/* Chart */}
       <div className="card-body bg-white text-dark p-3 rounded" style={{ minHeight: "210px" }}>
         {isLoading ? (
-          <p>Loading chart...</p>
+          <div className="d-flex justify-content-center align-items-center py-5">
+            <SpinnerLoader />
+          </div>
         ) : !expenseApiData || expenseApiData.length === 0 ? (
           <div className="text-center text-muted py-5">No data found</div>
         ) : (
           <Chart options={options} series={series} type="bar" height={235} />
         )}
+
       </div>
 
     </div>
diff --git a/src/components/Project/Infrastructure/WorkArea.jsx b/src/components/Project/Infrastructure/WorkArea.jsx
index c5925321..8b4e439c 100644
--- a/src/components/Project/Infrastructure/WorkArea.jsx
+++ b/src/components/Project/Infrastructure/WorkArea.jsx
@@ -16,6 +16,7 @@ import { useParams } from "react-router-dom";
 import ProgressBar from "../../common/ProgressBar";
 import { formatNumber } from "../../../utils/dateUtils";
 import { useServices } from "../../../hooks/masterHook/useMaster";
+import { SpinnerLoader } from "../../common/Loader";
 
 const WorkArea = ({ workArea, floor, forBuilding }) => {
   const selectedProject = useSelectedProject()
@@ -108,7 +109,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                       <ProgressBar
                         completedWork={formatNumber(workArea?.completedWork)}
                         plannedWork={formatNumber(workArea?.plannedWork)}
-                        className="m-0 my-2 " height="6px"rounded showLabel={true}
+                        className="m-0 my-2 " height="6px" rounded showLabel={true}
                       />
                     </div>
                   </div>
@@ -122,7 +123,12 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
               >
                 <div className="accordion-body px-6">
                   {isLoading || ProjectTaskList === undefined ? (
-                    <div className="text-center py-2 text-muted">Loading activities...</div>
+                    <div
+                      className="d-flex justify-content-center align-items-center text-muted"
+                      style={{ height: "120px" }}
+                    >
+                      <SpinnerLoader />
+                    </div>
                   ) : ProjectTaskList?.length === 0 ? (
                     <div className="text-center py-2 text-muted">No activities available for this work area.</div>
                   ) : ProjectTaskList?.length > 0 ? (
diff --git a/src/components/Project/ProjectCardView.jsx b/src/components/Project/ProjectCardView.jsx
index 1108120c..f953552a 100644
--- a/src/components/Project/ProjectCardView.jsx
+++ b/src/components/Project/ProjectCardView.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useProjects } from '../../hooks/useProjects'
-import Loader from '../common/Loader'
 import ProjectCard from './ProjectCard'
 
 const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
diff --git a/src/components/Project/ProjectInfra.jsx b/src/components/Project/ProjectInfra.jsx
index 643f6106..6bf95813 100644
--- a/src/components/Project/ProjectInfra.jsx
+++ b/src/components/Project/ProjectInfra.jsx
@@ -29,6 +29,7 @@ import eventBus from "../../services/eventBus";
 import { useParams } from "react-router-dom";
 import GlobalModel from "../common/GlobalModel";
 import { setService } from "../../slices/globalVariablesSlice";
+import { SpinnerLoader } from "../common/Loader";
 
 const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
   const projectId = useSelectedProject();
@@ -186,21 +187,24 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                   )}
                 </div>
               </div>
-              <div className="row ">
-                {isLoading && <p>Loading....</p>}
-                {projectInfra && projectInfra?.length > 0 && (
+              <div className="row modal-min-h">
+                {isLoading ? (
+                  <div className="d-flex justify-content-center align-items-center py-5">
+                    <SpinnerLoader />
+                  </div>
+                ) : projectInfra && projectInfra.length > 0 ? (
                   <InfraTable
                     buildings={projectInfra}
                     projectId={projectId}
                     serviceId={selectedService}
                   />
-                )}
-                {!isLoading && projectInfra?.length == 0 && (
-                  <div className="mt-5">
-                    <p>No Infra Avaiable</p>
+                ) : (
+                  <div className="text-center py-5">
+                    <p className="text-muted fs-6">No infrastructure data available.</p>
                   </div>
                 )}
               </div>
+
             </div>
           </div>
         </div>
diff --git a/src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx b/src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx
index c4aec957..c7803386 100644
--- a/src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx
+++ b/src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
 import { useSelectedProject } from "../../../slices/apiDataManager";
 import { formatUTCToLocalTime } from "../../../utils/dateUtils";
+import { SpinnerLoader } from "../../common/Loader";
 
 const ProjectAssignedOrgs = () => {
   const selectedProject = useSelectedProject();
@@ -25,12 +26,12 @@ const ProjectAssignedOrgs = () => {
       ),
       align: "text-start",
     },
-      {
+    {
       key: "service",
       label: "Service Name",
       getValue: (org) => (
         <div className="d-flex gap-2 py-1 ">
-        {org?.service?.name}
+          {org?.service?.name}
         </div>
       ),
       align: "text-start",
@@ -49,7 +50,7 @@ const ProjectAssignedOrgs = () => {
       align: "text-center",
     },
 
-     {
+    {
       key: "organizationType",
       label: "Organization Type",
       getValue: (org) => (
@@ -62,7 +63,7 @@ const ProjectAssignedOrgs = () => {
       ),
       align: "text-center",
     },
-   {
+    {
       key: "assignedDate",
       label: "Assigned Date",
       getValue: (org) => (
@@ -78,7 +79,13 @@ const ProjectAssignedOrgs = () => {
     },
   ];
 
-  if (isLoading) return <div>Loading...</div>;
+  if (isLoading)
+    return (
+      <div className="d-flex justify-content-center align-items-center py-5">
+        <SpinnerLoader />
+      </div>
+    );
+
   if (isError) return <div>{error.message}</div>;
 
   return (
diff --git a/src/components/Project/ProjectOrganizations.jsx b/src/components/Project/ProjectOrganizations.jsx
index b5a91fa6..7e5bfce5 100644
--- a/src/components/Project/ProjectOrganizations.jsx
+++ b/src/components/Project/ProjectOrganizations.jsx
@@ -21,7 +21,7 @@ const ProjectOrganizations = () => {
         </div>
       </div>
 
-      <div className="row">
+      <div className="row modal-min-h">
         <ProjectAssignedOrgs />
       </div>
     </div>
diff --git a/src/components/Project/Team/Teams.jsx b/src/components/Project/Team/Teams.jsx
index 31d27efa..badf81fd 100644
--- a/src/components/Project/Team/Teams.jsx
+++ b/src/components/Project/Team/Teams.jsx
@@ -21,6 +21,7 @@ import {
 import { useSelectedProject } from "../../../slices/apiDataManager";
 import GlobalModel from "../../common/GlobalModel";
 import TeamAssignToProject from "./TeamAssignToProject";
+import { SpinnerLoader } from "../../common/Loader";
 
 const Teams = () => {
   const selectedProject = useSelectedProject();
@@ -158,16 +159,8 @@ const Teams = () => {
                 <div>
                   {!servicesLoading && (
                     <>
-                      {(!assignedServices || assignedServices.length === 0) && (
-                        <span className="badge bg-label-secondary">
-                          Not Service Assigned
-                        </span>
-                      )}
-
                       {assignedServices?.length === 1 && (
-                        <span className="badge bg-label-secondary">
-                          {assignedServices[0].name}
-                        </span>
+                        <h5 className="mb-2">{assignedServices[0].name}</h5>
                       )}
 
                       {assignedServices?.length > 1 && (
@@ -189,6 +182,7 @@ const Teams = () => {
                   )}
                 </div>
 
+
                 <div className="form-check form-switch d-flex align-items-center text-nowrap">
                   <input
                     type="checkbox"
@@ -232,7 +226,12 @@ const Teams = () => {
           </div>
 
           <div className="table-responsive text-nowrap modal-min-h">
-            {employeeLodaing && <p>Loading..</p>}
+            {employeeLodaing && (
+              <div className="d-flex justify-content-center align-items-center py-5" style={{ minHeight: "50vh" }}>
+                <SpinnerLoader />
+              </div>
+            )}
+
             {projectEmployees && projectEmployees.length > 0 && (
               <table className="table ">
                 <thead>
@@ -290,8 +289,8 @@ const Teams = () => {
                             <td>
                               {emp.reAllocationDate
                                 ? moment(emp.reAllocationDate).format(
-                                    "DD-MMM-YYYY"
-                                  )
+                                  "DD-MMM-YYYY"
+                                )
                                 : "Present"}
                             </td>
                           )}
diff --git a/src/components/Tenant/Profile.jsx b/src/components/Tenant/Profile.jsx
index 963f6ce3..5c4e4085 100644
--- a/src/components/Tenant/Profile.jsx
+++ b/src/components/Tenant/Profile.jsx
@@ -16,9 +16,9 @@ const Profile = ({ data }) => {
       <div className="container-fuid">
        
         <div className="row">
-          <div className="col-12 my-2">
+          <div className="col-12">
             <div className="d-flex flex-wrap align-items-start position-relative ">
-              <div className=" d-flex align-items-start gap-2">
+              <div className=" d-flex align-items-start gap-2 my-1">
                 {data.logoImage ? (<img
                   src={data.logoImage}
                   alt="Preview"
diff --git a/src/components/gallary/ImageGalleryListView.jsx b/src/components/gallary/ImageGalleryListView.jsx
index 6973f6f0..f9e34360 100644
--- a/src/components/gallary/ImageGalleryListView.jsx
+++ b/src/components/gallary/ImageGalleryListView.jsx
@@ -7,7 +7,7 @@ import { useSelectedProject } from "../../slices/apiDataManager";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import Pagination from "../common/Pagination";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
-import Loader from "../common/Loader";
+import { SpinnerLoader } from "../common/Loader";
 
 const ImageGalleryListView = ({filter}) => {
   const [hoveredImage, setHoveredImage] = useState(null);
@@ -47,7 +47,7 @@ const ImageGalleryListView = ({filter}) => {
   if (isLoading) {
     return (
       <div className="page-min-h d-flex justify-content-center align-items-center">
-        <Loader />
+        <SpinnerLoader />
       </div>
     );
   }
diff --git a/src/pages/Directory/ContactsPage.jsx b/src/pages/Directory/ContactsPage.jsx
index 195ebb96..504a672f 100644
--- a/src/pages/Directory/ContactsPage.jsx
+++ b/src/pages/Directory/ContactsPage.jsx
@@ -11,7 +11,7 @@ import { defaultContactFilter } from "../../components/Directory/DirectorySchema
 import { useDebounce } from "../../utils/appUtils";
 import Pagination from "../../components/common/Pagination";
 import ListViewContact from "../../components/Directory/ListViewContact";
-import Loader from "../../components/common/Loader";
+import { SpinnerLoader } from "../../components/common/Loader";
 
 // Utility for CSV export
 const formatExportData = (contacts) => {
@@ -113,7 +113,15 @@ const ContactsPage = ({ projectId, searchText, onExport }) => {
       {/* Grid / List View */}
       {gridView ? (
         <>
-          {isLoading && <Loader />}
+          {isLoading && (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "50vh" }}
+            >
+              <SpinnerLoader />
+            </div>
+          )}
+
 
           {data?.data?.length === 0 && (
             <div className="py-4 text-center">
diff --git a/src/pages/Tenant/SelfTenantDetails.jsx b/src/pages/Tenant/SelfTenantDetails.jsx
index ea4b107d..f0dea3ce 100644
--- a/src/pages/Tenant/SelfTenantDetails.jsx
+++ b/src/pages/Tenant/SelfTenantDetails.jsx
@@ -3,7 +3,7 @@ import { useProfile } from "../../hooks/useProfile";
 import TenantDetails from "./TenantDetails";
 import { VIEW_TENANTS } from "../../utils/constants";
 import { useNavigate } from "react-router-dom";
-import Loader from "../../components/common/Loader";
+import { SpinnerLoader } from "../../components/common/Loader";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 
 const SelfTenantDetails = () => {
@@ -19,7 +19,7 @@ const SelfTenantDetails = () => {
   }, [isSelfTenantView, navigate]);
 
   if (loading || !tenantId) {
-    return <Loader/>;
+    return <SpinnerLoader/>;
   }
 
   return (
diff --git a/src/pages/Tenant/TenantDetails.jsx b/src/pages/Tenant/TenantDetails.jsx
index d799522e..fc7833de 100644
--- a/src/pages/Tenant/TenantDetails.jsx
+++ b/src/pages/Tenant/TenantDetails.jsx
@@ -7,7 +7,7 @@ import { ComingSoonPage } from "../Misc/ComingSoonPage";
 import GlobalModel from "../../components/common/GlobalModel";
 import EditProfile from "../../components/Tenant/EditProfile";
 import SubScriptionHistory from "../../components/Tenant/SubScriptionHistory";
-import Loader from "../../components/common/Loader";
+import { SpinnerLoader } from "../../components/common/Loader";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_TENANTS, SUPPER_TENANT } from "../../utils/constants";
 
@@ -71,10 +71,14 @@ const TenantDetails = ({
   if (!activeTenantId) return <div className="my-4">No tenant selected.</div>;
   if (isLoading)
     return (
-      <div className="my-4">
-        <Loader />
+      <div
+        className="page-min-h d-flex justify-content-center align-items-center"
+        style={{ minHeight: "80vh" }}
+      >
+        <SpinnerLoader />
       </div>
     );
+
   if (isError)
     return (
       <div className="container-fluid">
@@ -110,14 +114,14 @@ const TenantDetails = ({
               data={
                 iTSelf
                   ? [
-                      { label: "Home", link: "/dashboard" },
-                      { label: "Tenant Details", link: null },
-                    ]
+                    { label: "Home", link: "/dashboard" },
+                    { label: "Tenant Details", link: null },
+                  ]
                   : [
-                      { label: "Home", link: "/dashboard" },
-                      { label: "Tenant", link: "/tenants" },
-                      { label: "Tenant Details", link: null },
-                    ]
+                    { label: "Home", link: "/dashboard" },
+                    { label: "Tenant", link: "/tenants" },
+                    { label: "Tenant Details", link: null },
+                  ]
               }
             />
           )}
@@ -128,9 +132,8 @@ const TenantDetails = ({
                 <li key={tab.id} className="nav-item">
                   <button
                     type="button"
-                    className={`nav-link d-flex align-items-center text-tiny gap-2 ${
-                      index === 0 ? "active" : ""
-                    }`}
+                    className={`nav-link d-flex align-items-center text-tiny gap-2 ${index === 0 ? "active" : ""
+                      }`}
                     role="tab"
                     data-bs-toggle="tab"
                     data-bs-target={`#${tab.id}`}
@@ -150,9 +153,8 @@ const TenantDetails = ({
               {tabs.map((tab, index) => (
                 <div
                   key={tab.id}
-                  className={`tab-pane fade ${
-                    index === 0 ? "show active" : ""
-                  } text-start`}
+                  className={`tab-pane fade ${index === 0 ? "show active" : ""
+                    } text-start`}
                   id={tab.id}
                 >
                   {tab.content}
diff --git a/src/pages/authentication/SwitchTenant.jsx b/src/pages/authentication/SwitchTenant.jsx
index 028414cb..55197542 100644
--- a/src/pages/authentication/SwitchTenant.jsx
+++ b/src/pages/authentication/SwitchTenant.jsx
@@ -4,7 +4,7 @@ import { useAuthModal, useSelectTenant, useTenants } from "../../hooks/useAuth";
 import { useProfile } from "../../hooks/useProfile";
 import { useQueryClient } from "@tanstack/react-query";
 import AuthRepository from "../../repositories/AuthRepository";
-import Loader from "../../components/common/Loader";
+import  { SpinnerLoader } from "../../components/common/Loader";
 
 const SwitchTenant = () => {
   const queryClient = useQueryClient();
@@ -99,7 +99,7 @@ const SwitchTenant = () => {
       </div>
     </div>
   );
-  return <Modal isOpen={isOpen} onClose={onClose} body={isLoading ? <Loader/>:contentBody} />;
+  return <Modal isOpen={isOpen} onClose={onClose} body={isLoading ? <SpinnerLoader/>:contentBody} />;
 };
 
 export default SwitchTenant;
\ No newline at end of file
diff --git a/src/pages/authentication/TenantSelectionPage.jsx b/src/pages/authentication/TenantSelectionPage.jsx
index b8a5398d..812b3107 100644
--- a/src/pages/authentication/TenantSelectionPage.jsx
+++ b/src/pages/authentication/TenantSelectionPage.jsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTenants, useSelectTenant, useLogout } from "../../hooks/useAuth.jsx";
 import { Link, useNavigate } from "react-router-dom";
 import Dashboard from "../../components/Dashboard/Dashboard.jsx";
-import Loader from "../../components/common/Loader.jsx";
+import  { SpinnerLoader } from "../../components/common/Loader.jsx";
 
 const TenantSelectionPage = () => {
   const [pendingTenant, setPendingTenant] = useState(null);
@@ -45,7 +45,7 @@ const TenantSelectionPage = () => {
     isPending ||
     (data?.data?.length === 1 && pendingTenant !== null)
   ) {
-    return <Loader />;
+    return <SpinnerLoader />;
   }
 
   if (!data?.data?.length) {
diff --git a/src/pages/project/ProjectDetails.jsx b/src/pages/project/ProjectDetails.jsx
index d6fbd55d..b7871909 100644
--- a/src/pages/project/ProjectDetails.jsx
+++ b/src/pages/project/ProjectDetails.jsx
@@ -7,7 +7,7 @@ import AboutProject from "../../components/Project/AboutProject";
 import ProjectNav from "../../components/Project/ProjectNav";
 import Teams from "../../components/Project/Team/Teams";
 import ProjectInfra from "../../components/Project/ProjectInfra";
-import Loader from "../../components/common/Loader";
+import { SpinnerLoader } from "../../components/common/Loader";
 import WorkPlan from "../../components/Project/WorkPlan";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import { useSelectedProject } from "../../slices/apiDataManager";
@@ -20,7 +20,7 @@ import { setProjectId } from "../../slices/localVariablesSlice";
 import ProjectDocuments from "../../components/Project/ProjectDocuments";
 import ProjectSetting from "../../components/Project/ProjectSetting";
 import DirectoryPage from "../Directory/DirectoryPage";
-import { useProjectAccess } from "../../hooks/useProjectAccess"; 
+import { useProjectAccess } from "../../hooks/useProjectAccess";
 
 import "./ProjectDetails.css";
 import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
@@ -65,9 +65,17 @@ const ProjectDetails = () => {
   };
 
   if (projectLoading || permsLoading || !projects_Details) {
-    return <Loader />;
+    return (
+      <div
+        className="d-flex justify-content-center align-items-center"
+        style={{ height: "80vh" }}
+      >
+        <SpinnerLoader />
+      </div>
+    );
   }
 
+
   const renderContent = () => {
     switch (activePill) {
       case "profile":
diff --git a/src/pages/project/ProjectPage.jsx b/src/pages/project/ProjectPage.jsx
index a85d6f58..fe75e390 100644
--- a/src/pages/project/ProjectPage.jsx
+++ b/src/pages/project/ProjectPage.jsx
@@ -7,7 +7,7 @@ import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
 import ProjectCardView from "../../components/Project/ProjectCardView";
 import usePagination from "../../hooks/usePagination";
 import { useProjects } from "../../hooks/useProjects";
-import Loader from "../../components/common/Loader";
+import { SpinnerLoader } from "../../components/common/Loader";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 
 const ProjectContext = createContext();
@@ -96,7 +96,16 @@ const ProjectPage = () => {
   }, [data, isLoading, selectedStatuses]);
 
 
-  if (isLoading) return <div className="page-min-h"><Loader /></div>
+  if (isLoading)
+    return (
+      <div
+        className="page-min-h d-flex justify-content-center align-items-center"
+        style={{ minHeight: "80vh" }}
+      >
+        <SpinnerLoader />
+      </div>
+    );
+
   if (isError) return <div className="page-min-h d-flex justify-content-center align-items-center"><p>{error.message}</p></div>
   return (
     <ProjectContext.Provider value={contextDispatcher}>