suspense loading added and made socket to trigger after login

src/App.jsx

@@ -1,28 +1,33 @@
+import {Suspense, lazy} from 'react'
 import { Navigate, useLocation } from "react-router-dom";
-import Routers from "./Routers";
+// import Routers from "./Routers";
+// import SocketIOContextProvider from "./components/Contexts/SocketIOContext";
 import Toaster from "./components/Helpers/Toaster";
 import Default from "./components/Partials/Default";
-import SocketIOContextProvider from "./components/Contexts/SocketIOContext";
 
 import { disableReactDevTools } from '@fvilers/disable-react-devtools';
+import LoadingSpinner from './components/Spinners/LoadingSpinner';
 
 if (process.env.REACT_APP_NODE_ENV === 'production') {
     disableReactDevTools();
 }
+const Routers = lazy(()=>import('./Routers'))
 function App() {
   const { pathname } = useLocation();
   return (
     <Default>
-      <SocketIOContextProvider>
+      {/* <SocketIOContextProvider> */}
         <>
           {pathname.startsWith("/@") ? (
             <Navigate to="/app" replace={true} />
           ) : (
-            <Routers />
+            <Suspense fallback={<LoadingSpinner size="32" color="sky-blue" height="h-screen" />}>
+              <Routers />
+            </Suspense>
           )}
           <Toaster />
         </>
-      </SocketIOContextProvider>
+      {/* </SocketIOContextProvider> */}
     </Default>
   );
 }

src/Routers.jsx

@@ -4,6 +4,7 @@ import { lazy } from "react";
 import LoginLandingPage from './views/LoginLandingPage'
 import LoginPage from "./views/LoginPage";
 import HomePages from "./views/HomePages";
+import SocketConnection from "./middleware/SocketConnection";
 
 
 const FourZeroFour = lazy(() => import("./components/FourZeroFour"));
@@ -129,94 +130,96 @@ export default function Routers() {
         <Route exact path="/app" element={<AppDownloadPage />} />
 
         {/* private route */}
-        <Route element={<AuthRoute />}>
+        <Route element={<SocketConnection />}>
-          <Route exact path="/" element={<HomePages />} />
+          <Route element={<AuthRoute />}>
-          {/*  <Route exact path="/active-bids" element={<AcitveBidsPage />} />
+            <Route exact path="/" element={<HomePages />} />
-          <Route exact path="/notification" element={<Notification />} />
+            {/*  <Route exact path="/active-bids" element={<AcitveBidsPage />} />
-          <Route exact path="/market-place" element={<MarketPlacePage />} />
+            <Route exact path="/notification" element={<Notification />} />
-          <Route exact path="/shop-details" element={<ShopDetailsPage />} />
+            <Route exact path="/market-place" element={<MarketPlacePage />} />
-        <Route exact path="/my-collection" element={<MyCollection />} />*/}
+            <Route exact path="/shop-details" element={<ShopDetailsPage />} />
-          <Route exact path="/reminders" element={<RemindersPage />} />
+          <Route exact path="/my-collection" element={<MyCollection />} />*/}
-          <Route exact path="/tracking" element={<TrackingPage />} />
+            <Route exact path="/reminders" element={<RemindersPage />} />
-          <Route exact path="/calendar" element={<CalendarPage />} />
+            <Route exact path="/tracking" element={<TrackingPage />} />
-          <Route exact path="/resources" element={<ResourcePage />} />
+            <Route exact path="/calendar" element={<CalendarPage />} />
-          <Route exact path="/my-wallet/*" element={<MyWalletPage />} />
+            <Route exact path="/resources" element={<ResourcePage />} />
-          <Route exact path="/family-wallet" element={<FamilyWalletPage />} />
+            <Route exact path="/my-wallet/*" element={<MyWalletPage />} />
-          <Route exact path="/my-coupon" element={<MyCouponPage />} />
+            <Route exact path="/family-wallet" element={<FamilyWalletPage />} />
-          <Route exact path="/notification" element={<Notification />} />
+            <Route exact path="/my-coupon" element={<MyCouponPage />} />
-          <Route exact path="/market-place" element={<MarketPlacePage />} />
+            <Route exact path="/notification" element={<Notification />} />
-          <Route exact path="/market" element={<MarketPlacePage />} />
+            <Route exact path="/market-place" element={<MarketPlacePage />} />
-          <Route exact path="/familymarket" element={<FamilyMarketPage />} />
+            <Route exact path="/market" element={<MarketPlacePage />} />
-          <Route exact path="/suggested" element={<ParentWaitingPage />} />
+            <Route exact path="/familymarket" element={<FamilyMarketPage />} />
-          <Route exact path="/parentwaiting" element={<ParentWaitingPage />} />
+            <Route exact path="/suggested" element={<ParentWaitingPage />} />
-          <Route exact path="/pending" element={<FamilyPendingOfferPage />} />
+            <Route exact path="/parentwaiting" element={<ParentWaitingPage />} />
-          <Route exact path="/fam-blog" element={<FamBlogPage />} />
+            <Route exact path="/pending" element={<FamilyPendingOfferPage />} />
-          <Route exact path="/ai-question" element={<FamAIQuestionPage />} />
+            <Route exact path="/fam-blog" element={<FamBlogPage />} />
-          <Route exact path="/myfiles" element={<FamMyFilesPage />} />
+            <Route exact path="/ai-question" element={<FamAIQuestionPage />} />
-          <Route exact path="/ai-lab" element={<FamAIQuestionPage />} />
+            <Route exact path="/myfiles" element={<FamMyFilesPage />} />
-          <Route exact path="/fam-games" element={<FamGamesPage />} />
+            <Route exact path="/ai-lab" element={<FamAIQuestionPage />} />
-          <Route exact path="/work-in-progress" element={<FamWorkInProgressPage />} />
+            <Route exact path="/fam-games" element={<FamGamesPage />} />
+            <Route exact path="/work-in-progress" element={<FamWorkInProgressPage />} />
 
-          <Route exact path="/pastdue" element={<MyPastDueTasksPage />} />
+            <Route exact path="/pastdue" element={<MyPastDueTasksPage />} />
-          <Route exact path="/notification" element={<Notification />} />
+            <Route exact path="/notification" element={<Notification />} />
-          <Route exact path="/mytask" element={<MyTaskPage />} />
+            <Route exact path="/mytask" element={<MyTaskPage />} />
-          <Route exact path="/myjobs" element={<MyJobsPage />} />
+            <Route exact path="/myjobs" element={<MyJobsPage />} />
-          {/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
+            {/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
-          <Route exact path="/my-active-jobs" element={<MyActiveJobsPage />} />
+            <Route exact path="/my-active-jobs" element={<MyActiveJobsPage />} />
-          <Route
+            <Route
-            exact
+              exact
-            path="/my-pastdue-jobs"
+              path="/my-pastdue-jobs"
-            element={<MyPastDueJobsPage />}
+              element={<MyPastDueJobsPage />}
-          />
+            />
-          <Route exact path="/my-offers" element={<MyOffersPage />} />
+            <Route exact path="/my-offers" element={<MyOffersPage />} />
-          <Route exact path="/pend-interest" element={<MyWaitingJobsPage />} />
+            <Route exact path="/pend-interest" element={<MyWaitingJobsPage />} />
-          <Route
+            <Route
-            exact
+              exact
-            path="/my-review-jobs"
+              path="/my-review-jobs"
-            element={<MyReviewDueJobsPage />}
+              element={<MyReviewDueJobsPage />}
-          />
+            />
 
-          {/* <Route exact path='/acc-family' element={<FamilyAccPage />} />
+            {/* <Route exact path='/acc-family' element={<FamilyAccPage />} />
-          <Route exact path="/acc-family/activities" element={<FamilyActivitiesPage />} />
+            <Route exact path="/acc-family/activities" element={<FamilyActivitiesPage />} />
-          <Route exact path="/acc-family/familysettings" element={<FamilySettingsPage />} /> */}
+            <Route exact path="/acc-family/familysettings" element={<FamilySettingsPage />} /> */}
-          <Route path='/acc-family/*' element={<FamilyRoutesPage />} />
+            <Route path='/acc-family/*' element={<FamilyRoutesPage />} />
 
-          <Route exact path="/manage-family" element={<FamilyManagePage />} />
+            <Route exact path="/manage-family" element={<FamilyManagePage />} />
-          <Route exact path="/start-job" element={<StartJob />} />
+            <Route exact path="/start-job" element={<StartJob />} />
-          <Route exact path="/yourpage" element={<YourPages />} />
+            <Route exact path="/yourpage" element={<YourPages />} />
-          <Route
+            <Route
-            exact
+              exact
-            path="/manage-active-job"
+              path="/manage-active-job"
-            element={<ManageActiveJobs />}
+              element={<ManageActiveJobs />}
-          />
+            />
-          <Route exact path="/blog-page" element={<BlogPage />} />
+            <Route exact path="/blog-page" element={<BlogPage />} />
-          <Route
+            <Route
-            exact
+              exact
-            path="/offer-interest"
+              path="/offer-interest"
-            element={<OffersInterestPage />}
+              element={<OffersInterestPage />}
-          />
+            />
-          <Route
+            <Route
-            exact
+              exact
-            path="/manage-offer"
+              path="/manage-offer"
-            element={<ManageInterestOfferPage />}
+              element={<ManageInterestOfferPage />}
-          />
+            />
 
-          <Route
+            <Route
-            exact
+              exact
-            path="/my-collection/collection-item"
+              path="/my-collection/collection-item"
-            element={<CollectionItemPage />}
+              element={<CollectionItemPage />}
-          />
+            />
-          <Route exact path="/sell" element={<SellPage />} />
+            <Route exact path="/sell" element={<SellPage />} />
-          <Route exact path="/saved" element={<SavedPage />} />
+            <Route exact path="/saved" element={<SavedPage />} />
-          <Route exact path="/history" element={<HistoryPage />} />
+            <Route exact path="/history" element={<HistoryPage />} />
-          <Route exact path="/learnmore" element={<LearnMorePage />} />
+            <Route exact path="/learnmore" element={<LearnMorePage />} />
-          {/*<Route exact path="/upload-product" element={<UploadProductPage />} />*/}
+            {/*<Route exact path="/upload-product" element={<UploadProductPage />} />*/}
-          <Route exact path="/my-uploads" element={<UploadProductPage />} />
+            <Route exact path="/my-uploads" element={<UploadProductPage />} />
-          <Route exact path="/profile" element={<AuthProfilePage />} />
+            <Route exact path="/profile" element={<AuthProfilePage />} />
-          <Route exact path="/user-profile" element={<UserProfilePage />} />
+            <Route exact path="/user-profile" element={<UserProfilePage />} />
-          <Route exact path="/settings" element={<SettingsPage />} />
+            <Route exact path="/settings" element={<SettingsPage />} />
-          <Route exact path="/referral" element={<ReferralPage />} />
+            <Route exact path="/referral" element={<ReferralPage />} />
-          <Route exact path="/job-groups" element={<JobGroupsPage />} />
+            <Route exact path="/job-groups" element={<JobGroupsPage />} />
+          </Route>
         </Route>
         <Route path="*" element={<FourZeroFour />} />
       </Routes>

src/components/AuthPages/AuthRedirect/FbookRedirect.jsx

@@ -8,7 +8,7 @@ import AuthLayout from "../AuthLayout";
 function FbookRedirect() {
     const location = useLocation();
     const navigate = useNavigate();
-    const userApi = useMemo(()=>{new usersService()},[]);
+    const userApi = useMemo(()=> new usersService(),[]);
     const dispatch = useDispatch()
 
     const queryParams = new URLSearchParams(location?.search);

src/components/AuthPages/AuthRedirect/Redirect.jsx

@@ -8,7 +8,7 @@ import AuthLayout from "../AuthLayout";
 function Redirect() {
   const location = useLocation();
   const navigate = useNavigate();
-  const userApi = useMemo(()=>{new usersService()},[]);
+  const userApi = useMemo(()=> new usersService(),[]);
   const dispatch = useDispatch();
 
   const queryParams = new URLSearchParams(location?.search);

src/components/MarketPlace/index.jsx

@@ -15,7 +15,7 @@ export default function MarketPlace({ commonHeadData }) {
   const marketData = jobLists?.result_list;
   const categories = jobLists?.categories;
   const image_server = jobLists?.session_image_server;
-  console.log('Lenth', marketData?.length )
+  // console.log('Lenth', marketData?.length )
 
   useEffect(()=>{
     if(!jobLists.loading && (marketData?.length < 1 || !marketData)){

src/middleware/SocketConnection.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import SocketIOContextProvider from '../components/Contexts/SocketIOContext'
+import { Navigate, Outlet, useNavigate } from "react-router-dom";
+
+export default function SocketConnection() {
+  return (
+    <SocketIOContextProvider>
+      <Outlet />
+    </SocketIOContextProvider>
+  )
+}

src/views/MyWalletPage.jsx

@@ -9,7 +9,7 @@ export default function MyWalletPage() {
 
   useEffect(()=>{
     let walletExist = wallet_available_status || localStorage.getItem('wallet_available_status')
-    console.log(walletExist)
+    // console.log(walletExist)
     if(account_type == 'FULL' && walletExist != 'WALLET_AVAILABLE'){
       navigate('/', {replace: true})
     }

src/views/OffersInterestPage.jsx

@@ -15,7 +15,7 @@ export default function OffersInterestPage() {
 
     let {joinRoom} = SocketValues() // function to join room for socket
 
-    const apiCall = useMemo(()=>{new usersService()},[]) 
+    const apiCall = useMemo(()=> new usersService(),[]) 
 
     let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
 

src/views/ResourcePage.jsx

@@ -5,7 +5,7 @@ import { useLocation } from "react-router-dom";
 export default function ResourcePage() {
   const {state} = useLocation() // CHECKS IF THERE IS AN ACTIVE TAB WITH LINK BACK TO RESOURCES
   const [MyResourceData, setMyResourceData] = useState([]);
-  const api = useMemo(()=>{new usersService()},[]);
+  const api = useMemo(()=> new usersService(),[]);
   const getMyResourceData = useCallback( async () => {
       try {
         const res = await api.getResourceList();