perf: implement lazy loading for route components

- Added React.lazy() for all page components to enable code splitting
- Wrapped Routes with Suspense component and loading fallback state
- Converted static imports to dynamic imports to reduce initial bundle size
- Added semicolons for consistent code style

src/App.tsx

@@ -1,17 +1,20 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { Layout } from './components/Layout'
+import { Layout } from './components/Layout';
-import HomePage from './pages/home/HomePage'
+import { lazy, Suspense } from 'react';
-import CloudPage from './pages/cloud/CloudPage'
+
-import NetworkPage from './pages/network/NetworkPage'
+const HomePage = lazy(() => import('./pages/home/HomePage'));
-import AgentsPage from './pages/agents/AgentsPage'
+const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
-import DownloadPage from './pages/download/DownloadPage'
+const NetworkPage = lazy(() => import('./pages/network/NetworkPage'));
-import ComputePage from './pages/compute/ComputePage'
+const AgentsPage = lazy(() => import('./pages/agents/AgentsPage'));
-import StoragePage from './pages/storage/StoragePage'
+const DownloadPage = lazy(() => import('./pages/download/DownloadPage'));
-import GpuPage from './pages/gpu/GpuPage'
+const ComputePage = lazy(() => import('./pages/compute/ComputePage'));
+const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
+const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
 
 function App() {
   return (
     <BrowserRouter>
+      <Suspense fallback={<div>Loading...</div>}>
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route index element={<HomePage />} />
@@ -24,6 +27,7 @@ function App() {
             <Route path="gpu" element={<GpuPage />} />
           </Route>
         </Routes>
+      </Suspense>
     </BrowserRouter>
   )
 }