// src/HeavyWidget.jsx
export default function HeavyWidget() {
  return <p>I'm a lazy-loaded component.</p>;
}

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

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

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <HeavyWidget />
    </Suspense>
  );
}

export default App;

/*
  Notes:
  - HeavyWidget.jsx exports its component as a default export — lazy()
    specifically requires this.
  - Opening the browser's network tab and reloading shows HeavyWidget's
    code arriving as a separate JS chunk request, not bundled into the
    main app bundle.
  - The "Loading..." fallback would be visible briefly even on a fast
    connection, in the moment between the chunk request starting and
    finishing.
*/