// src/AnalyticsChart.jsx
export default function AnalyticsChart() {
  return <p>📊 Analytics chart goes here.</p>;
}

// src/App.jsx
import { lazy, Suspense, useState } from "react";

const AnalyticsChart = lazy(() => import("./AnalyticsChart"));

function Dashboard() {
  const [showChart, setShowChart] = useState(false);

  return (
    <div>
      <button onClick={() => setShowChart(true)}>Show analytics</button>
      {showChart && (
        <Suspense fallback={<p>Loading chart...</p>}>
          <AnalyticsChart />
        </Suspense>
      )}
    </div>
  );
}

function App() {
  return <Dashboard />;
}

export default App;

/*
  Notes:
  - Before the button is clicked, showChart is false, so React never
    even attempts to render <AnalyticsChart />, meaning lazy()'s
    dynamic import is never triggered and the chunk is never requested.
  - Checking the network tab confirms AnalyticsChart's code only
    appears as a request the moment "Show analytics" is clicked, not
    on the initial page load.
*/