Suspense و Code Splitting — مقدمة React

Suspense و Code Splitting

Lazy Loading للمكونات

import { lazy, Suspense } from 'react';

// تحميل كسول
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));
const Profile = lazy(() => import('./Profile'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </Suspense>
  );
}

Loading States

// Skeleton Loading
function LoadingSkeleton() {
  return (
    <div className="skeleton">
      <div className="skeleton-header"></div>
      <div className="skeleton-body"></div>
    </div>
  );
}

// استخدام متعدد Suspense
function App() {
  return (
    <div>
      <Header />
      
      <Suspense fallback={<SidebarSkeleton />}>
        <Sidebar />
      </Suspense>
      
      <Suspense fallback={<ContentSkeleton />}>
        <MainContent />
      </Suspense>
    </div>
  );
}

تحميل مشروط

function ConditionalLoad() {
  const [showChart, setShowChart] = useState(false);
  
  // Chart يُحمّل فقط عند الحاجة
  const Chart = showChart 
    ? lazy(() => import('./HeavyChart')) 
    : null;
  
  return (
    <div>
      <button onClick={() => setShowChart(true)}>
        عرض الرسم البياني
      </button>
      
      {showChart && (
        <Suspense fallback={<p>جارٍ تحميل الرسم...</p>}>
          <Chart />
        </Suspense>
      )}
    </div>
  );
}

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

// تحميل كسول للمكونات الثقيلة
const HeavyEditor = lazy(() => import('./HeavyEditor'));
const DataVisualization = lazy(() => import('./DataVisualization'));

function App() {
  const [activeTab, setActiveTab] = useState('home');
  
  return (
    <div>
      <nav>
        <button onClick={() => setActiveTab('home')}>الرئيسية</button>
        <button onClick={() => setActiveTab('editor')}>المحرر</button>
        <button onClick={() => setActiveTab('charts')}>الرسوم</button>
      </nav>
      
      <main>
        {activeTab === 'home' && <Home />}
        
        {activeTab === 'editor' && (
          <Suspense fallback={<EditorSkeleton />}>
            <HeavyEditor />
          </Suspense>
        )}
        
        {activeTab === 'charts' && (
          <Suspense fallback={<ChartSkeleton />}>
            <DataVisualization />
          </Suspense>
        )}
      </main>
    </div>
  );
}

// Skeleton components
function EditorSkeleton() {
  return <div className="skeleton editor-skeleton">جارٍ تحميل المحرر...</div>;
}

function ChartSkeleton() {
  return <div className="skeleton chart-skeleton">جارٍ تحميل الرسوم...</div>;
}