optimise loading and api calls

src/App.jsx

@@ -1,62 +1,76 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import LoginPage from './pages/LoginPage/LoginPage';
-import DashboardPage from './pages/DashboardPage/DashboardPage';
-import ServerDetails from './pages/ServerDetails/ServerDetails';
 import { auth } from './service/firebase';
 import styles from './App.module.scss';
 import Loading from './pages/Loading/loading';
-import NotFoundPage from './pages/NotFoundPage/NotFoundPage';
+
-import CreatePage from './pages/CreateServer/CreateServer';
+const LoginPage = lazy(() => import('./pages/LoginPage/LoginPage'));
-import Javapick from './pages/CreateServer/Javapick/java';
+const ServerDetails = lazy(() => import('./pages/ServerDetails/ServerDetails'));
-import Modpack from './pages/CreateServer/modpack/modpack';
+const CreatePage = lazy(() => import('./pages/CreateServer/CreateServer'));
-import Bedrock from './pages/CreateServer/bedrock/bedrock';
+const Javapick = lazy(() => import('./pages/CreateServer/Javapick/java'));
+const Modpack = lazy(() => import('./pages/CreateServer/modpack/modpack'));
+const Bedrock = lazy(() => import('./pages/CreateServer/bedrock/bedrock'));
+const DashboardPage = lazy(() => import('./pages/DashboardPage/DashboardPage'));
 
 const App = () => {
-  const [user, setUser] = useState(null);
+  const [user, setUser] = useState(() => JSON.parse(localStorage.getItem('user')) || null);
   const [loading, setLoading] = useState(true);
+  const [showLoading, setShowLoading] = useState(false);
 
   useEffect(() => {
+    const timeoutId = setTimeout(() => setShowLoading(true), 6000); 
+
     const unsubscribe = auth.onAuthStateChanged((user) => {
+      if (user) {
+        localStorage.setItem('user', JSON.stringify(user));
+      } else {
+        localStorage.removeItem('user');
+      }
       setUser(user);
       setLoading(false);
+      clearTimeout(timeoutId); 
     });
 
-    return () => unsubscribe();
+    return () => {
+      unsubscribe();
+      clearTimeout(timeoutId); 
+    };
   }, []);
 
-  if (loading) {
+  if (loading && showLoading) {
     return <Loading />;
   }
 
   return (
     <Router>
       <div className={styles.container}>
-        <Routes>
+        <Suspense fallback={<Loading />}>
-          <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />
+          <Routes>
-          <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
+            <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />
-          <Route path="/createServer" element={user ? <CreatePage user={user} /> : <Navigate to="/login" />} />
+            <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
-          <Route path="/createServer/java" element={user ? <Javapick user={user} /> : <Navigate to="/login" />} />
+            <Route path="/createServer" element={user ? <CreatePage user={user} /> : <Navigate to="/login" />} />
-          <Route path="/createServer/bedrock" element={user ? <Bedrock user={user} /> : <Navigate to="/login" />} />
+            <Route path="/createServer/java" element={user ? <Javapick user={user} /> : <Navigate to="/login" />} />
-          <Route path="/createServer/modpack" element={user ? <Modpack user={user} /> : <Navigate to="/login" />} />
+            <Route path="/createServer/bedrock" element={user ? <Bedrock user={user} /> : <Navigate to="/login" />} />
-          <Route path="/server/:serverName/*" element={user ? <ServerDetails user={user} /> : <Navigate to="/login" />} />
+            <Route path="/createServer/modpack" element={user ? <Modpack user={user} /> : <Navigate to="/login" />} />
-          <Route path="/" element={<Navigate to={user ? "/dashboard" : "/login"} />} />
+            <Route path="/server/:serverName/*" element={user ? <ServerDetails user={user} /> : <Navigate to="/login" />} />
-          <Route path="*" element={<NotFoundPage />} />
+            <Route path="/" element={<Navigate to={user ? "/dashboard" : "/login"} />} />
-        </Routes>
+            <Route path="*" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
+          </Routes>
+        </Suspense>
         <ToastContainer
-            position="top-right"
+          position="top-right"
-            autoClose={3500}
+          autoClose={3500}
-            hideProgressBar={false}
+          hideProgressBar={false}
-            newestOnTop={false}
+          newestOnTop={false}
-            closeOnClick
+          closeOnClick
-            rtl={false}
+          rtl={false}
-            pauseOnFocusLoss
+          pauseOnFocusLoss
-            draggable
+          draggable
-            pauseOnHover
+          pauseOnHover
-            theme="light"
+          theme="light"
-            />
+        />
       </div>
     </Router>
   );

src/main.jsx

@@ -1,10 +1,7 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
 import './main.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
+  <App />
-    <App />
-  </React.StrictMode>
 );

src/pages/DashboardPage/DashboardPage.jsx

@@ -8,46 +8,53 @@ import serviiApi from "../../service/api.tsx";
 import PropTypes from "prop-types";
 import styles from './DashboardPage.module.scss';
 
+const CACHE_KEY_SERVERS = 'cachedServers';
+const CACHE_KEY_TIMESTAMP = 'cacheTimestamp';
+
 const DashboardPage = ({ user }) => {
   const navigate = useNavigate();
 
-  const [servers, setServers] = useState([]);
+  const [servers, setServers] = useState(() => {
-  const [subdomain, setSubdomain] = useState(null);
+    const cachedServers = JSON.parse(localStorage.getItem(CACHE_KEY_SERVERS));
-  const [loading, setLoading] = useState(true);
+    return cachedServers || [];
+  });
+
+  const [subdomain, setSubdomain] = useState(' ');
+  const [loading, setLoading] = useState(servers.length === 0); 
   const [searchTerm, setSearchTerm] = useState('');
-  const [newSubdomain, setNewSubdomain] = useState('');
+  const [newSubdomain, setNewSubdomain] = useState(' ');
 
-  const loadServers = useCallback(async () => {
+  const updateServersFromApi = useCallback(async () => {
     try {
-
       if (user?.uid) {
         const userSubdomain = await getUserSubdomain(user.uid);
-        setSubdomain(userSubdomain || '');
+        setSubdomain(userSubdomain || null);
       }
-    } catch (error) {
+
-      console.error('Error fetching data:', error);
-    } finally {
-      setLoading(false);
-    }
-    
       const ApiResponse = await serviiApi.fetchServers();
       const data = ApiResponse.message;
       const sortedServers = data.sort((a, b) => b.running - a.running);
       setServers(sortedServers);
 
-     
+      localStorage.setItem(CACHE_KEY_SERVERS, JSON.stringify(sortedServers));
+      localStorage.setItem(CACHE_KEY_TIMESTAMP, Date.now());
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    } finally {
+      setLoading(false); 
+    }
   }, [user]);
 
   useEffect(() => {
-    loadServers();
+    updateServersFromApi(); 
-  }, [loadServers]);
+  }, [updateServersFromApi]);
 
   const handleCreateServer = () => navigate('/CreateServer');
 
   const handleRunServer = async (serverName) => {
     try {
       await serviiApi.serverRun(serverName);
-      await loadServers();
+      updateServersFromApi(); 
     } catch (error) {
       console.error('Error starting server:', error);
     }
@@ -56,7 +63,7 @@ const DashboardPage = ({ user }) => {
   const handleStopServer = async (serverName) => {
     try {
       await serviiApi.serverStop(serverName);
-      await loadServers();
+      updateServersFromApi(); 
     } catch (error) {
       console.error('Error stopping server:', error);
     }
@@ -65,7 +72,7 @@ const DashboardPage = ({ user }) => {
   const handleDeleteServer = async (serverName) => {
     try {
       await serviiApi.serverDelete(serverName);
-      await loadServers();
+      updateServersFromApi(); 
     } catch (error) {
       console.error('Error deleting server:', error);
     }
@@ -81,7 +88,7 @@ const DashboardPage = ({ user }) => {
       const response = await serviiApi.setSubdomain(newSubdomain);
       if (response.success) {
         setSubdomain(newSubdomain); 
-        loadServers(); 
+        updateServersFromApi(); 
       } else {
         console.error('Erreur lors de la création du sous-domaine');
       }
@@ -93,7 +100,7 @@ const DashboardPage = ({ user }) => {
   const favoriteServer = servers[0] || null;
   const serversWithoutFavorite = servers.filter(server => server !== favoriteServer);
 
-  if (loading) {
+  if (loading && servers.length === 0) {
     return (
       <div className={styles.dashboardContainer}>
         <Navbar user={user} />
@@ -127,9 +134,8 @@ const DashboardPage = ({ user }) => {
         </div>
     );
   }
-  
 
-  if (servers.length === 0) {
+  if (servers.length === 0 && !loading) {
     return (
       <div className={styles.dashboardContainer}>
         <Navbar user={user} />

src/pages/ServerProperties/ServerProperties.jsx

@@ -15,27 +15,38 @@ const ServerProprieties = () => {
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    const fetchServer = async () => {
+    const cachedServers = JSON.parse(localStorage.getItem('cachedServers')) || [];
-      try {
+    const foundServer = cachedServers.find(server => server.name === serverName);
-        const ApiResponse = await serviiApi.fetchServers();
-        const data = ApiResponse.message;
-        const foundServer = data.find(server => server.name === serverName);
-        
-        if (foundServer) {
-          setServer(foundServer);
-          setInitialServer(foundServer); 
-        } else {
-          setError('Server not found');
-        }
-      } catch (error) {
-        console.error('Error fetching server:', error);
-        setError('Error fetching server');
-      } finally {
-        setLoading(false);
-      }
-    };
 
-    fetchServer();
+    if (foundServer) {
+      setServer(foundServer);
+      setInitialServer(foundServer);
+      setLoading(false);
+    } else {
+      const fetchServer = async () => {
+        try {
+          const ApiResponse = await serviiApi.fetchServers();
+          const data = ApiResponse.message;
+          const serverFromApi = data.find(server => server.name === serverName);
+          
+          if (serverFromApi) {
+            setServer(serverFromApi);
+            setInitialServer(serverFromApi);
+            cachedServers.push(serverFromApi);
+            localStorage.setItem('cachedServers', JSON.stringify(cachedServers));
+          } else {
+            setError('Server not found');
+          }
+        } catch (error) {
+          console.error('Error fetching server:', error);
+          setError('Error fetching server');
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      fetchServer();
+    }
   }, [serverName]);
 
   const handleChange = (e) => {
@@ -46,7 +57,6 @@ const ServerProprieties = () => {
   const handleSave = async () => {
     try {
       const props = [];
-
       const serverProperties = [
         { key: 'maxPlayers', type: 'number', name: 'max-players' },
         { key: 'motd', type: 'string', name: 'motd' },