### Streaming with React Suspense - Basic Example

Source: https://context7.com/kiki-le-singe/nextjs-perf-showcase/llms.txt

Implements server-side streaming using React Suspense to progressively load content. It includes an asynchronous component simulating API delay and a skeleton component for fallback UI. This pattern allows static content to display immediately while dynamic content streams in.

```tsx
// src/app/streaming/basic/page.tsx
import { Suspense } from "react";

// Async component that simulates API delay
async function UserProfile() {
  await new Promise((resolve) => setTimeout(resolve, 2000));

  return (
    <div className="bg-white rounded-lg shadow p-6">
      <div className="flex items-center space-x-4">
        <div className="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">
          JD
        </div>
        <div>
          <h3 className="text-xl font-semibold text-gray-900">John Doe</h3>
          <p className="text-gray-600">Software Engineer</p>
          <p className="text-sm text-gray-500">Last seen 2 hours ago</p>
        </div>
      </div>
    </div>
  );
}

// Skeleton component displays while async content loads
function UserProfileSkeleton() {
  return (
    <div className="bg-white rounded-lg shadow p-6 animate-pulse">
      <div className="flex items-center space-x-4">
        <div className="w-16 h-16 bg-gray-200 rounded-full"></div>
        <div className="flex-1">
          <div className="h-5 bg-gray-200 rounded w-32 mb-2"></div>
          <div className="h-4 bg-gray-200 rounded w-24 mb-1"></div>
          <div className="h-3 bg-gray-200 rounded w-28"></div>
        </div>
      </div>
    </div>
  );
}

export default function Page() {
  return (
    <div className="space-y-6">
      {/* Static content shows immediately */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-lg font-semibold mb-2">Navigation & Header</h2>
        <p className="text-gray-600">
          This content loads instantly while other parts stream in.
        </p>
      </div>

      {/* Streamed content with fallback skeleton */}
      <Suspense fallback={<UserProfileSkeleton />}>
        <UserProfile />
      </Suspense>
    </div>
  );
}

```

--------------------------------

### Dynamic Import WaveSurfer.js for Audio Player - TypeScript React

Source: https://context7.com/kiki-le-singe/nextjs-perf-showcase/llms.txt

This component dynamically imports the WaveSurfer.js library on user interaction (hover or play click) to create an audio player with visualization. It handles loading, playback, error states, and cleans up the WaveSurfer instance on component unmount. Dependencies include React hooks and the wavesurfer.js library.

```tsx
"use client";

import { useState, useRef, useEffect } from "react";
import type WaveSurfer from "wavesurfer.js";

type WaveSurferModule = typeof import("wavesurfer.js");

export default function AudioPlayer({ audioUrl }: { audioUrl: string }) {
  const waveformRef = useRef<HTMLDivElement>(null);
  const wavesurferRef = useRef<WaveSurfer | null>(null);
  const wavesurferLibRef = useRef<WaveSurferModule | null>(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Preload WaveSurfer on hover
  async function preloadWaveSurfer() {
    if (!wavesurferLibRef.current) {
      wavesurferLibRef.current = await import("wavesurfer.js");
    }
  }

  async function handlePlayPause() {
    // Toggle play/pause if already loaded
    if (wavesurferRef.current) {
      wavesurferRef.current.playPause();
      return;
    }

    // First time: load library and initialize
    setIsLoading(true);
    setError(null);

    try {
      await preloadWaveSurfer();
      const WaveSurfer = wavesurferLibRef.current!.default;

      wavesurferRef.current = WaveSurfer.create({
        container: waveformRef.current!,
        waveColor: "#4F4A85",
        progressColor: "#383351",
        url: audioUrl,
        height: 80,
        barWidth: 2,
        barRadius: 3,
      });

      wavesurferRef.current.on("ready", () => {
        setIsLoading(false);
        wavesurferRef.current!.play();
      });

      wavesurferRef.current.on("play", () => setIsPlaying(true));
      wavesurferRef.current.on("pause", () => setIsPlaying(false));
      wavesurferRef.current.on("finish", () => setIsPlaying(false));

      wavesurferRef.current.on("error", (err: Error) => {
        setError(err.message);
        setIsLoading(false);
      });
    } catch {
      setError("Failed to load audio player");
      setIsLoading(false);
    }
  }

  useEffect(() => {
    return () => {
      if (wavesurferRef.current) {
        wavesurferRef.current.destroy();
        wavesurferRef.current = null;
      }
    };
  }, []);

  return (
    <div>
      <div ref={waveformRef} style={{ height: "80px", borderRadius: "4px", marginBottom: "10px" }} />

      {error && <p style={{ color: "red" }}>Error: {error}</p>}

      <button
        onClick={handlePlayPause}
        onMouseEnter={preloadWaveSurfer}
        disabled={isLoading}
        className={`px-5 py-2.5 text-base rounded transition-all duration-150 ${isLoading ? "cursor-not-allowed opacity-60" : "cursor-pointer opacity-100"}`}
      >
        {isLoading ? "Loading..." : isPlaying ? "⏸️ Pause" : "▶️ Play"}
      </button>
    </div>
  );
}

```

--------------------------------

### Dynamic Leaflet Map Loading in Next.js

Source: https://context7.com/kiki-le-singe/nextjs-perf-showcase/llms.txt

This component dynamically imports the Leaflet.js library and its CSS. It preloads the library on hover and initializes the map when a button is clicked. Includes a fix for Leaflet's default icon issue in Next.js and cleans up the map instance on unmount. Handles loading states for a better user experience.

```tsx
"use client";

import { useState, useRef, useEffect } from "react";

type LeafletModule = typeof import("leaflet");
type LeafletMap = import("leaflet").Map;

export default function MapSection() {
  const [showMap, setShowMap] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const leafletRef = useRef<LeafletModule | null>(null);
  const mapContainerRef = useRef<HTMLDivElement | null>(null);
  const mapInstanceRef = useRef<LeafletMap | null>(null);

  // Preload Leaflet library and CSS on hover
  async function preloadLeaflet() {
    if (!leafletRef.current) {
      leafletRef.current = await import("leaflet");
      await import("leaflet/dist/leaflet.css");
    }
  }

  async function loadMap() {
    setShowMap(true);
    setIsLoading(true);

    try {
      await preloadLeaflet();

      if (mapContainerRef.current && !mapInstanceRef.current && leafletRef.current) {
        const L = leafletRef.current;

        // Fix Leaflet default icon issue in Next.js
        delete (L.Icon.Default.prototype as any)._getIconUrl;
        L.Icon.Default.mergeOptions({
          iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
          iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
          shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
        });

        // Initialize map centered on Paris
        const map = L.map(mapContainerRef.current).setView([48.86, 2.35], 13);

        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          attribution: "© OpenStreetMap contributors",
        }).addTo(map);

        L.marker([48.86, 2.35]).addTo(map).bindPopup("Our office");

        mapInstanceRef.current = map;
      }
    } catch (error) {
      console.error("Error loading map:", error);
    } finally {
      setIsLoading(false);
    }
  }

  useEffect(() => {
    return () => {
      if (mapInstanceRef.current) {
        mapInstanceRef.current.remove();
        mapInstanceRef.current = null;
      }
    };
  }, []);

  return (
    <div>
      <button
        onMouseEnter={preloadLeaflet}
        onClick={loadMap}
        className="px-5 py-2.5 text-base rounded transition-all duration-150 cursor-pointer"
      >
        Show map
      </button>

      {showMap && (
        <div
          ref={mapContainerRef}
          style={{
            height: 400,
            marginTop: 20,
            position: "relative",
            backgroundColor: isLoading ? "#f0f0f0" : "transparent",
          }}
        >
          {isLoading && (
            <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", zIndex: 1000 }}>
              <p>Loading map...</p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

```

--------------------------------

### Dynamically Load Modal Component with Next.js

Source: https://context7.com/kiki-le-singe/nextjs-perf-showcase/llms.txt

This code snippet shows how to dynamically import a Modal component using Next.js's `dynamic` function. The component is only loaded when the `isModalOpen` state becomes true, ensuring it's not part of the initial page load. This is useful for components that are not immediately required.

```tsx
"use client";

import dynamic from "next/dynamic";
import { useState } from "react";

// Modal component loaded only when opened
const Modal = dynamic(() => import("./modal-component"));

export default function DynamicModalDemo() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <>
      <div className="max-w-2xl mx-auto text-center">
        <div className="bg-white rounded-xl shadow-lg p-8">
          <h2 className="text-2xl font-semibold text-gray-900 mb-6">
            Simple Modal Example
          </h2>
          <p className="text-gray-600 mb-8">
            Click the button below to dynamically load and open a modal.
            The modal component is not included in the initial page bundle.
          </p>

          <button
            onClick={() => setIsModalOpen(true)}
            className="bg-purple-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-purple-700 transition-colors"
          >
            Open Modal
          </button>

          <div className="mt-8 bg-gray-50 rounded-lg p-6">
            <h3 className="font-semibold text-gray-900 mb-2">How It Works</h3>
            <ul className="text-gray-600 text-sm text-left space-y-2">
              <li>• Modal component is dynamically imported with <code className="bg-gray-200 px-1 rounded">dynamic()</code></li>
              <li>• Code is downloaded only when button is clicked</li>
              <li>• Subsequent opens are instant (code is cached)</li>
              <li>• Initial bundle stays lightweight</li>
            </ul>
          </div>
        </div>
      </div>

      {/* Modal component is conditionally rendered and dynamically loaded */}
      {isModalOpen && (
        <Modal onClose={() => setIsModalOpen(false)} />
      )}
    </>
  );
}

```

--------------------------------

### Dashboard Streaming with Suspense - Next.js

Source: https://context7.com/kiki-le-singe/nextjs-perf-showcase/llms.txt

This code snippet demonstrates dashboard streaming using Next.js's Suspense component. It allows for progressive rendering of multiple components, each with its own simulated loading time. A fallback UI (MetricCardSkeleton) is displayed while the actual component data is being fetched.

```tsx
// src/app/streaming/dashboard/page.tsx
import { Suspense } from "react";

// Each card has different loading times (500ms, 1000ms, 1500ms, 2000ms)
async function RevenueCard() {
  await new Promise((resolve) => setTimeout(resolve, 500));
  return (
    <div className="bg-white rounded-lg shadow p-6">
      <div className="flex items-center">
        <div className="p-2 bg-green-100 rounded-full">
          <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
          </svg>
        </div>
        <div className="ml-4">
          <p className="text-sm font-medium text-gray-600">Total Revenue</p>
          <p className="text-2xl font-bold text-gray-900">$45,231</p>
          <p className="text-sm text-green-600">+20.1% from last month</p>
        </div>
      </div>
    </div>
  );
}

function MetricCardSkeleton() {
  return (
    <div className="bg-white rounded-lg shadow p-6 animate-pulse">
      <div className="flex items-center">
        <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
        <div className="ml-4 flex-1">
          <div className="h-4 bg-gray-200 rounded w-24 mb-2"></div>
          <div className="h-8 bg-gray-200 rounded w-20 mb-1"></div>
          <div className="h-3 bg-gray-200 rounded w-32"></div>
        </div>
      </div>
    </div>
  );
}

export default function Page() {
  return (
    <div className="max-w-6xl mx-auto">
      {/* Header loads immediately */}
      <div className="bg-white rounded-lg shadow p-6 mb-6">
        <h2 className="text-xl font-semibold text-gray-900">Analytics Overview</h2>
        <p className="text-gray-600">Your business metrics for this month</p>
      </div>

      {/* Multiple cards stream in progressively */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Suspense fallback={<MetricCardSkeleton />}>
          <RevenueCard />
        </Suspense>

        <Suspense fallback={<MetricCardSkeleton />}>
          <UsersCard />
        </Suspense>

        <Suspense fallback={<MetricCardSkeleton />}>
          <OrdersCard />
        </Suspense>

        <Suspense fallback={<MetricCardSkeleton />}>
          <ConversionCard />
        </Suspense>
      </div>
    </div>
  );
}

```

--------------------------------

### Dynamic Import of Chart.js in React Component

Source: https://context7.com/kiki-le-singe/nextjs-perf-showcase/llms.txt

This React component uses dynamic imports to load the Chart.js library asynchronously. It registers necessary modules and creates a chart instance only after the library is loaded and the component is mounted. The chart is destroyed on unmount to prevent memory leaks. It handles loading states and preloads the library on hover for a better user experience.

```tsx
"use client";

import { useState, useRef, useEffect } from "react";

type ChartModule = typeof import("chart.js");
type ChartInstance = import("chart.js").Chart;

export default function ChartSection() {
  const [showChart, setShowChart] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const chartRef = useRef<HTMLCanvasElement | null>(null);
  const chartInstanceRef = useRef<ChartInstance | null>(null);
  const chartLibRef = useRef<ChartModule | null>(null);

  useEffect(() => {
    if (showChart && chartRef.current && !chartInstanceRef.current && chartLibRef.current) {
      createChart();
    }
  }, [showChart]);

  // Dynamic import of Chart.js (~200KB)
  async function loadChartLibrary() {
    if (chartLibRef.current) return chartLibRef.current;

    const chartModule = await import("chart.js");
    chartModule.Chart.register(...chartModule.registerables);
    chartLibRef.current = chartModule;
    return chartModule;
  }

  async function loadChart() {
    if (chartInstanceRef.current) return;

    setShowChart(true);
    setIsLoading(true);

    try {
      await loadChartLibrary();
    } catch (error) {
      console.error("Failed to load chart:", error);
    } finally {
      setIsLoading(false);
    }
  }

  function createChart() {
    if (!chartRef.current || !chartLibRef.current) return;

    chartInstanceRef.current = new chartLibRef.current.Chart(chartRef.current, {
      type: "bar",
      data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May"],
        datasets: [{
          label: "Sales (€)",
          data: [1200, 1900, 800, 1500, 2200],
          backgroundColor: "rgba(54, 162, 235, 0.2)",
          borderColor: "rgba(54, 162, 235, 1)",
          borderWidth: 2,
        }],
      },
      options: {
        responsive: true,
        scales: { y: { beginAtZero: true } },
      },
    });
  }

  // Preload on hover for instant feel
  async function preloadChart() {
    try {
      await loadChartLibrary();
    } catch (error) {
      console.error("Failed to preload chart:", error);
    }
  }

  useEffect(() => {
    return () => {
      if (chartInstanceRef.current) {
        chartInstanceRef.current.destroy();
      }
    };
  }, []);

  return (
    <div style={{ padding: "20px", maxWidth: "600px" }}>
      <h2>Sales Dashboard</h2>

      <button
        onClick={loadChart}
        onMouseEnter={preloadChart}
        disabled={isLoading}
        style={{
          padding: "10px 20px",
          fontSize: "16px",
          backgroundColor: "#007bff",
          color: "white",
          border: "none",
          borderRadius: "4px",
          cursor: isLoading ? "not-allowed" : "pointer",
          opacity: isLoading ? 0.6 : 1,
        }}
      >
        {isLoading ? "Loading Chart..." : "📊 Load Chart"}
      </button>

      {showChart && (
        <div style={{ marginTop: "20px", height: "400px" }}>
          <canvas ref={chartRef} />
        </div>
      )}
    </div>
  );
}

```

--------------------------------

### Dynamic Tab Component Loading in Next.js

Source: https://context7.com/kiki-le-singe/nextjs-perf-showcase/llms.txt

This component dynamically imports different tab contents using `next/dynamic`. Each tab is a separate chunk loaded only when activated, improving performance for dashboards. It uses React's `useState` to manage the active tab and renders the corresponding component.

```tsx
"use client";

import dynamic from "next/dynamic";
import { useState } from "react";

// Each tab component is dynamically imported
const TabOverview = dynamic(() => import("./tab-overview"));
const TabCharts = dynamic(() => import("./tab-charts"));
const TabReports = dynamic(() => import("./tab-reports"));
const TabUsers = dynamic(() => import("./tab-users"));

const tabs = {
  tabOverview: TabOverview,
  tabCharts: TabCharts,
  tabReports: TabReports,
  tabUsers: TabUsers,
};

export default function DynamicTabsDemo() {
  const [activeTab, setActiveTab] = useState("tabOverview");
  const ActiveTabContent = tabs[activeTab as keyof typeof tabs];

  return (
    <div className="max-w-4xl mx-auto">
      <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
        <div className="p-6">
          <h2 className="text-2xl font-semibold text-gray-900 mb-6">Dashboard Tabs</h2>

          {/* Tab Navigation */}
          <div className="mb-6">
            <button
              onClick={() => setActiveTab("tabOverview")}
              className={`mr-2 px-4 py-2 rounded-lg font-medium transition-colors ${activeTab === "tabOverview" ? "bg-green-600 text-white" : "bg-gray-100 text-gray-900 hover:bg-gray-200"}`}
            >
              Overview
            </button>
            <button
              onClick={() => setActiveTab("tabCharts")}
              className={`mr-2 px-4 py-2 rounded-lg font-medium transition-colors ${activeTab === "tabCharts" ? "bg-green-600 text-white" : "bg-gray-100 text-gray-900 hover:bg-gray-200"}`}
            >
              Charts
            </button>
            <button
              onClick={() => setActiveTab("tabReports")}
              className={`mr-2 px-4 py-2 rounded-lg font-medium transition-colors ${activeTab === "tabReports" ? "bg-green-600 text-white" : "bg-gray-100 text-gray-900 hover:bg-gray-200"}`}
            >
              Reports
            </button>
            <button
              onClick={() => setActiveTab("tabUsers")}
              className={`px-4 py-2 rounded-lg font-medium transition-colors ${activeTab === "tabUsers" ? "bg-green-600 text-white" : "bg-gray-100 text-gray-900 hover:bg-gray-200"}`}
            >
              Users
            </button>
          </div>

          {/* Tab Content - dynamically loaded */}
          <div className="min-h-[300px] border-t pt-6">
            <ActiveTabContent />
          </div>
        </div>
      </div>
    </div>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.