// src/pages/HomePage.jsx
export default function HomePage() {
  return <h1>Home</h1>;
}

// src/pages/AboutPage.jsx
export default function AboutPage() {
  return <h1>About</h1>;
}

// src/App.jsx
import { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

const HomePage = lazy(() => import("./pages/HomePage"));
const AboutPage = lazy(() => import("./pages/AboutPage"));

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Suspense fallback={<p>Loading page...</p>}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

/*
  Notes:
  - Both page components are wrapped in lazy(); the nav itself is not,
    since it's small and needed on every single page anyway.
  - One Suspense boundary wraps the entire Routes block — visiting
    either route shows the same "Loading page..." fallback briefly
    while that specific page's chunk loads, and only that page's code
    is ever downloaded for a visit that never navigates elsewhere.
*/