remove suspense

.vscode/settings.json

@@ -29,7 +29,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
     "source.fixAll": true,
-    "source.organizeImports": false
+    "source.organizeImports": true
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "peacock.color": "#2aa63d",

src/API.ts

@@ -13,8 +13,8 @@ export const useWhoAmI = () => {
     queryKey: ['WhoAmI'],
     queryFn: fetchWhoAmI,
     retry: false,
-    onError: () => {
-      console.log('error whoami')
+    onError: error => {
+      console.error('error whoami', error)
       toast.error('Accès refusé, veuillez vous connecter')
     },
     refetchOnMount: false,
@@ -22,6 +22,5 @@ export const useWhoAmI = () => {
 }
 
 export const fetchLogout = async () => {
-  console.log('fetch logout')
   return await axios.get('/Logout')
 }

src/App.tsx

@@ -5,7 +5,6 @@ import 'react-toastify/dist/ReactToastify.css'
 import Layout from './components/Layout/Layout'
 import Router from './components/Routes/Router'
 
-// provide the default query function to your app with defaultOptions
 const queryClient = new QueryClient()
 
 function App() {

src/components/Layout/layout.module.scss

@@ -3,6 +3,8 @@
 
 .root {
   display: flex;
+  background: $dark-bg;
+  height: 100vh;
 }
 
 .wrapper {
@@ -11,9 +13,7 @@
     0px 5px 5px rgb(0 0 0 / 20%),
     0px 3px 14px rgb(0 0 0 / 12%),
     0px 8px 10px rgb(0 0 0 / 14%);
-  background: $dark-bg;
   overflow-y: scroll;
-  height: 100vh;
 
   @media screen and (max-width: $width-tablet) {
     margin-left: 0;

src/components/Loader/loader.scss

 @import '../../styles/config/colors.scss';
 
 .loader-container {
-  width: 100%;
-  height: 80vh;
   display: flex;
+  height: 100%;
   overflow: hidden;
 }
 .loader {
@@ -23,7 +22,6 @@
   background: -o-linear-gradient(left, $gold 10%, rgba(255, 255, 255, 0) 42%);
   background: -ms-linear-gradient(left, $gold 10%, rgba(255, 255, 255, 0) 42%);
   background: linear-gradient(to right, $gold 10%, rgba(255, 255, 255, 0) 42%);
-  position: relative;
   -webkit-animation: load3 1.4s infinite linear;
   animation: load3 1.4s infinite linear;
   -webkit-transform: translateZ(0);

src/components/Routes/Router.tsx

-import { Suspense } from 'react'
 import { Navigate, Route, Routes } from 'react-router-dom'
 import { useWhoAmI } from '../../API'
 import Consents from '../Consents/Consents'
@@ -38,37 +37,27 @@ export const routes = Object.keys(links).map(key => ({
 }))
 
 const Router = () => {
-  const { data: user, error, isFetching } = useWhoAmI()
+  const { data: user, isLoading } = useWhoAmI()
 
-  if (isFetching) return <Loader />
-
-  if (error) return <div>Une erreur est survenue</div>
+  if (isLoading) return <Loader />
 
   if (user) {
     return (
-      <Suspense
-        fallback={
-          <div className="loaderContainer">
-            <Loader />
-          </div>
-        }
-      >
-        <Routes>
-          <>
-            <Route path={links.newsletter.path} element={<Newsletter />} />
-            <Route path={links.prices.path} element={<Prices />} />
-            <Route path="/popups" element={<Popups />} />
-            {user.isAdmin && (
-              <Route path={links.consents.path} element={<Consents />} />
-            )}
-            <Route path="/login" element={<Login />} />
-            <Route
-              path="*"
-              element={<Navigate replace to={links.newsletter.path} />}
-            />
-          </>
-        </Routes>
-      </Suspense>
+      <Routes>
+        <>
+          <Route path={links.newsletter.path} element={<Newsletter />} />
+          <Route path={links.prices.path} element={<Prices />} />
+          <Route path="/popups" element={<Popups />} />
+          {user.isAdmin && (
+            <Route path={links.consents.path} element={<Consents />} />
+          )}
+          <Route path="/login" element={<Login />} />
+          <Route
+            path="*"
+            element={<Navigate replace to={links.newsletter.path} />}
+          />
+        </>
+      </Routes>
     )
   }