diff --git a/.jules/bolt.md b/.jules/bolt.md index 8242db8..6872ec9 100644 --- a/.jules/bolt.md +++ b/.jules/bolt.md @@ -2,6 +2,9 @@ **Learning:** The project lacks `lint` script in `package.json`. Running `pnpm lint` might invoke system tools (like Android Lint?) instead of failing or doing nothing useful. Always check `package.json` scripts first. **Action:** Use specific commands like `pnpm exec tsc --noEmit` or `npx vitest` as discovered/documented, rather than assuming standard scripts exist. +## 2025-01-26 - Missing Node Modules +**Learning:** The environment might lack `node_modules` completely, preventing `npx vitest` or `pnpm exec tsc` from running even if dependencies are listed in `package.json`. Network restrictions may prevent `pnpm install`. +**Action:** When `node_modules` is missing and cannot be installed, rely on static analysis, careful code review, and verifying file contents manually. Do not assume tests can run. ## 2024-05-22 - High-Frequency State Isolation **Learning:** High-frequency state updates (like typing effects) in large parent components (`Hero`) trigger massive unnecessary re-renders of expensive sub-trees (`GradientBlinds`, `Button`). **Action:** Isolate high-frequency state into small, leaf-node components (e.g., `TypedText`) and wrap them in `React.memo` if necessary, keeping the heavy parent static. diff --git a/src/App.tsx b/src/App.tsx index 77f78cf..5c4e796 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,16 @@ +import { Suspense, lazy } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { LanguageProvider } from './i18n'; import { Navbar, Footer, FancyCursor, ScrollToTop } from './components/layout'; -import { Home, About, Contact } from './pages'; +import { Home } from './pages/Home'; +import { PageLoader } from './components/ui'; import './styles/global.css'; +// Lazy load pages to reduce initial bundle size. +// Home is imported directly to prevent layout shift on initial load. +const About = lazy(() => import('./pages/About').then(module => ({ default: module.About }))); +const Contact = lazy(() => import('./pages/Contact').then(module => ({ default: module.Contact }))); + export function App() { return ( @@ -11,11 +18,14 @@ export function App() { - - } /> - } /> - } /> - + {/* Suspense handles the loading state for lazy-loaded routes */} + }> + + } /> + } /> + } /> + +