// Lazy-loading a heavy component with Suspense
import React, { Suspense, lazy } from "react";

// Only load this component when needed
const HeavyEditor = lazy(() => import("./components/HeavyEditor"));
const AnalyticsDashboard = lazy(() => import("./components/AnalyticsDashboard"));

export default function App() {
  return (
    <div className="app">
      <nav>
        {/* Navigation remains in initial bundle */}
        <Link to="/">Home</Link>
        <Link to="/editor">Editor</Link>
        <Link to="/analytics">Analytics</Link>
      </nav>

      <Suspense fallback={<div>Loading...</div>}>
        {/* Routes load their components only when visited */}
        <Outlet />
      </Suspense>
    </div>
  );
}

// Example with route-based splitting in React Router v6
// App.js
import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom";
import Home from "./pages/Home"; // Assume these are small
import Header from "./components/Header";

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        {/* Lazy load editor route */}
        <Route
          path="/editor"
          element={
            <Suspense fallback={<div>Loading editor...</div>}>
              <LazyEditor />
            </Suspense>
          }
        />
        {/* Lazy load analytics route */}
        <Route
          path="/analytics"
          element={
            <Suspense fallback={<div>Loading analytics...</div>}>
              <LazyAnalytics />
            </Suspense>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

const LazyEditor = lazy(() => import("./pages/Editor"));
const LazyAnalytics = lazy(() => import("./pages/Analytics"));

// pages/Home.js - remains in initial bundle
export default function Home() {
  return <h2>Home page</h2>;
}

// pages/Editor.js - split into separate chunk
export default function Editor() {
  return <div>Heavy editor component...</div>;
}

// pages/Analytics.js - split into separate chunk
export default function Analytics() {
  return <div>Analytics dashboard with charts...</div>;
}