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} />
           ) : (
+            <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,6 +130,7 @@ export default function Routers() {
         <Route exact path="/app" element={<AppDownloadPage />} />
 
         {/* private route */}
+        <Route element={<SocketConnection />}>
           <Route element={<AuthRoute />}>
             <Route exact path="/" element={<HomePages />} />
             {/*  <Route exact path="/active-bids" element={<AcitveBidsPage />} />
@@ -218,6 +220,7 @@ export default function Routers() {
             <Route exact path="/referral" element={<ReferralPage />} />
             <Route exact path="/job-groups" element={<JobGroupsPage />} />
           </Route>
+        </Route>
         <Route path="*" element={<FourZeroFour />} />
       </Routes>
     </ScrollToTop>

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();