Lazy Component Loading with Suspense

'use client';

import { lazy, Suspense, useState } from 'react';

const AnalyticsChart = lazy(
  () => import('./analytics-chart'),
);

export function AnalyticsPanel() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <section>
      <button
        type="button"
        onClick={() => setIsOpen((current) => !current)}
      >
        {isOpen ? 'Hide analytics' : 'Show analytics'}
      </button>

      {isOpen && (
        <Suspense fallback={<p>Loading chart…</p>}>
          <AnalyticsChart />
        </Suspense>
      )}
    </section>
  );
}