fix(dashboard): layout

dashboard/src/routes/index.tsx

@@ -1,34 +1,41 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { Outlet, Route, Routes } from 'react-router-dom';
 
 import { useAuthContext } from '../contexts/AuthContext';
 import { DashboardLayout } from '../layouts/DashboardLayout';
-import { Auth } from '../pages/Auth';
-import { Home } from '../pages/Home';
-import { Users } from '../pages/Users';
+
+const Auth = lazy(() => import('../pages/Auth'));
+const Environment = lazy(() => import('../pages/Environment'));
+const Home = lazy(() => import('../pages/Home'));
+const Users = lazy(() => import('../pages/Users'));
 
 export const AppRoutes = () => {
 	const { isLoggedIn } = useAuthContext();
 
 	if (isLoggedIn) {
 		return (
-			<Routes>
-				<Route
-					element={
-						<DashboardLayout>
-							<Outlet />
-						</DashboardLayout>
-					}
-				>
-					<Route path="/" element={<Home />} />
-					<Route path="users" element={<Users />} />
-				</Route>
-			</Routes>
+			<Suspense fallback={<></>}>
+				<Routes>
+					<Route
+						element={
+							<DashboardLayout>
+								<Outlet />
+							</DashboardLayout>
+						}
+					>
+						<Route path="/" element={<Home />} />
+						<Route path="users" element={<Users />} />
+						<Route path="environment" element={<Environment />} />
+					</Route>
+				</Routes>
+			</Suspense>
 		);
 	}
 	return (
-		<Routes>
-			<Route path="/" element={<Auth />} />
-		</Routes>
+		<Suspense fallback={<></>}>
+			<Routes>
+				<Route path="/" element={<Auth />} />
+			</Routes>
+		</Suspense>
 	);
 };