Dynamic Import with Loading State

Demonstrate how to dynamically import modules with Next.js 14 while providing a loading UI when the module is being loaded with suspense components.
import { useState, Suspense } from 'react';

function MyComponent() {
  // State to handle the dynamic import
  const [Module, setModule] = useState(null);

  // Function to load the module dynamically
  const loadModule = async () => {
    if (!Module) {
      // Begin loading the module
      const loadedModule = await import('./DynamicModule');
      // Once the module is loaded, update the state
      setModule(() => loadedModule.default);

  return (
    // Use Suspense to provide a loading fallback
    <Suspense fallback={<div>Loading...</div>}>
      <button onClick={loadModule}>Load Module</button>
      // Render the dynamically loaded module
      {Module && <Module />}
This code snippet demonstrates how to use React's Suspense component in conjunction with useState hook to handle dynamic imports and show a loading state in the UI. Suspense allows you to specify a fallback component to display while waiting for the dynamic import, providing a smoother user experience.