Lazy Loading

// Simulate heavy components
function Dashboard() {
  return (
    <div className="component dashboard">
      <h3>📊 Dashboard</h3>
      <p>This is a heavy dashboard component</p>
      <div className="charts">
        <div className="chart">Chart 1</div>
        <div className="chart">Chart 2</div>
        <div className="chart">Chart 3</div>
      </div>
    </div>
  );
}

function Settings() {
  return (
    <div className="component settings">
      <h3>⚙️ Settings</h3>
      <p>Settings panel loaded on demand</p>
      <div className="settings-list">
        <div className="setting-item">Profile Settings</div>
        <div className="setting-item">Privacy Settings</div>
        <div className="setting-item">Notification Settings</div>
      </div>
    </div>
  );
}

function Profile() {
  return (
    <div className="component profile">
      <h3>👤 Profile</h3>
      <p>User profile loaded lazily</p>
      <div className="profile-info">
        <div className="info-item">Name: John Doe</div>
        <div className="info-item">Email: john@example.com</div>
        <div className="info-item">Role: Developer</div>
      </div>
    </div>
  );
}

function App() {
  const [activeTab, setActiveTab] = React.useState('home');
  const [loadedTabs, setLoadedTabs] = React.useState(['home']);

  const handleTabClick = (tab) => {
    setActiveTab(tab);
    if (!loadedTabs.includes(tab)) {
      setLoadedTabs([...loadedTabs, tab]);
    }
  };

  return (
    <div className="demo-app">
      <div className="header">
        <h2>📦 Lazy Loading Demo</h2>
        <p>Components load only when you click their tab</p>
      </div>

      <div className="tabs">
        <button
          className={activeTab === 'home' ? 'active' : ''}
          onClick={() => handleTabClick('home')}
        >
          🏠 Home
        </button>
        <button
          className={activeTab === 'dashboard' ? 'active' : ''}
          onClick={() => handleTabClick('dashboard')}
        >
          📊 Dashboard {!loadedTabs.includes('dashboard') && '(not loaded)'}
        </button>
        <button
          className={activeTab === 'settings' ? 'active' : ''}
          onClick={() => handleTabClick('settings')}
        >
          ⚙️ Settings {!loadedTabs.includes('settings') && '(not loaded)'}
        </button>
        <button
          className={activeTab === 'profile' ? 'active' : ''}
          onClick={() => handleTabClick('profile')}
        >
          👤 Profile {!loadedTabs.includes('profile') && '(not loaded)'}
        </button>
      </div>

      <div className="content">
        {activeTab === 'home' && (
          <div className="component home">
            <h3>🏠 Home</h3>
            <p>Welcome! This component is always loaded.</p>
            <p className="tip">Click other tabs to load components on demand!</p>
          </div>
        )}

        {activeTab === 'dashboard' && (
          <React.Suspense fallback={<div className="loading">Loading Dashboard...</div>}>
            <Dashboard />
          </React.Suspense>
        )}

        {activeTab === 'settings' && (
          <React.Suspense fallback={<div className="loading">Loading Settings...</div>}>
            <Settings />
          </React.Suspense>
        )}

        {activeTab === 'profile' && (
          <React.Suspense fallback={<div className="loading">Loading Profile...</div>}>
            <Profile />
          </React.Suspense>
        )}
      </div>

      <div className="info-panel">
        <h4>Loaded Components:</h4>
        <div className="loaded-list">
          {loadedTabs.map(tab => (
            <span key={tab} className="loaded-tag">{tab}</span>
          ))}
        </div>
        <p className="hint">💡 In real apps, use React.lazy(() => import('./Component'))</p>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);