optimise loading and api calls

src/App.jsx

@@ -1,39 +1,52 @@
-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';
-import Javapick from './pages/CreateServer/Javapick/java';
-import Modpack from './pages/CreateServer/modpack/modpack';
-import Bedrock from './pages/CreateServer/bedrock/bedrock';
+
+const LoginPage = lazy(() => import('./pages/LoginPage/LoginPage'));
+const ServerDetails = lazy(() => import('./pages/ServerDetails/ServerDetails'));
+const CreatePage = lazy(() => import('./pages/CreateServer/CreateServer'));
+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}>
+        <Suspense fallback={<Loading />}>
           <Routes>
             <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />
             <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
@@ -43,8 +56,9 @@ const App = () => {
             <Route path="/createServer/modpack" element={user ? <Modpack user={user} /> : <Navigate to="/login" />} />
             <Route path="/server/:serverName/*" element={user ? <ServerDetails user={user} /> : <Navigate to="/login" />} />
             <Route path="/" element={<Navigate to={user ? "/dashboard" : "/login"} />} />
-          <Route path="*" element={<NotFoundPage />} />
+            <Route path="*" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
           </Routes>
+        </Suspense>
         <ToastContainer
           position="top-right"
           autoClose={3500}

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 />
-  </React.StrictMode>
 );

src/pages/DashboardPage/DashboardPage.jsx

@@ -8,26 +8,27 @@ 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 [subdomain, setSubdomain] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [servers, setServers] = useState(() => {
+    const cachedServers = JSON.parse(localStorage.getItem(CACHE_KEY_SERVERS));
+    return cachedServers || [];
+  });
+
+  const [subdomain, setSubdomain] = useState(' ');
+  const [loading, setLoading] = useState(servers.length === 0); 
   const [searchTerm, setSearchTerm] = 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 || '');
-      }
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    } finally {
-      setLoading(false);
+        setSubdomain(userSubdomain || null);
       }
 
       const ApiResponse = await serviiApi.fetchServers();
@@ -35,19 +36,25 @@ const DashboardPage = ({ user }) => {
       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();
-  }, [loadServers]);
+    updateServersFromApi(); 
+  }, [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} />
@@ -128,8 +135,7 @@ const DashboardPage = ({ user }) => {
     );
   }
 
-
-  if (servers.length === 0) {
+  if (servers.length === 0 && !loading) {
     return (
       <div className={styles.dashboardContainer}>
         <Navbar user={user} />

src/pages/ServerProperties/ServerProperties.jsx

@@ -15,15 +15,25 @@ const ServerProprieties = () => {
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    const fetchServer = async () => {
-      try {
-        const ApiResponse = await serviiApi.fetchServers();
-        const data = ApiResponse.message;
-        const foundServer = data.find(server => server.name === serverName);
+    const cachedServers = JSON.parse(localStorage.getItem('cachedServers')) || [];
+    const foundServer = cachedServers.find(server => server.name === serverName);
 
     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');
           }
@@ -36,6 +46,7 @@ const ServerProprieties = () => {
       };
 
       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' },