تسلط بر سلسله‌مراتب بازگشتی (Fallback Hierarchy) در React Suspense: مدیریت پیشرفته وضعیت‌های بارگذاری تو در تو برای اپلیکیشن‌های جهانی

            import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [userData, setUserData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUserData(data);
      } catch (e) {
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };
    fetchUser();
  }, [userId]);

  if (isLoading) {
    return <p>Loading user profile...</p>;
  }

  if (error) {
    return <p style={{ color: 'red' }}>Error: {error.message}</p>;
  }

  if (!userData) {
    return <p>No user data found.</p>;
  }

  return (
    <div>
      <h2>{userData.name}</h2>
      <p>Email: {userData.email}</p>
      <p>Location: {userData.location}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

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

const ProductDetails = lazy(() => import('./ProductDetails'));
const ProductReviews = lazy(() => import('./ProductReviews'));

function ProductPage() {
  return (
    <div>
      <h1>Product Showcase</h1>
      <Suspense fallback={<p>Loading product details...</p>}>
        <ProductDetails productId="XYZ123" />
      </Suspense>
      <Suspense fallback={<p>Loading reviews...</p>}>
        <ProductReviews productId="XYZ123" />
      </Suspense>
    </div>
  );
}

            

              
                Copy
              
            
          

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

// Assume these are Suspense-enabled components (e.g., lazy-loaded or fetching data with Suspense-compatible lib)
const ProductHeader = lazy(() => import('./ProductHeader'));
const ProductDescription = lazy(() => import('./ProductDescription'));
const ProductSpecs = lazy(() => import('./ProductSpecs'));
const ProductReviews = lazy(() => import('./ProductReviews'));
const RelatedProducts = lazy(() => import('./RelatedProducts'));

function ProductPage({ productId }) {
  return (
    <div className="product-page">
      <h1>Product Detail</h1>

      {/* Outer Suspense for essential product info */}
      <Suspense fallback={<div className="product-summary-skeleton">Loading core product info...</div>}>
        <ProductHeader productId={productId} />
        <ProductDescription productId={productId} />

        {/* Inner Suspense for secondary, less critical info */}
        <Suspense fallback={<div className="product-specs-skeleton">Loading specifications...</div>}>
          <ProductSpecs productId={productId} />
        </Suspense>
      </Suspense>

      {/* Separate Suspense for reviews, which can load independently */}
      <Suspense fallback={<div className="reviews-skeleton">Loading customer reviews...</div>}>
        <ProductReviews productId={productId} />
      </Suspense>

      {/* Separate Suspense for related products, can load much later */}
      <Suspense fallback={<div className="related-products-skeleton">Finding related items...</div>}>
        <RelatedProducts productId={productId} />
      </Suspense>
    </div>
  );
}

            

              
                Copy
              
            
          

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

// Utility to create a Suspense-compatible resource for data fetching
// In a real app, you'd use a library like SWR, React Query, or Relay.
// For demonstration, this simple `createResource` simulates it.
function createResource(promise) {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );
  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } else if (status === 'success') {
        return result;
      }
    },
  };
}

// Simulate data fetching
const fetchProductData = (id) =>
  new Promise((resolve) => setTimeout(() => resolve({
    id,
    name: `Premium Widget ${id}`,
    price: Math.floor(Math.random() * 100) + 50,
    currency: 'USD', // Could be dynamic based on user location
    description: `This is a high-quality widget, perfect for global professionals. Features include enhanced durability and multi-region compatibility.`,
    imageUrl: `https://picsum.photos/seed/${id}/400/300`
  }), 1500 + Math.random() * 1000)); // Simulate variable network latency

const fetchReviewsData = (id) =>
  new Promise((resolve) => setTimeout(() => resolve([
    { id: 1, author: 'Anya Sharma (India)', rating: 5, comment: 'Excellent product, fast delivery!' },
    { id: 2, author: 'Jean-Luc Dubois (France)', rating: 4, comment: 'Bonne qualité, livraison un peu longue.' },
    { id: 3, author: 'Emily Tan (Singapore)', rating: 5, comment: 'Very reliable, integrates well with my setup.' },
  ]), 2500 + Math.random() * 1500)); // Longer latency for potentially larger data

const fetchRecommendationsData = (id) =>
  new Promise((resolve) => setTimeout(() => resolve([
    { id: 'REC456', name: 'Deluxe Widget Holder', price: 25 },
    { id: 'REC789', name: 'Widget Cleaning Kit', price: 15 },
  ]), 1000 + Math.random() * 500)); // Shorter latency, less critical

// Create Suspense-enabled resources
const productResources = {};
const reviewResources = {};
const recommendationResources = {};

function getProductResource(id) {
  if (!productResources[id]) {
    productResources[id] = createResource(fetchProductData(id));
  }
  return productResources[id];
}

function getReviewResource(id) {
  if (!reviewResources[id]) {
    reviewResources[id] = createResource(fetchReviewsData(id));
  }
  return reviewResources[id];
}

function getRecommendationResource(id) {
  if (!recommendationResources[id]) {
    recommendationResources[id] = createResource(fetchRecommendationsData(id));
  }
  return recommendationResources[id];
}

// Components that suspend
function ProductDetails({ productId }) {
  const product = getProductResource(productId).read();
  return (
    <div className="product-details">
      <img src={product.imageUrl} alt={product.name} style={{ maxWidth: '100%', height: 'auto' }} />
      <h2>{product.name}</h2>
      <p><strong>Price:</strong> {product.currency} {product.price.toFixed(2)}</p>
      <p><strong>Description:</strong> {product.description}</p>
    </div>
  );
}

function ProductReviews({ productId }) {
  const reviews = getReviewResource(productId).read();
  return (
    <div className="product-reviews">
      <h3>Customer Reviews</h3>
      {reviews.length === 0 ? (
        <p>No reviews yet. Be the first to review!</p>
      ) : (
        <ul>
          {reviews.map((review) => (
            <li key={review.id}>
              <p><strong>{review.author}</strong> - Rating: {review.rating}/5</p>
              <p>"${review.comment}"</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function RelatedProducts({ productId }) {
  const recommendations = getRecommendationResource(productId).read();
  return (
    <div className="related-products">
      <h3>You might also like...</h3>
      {recommendations.length === 0 ? (
        <p>No related products found.</p>
      ) : (
        <ul>
          {recommendations.map((item) => (
            <li key={item.id}>
              <a href={`/product/${item.id}`}>{item.name}</a> - {item.price} USD
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

// The main Product Page component with nested Suspense
function GlobalProductPage({ productId }) {
  return (
    <div className="global-product-container">
      <h1>Global Product Detail Page</h1>

      {/* Outer Suspense: High-level page layout/essential product data */}
      <Suspense fallback={
        <div className="page-skeleton">
          <div style={{ width: '80%', height: '30px', background: '#e0e0e0', marginBottom: '20px' }}></div>
          <div style={{ display: 'flex' }}>
            <div style={{ width: '40%', height: '200px', background: '#f0f0f0', marginRight: '20px' }}></div>
            <div style={{ flexGrow: 1 }}>
              <div style={{ width: '60%', height: '20px', background: '#e0e0e0', marginBottom: '10px' }}></div>
              <div style={{ width: '90%', height: '60px', background: '#f0f0f0' }}></div>
            </div>
          </div>
          <p style={{ textAlign: 'center', marginTop: '30px', color: '#666' }}>Preparing your product experience...</p>
        </div>
      }>
        <ProductDetails productId={productId} />

        {/* Inner Suspense: Customer reviews (can appear after product details) */}
        <Suspense fallback={
          <div className="reviews-loading-skeleton" style={{ marginTop: '40px', borderTop: '1px solid #eee', paddingTop: '20px' }}>
            <h3>Customer Reviews</h3>
            <div style={{ width: '70%', height: '15px', background: '#e0e0e0', marginBottom: '10px' }}></div>
            <div style={{ width: '80%', height: '15px', background: '#f0f0f0', marginBottom: '10px' }}></div>
            <div style={{ width: '60%', height: '15px', background: '#e0e0e0' }}></div>
            <p style={{ color: '#999' }}>Fetching global customer insights...</p>
          </div>
        }>
          <ProductReviews productId={productId} />
        </Suspense>

        {/* Another Inner Suspense: Related products (can appear after reviews) */}
        <Suspense fallback={
          <div className="related-loading-skeleton" style={{ marginTop: '40px', borderTop: '1px solid #eee', paddingTop: '20px' }}>
            <h3>You might also like...</h3>
            <div style={{ display: 'flex', gap: '10px' }}>
              <div style={{ width: '30%', height: '80px', background: '#f0f0f0' }}></div>
              <div style={{ width: '30%', height: '80px', background: '#e0e0e0' }}></div>
            </div>
            <p style={{ color: '#999' }}>Discovering complementary items...</p>
          </div>
        }>
          <RelatedProducts productId={productId} />
        </Suspense>
      </Suspense>
    </div>
  );
}

// Example usage
// <GlobalProductPage productId="123" />

            

              
                Copy
              
            
          

            import React, { Suspense, lazy, Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught an error in Suspense boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div style={{ border: '1px solid red', padding: '15px', borderRadius: '5px' }}>
          <h2>Oops! Something went wrong.</h2>
          <p>We're sorry, but we couldn't load this section. Please try again later.</p>
          {/* <details><summary>Error Details</summary><pre>{this.state.error.message}</pre> */}
        </div>
      );
    }
    return this.props.children;
  }
}

// ... (ProductDetails, ProductReviews, RelatedProducts from previous example)

function GlobalProductPageWithErrorHandling({ productId }) {
  return (
    <div className="global-product-container">
      <h1>Global Product Detail Page (with Error Handling)</h1>

      <ErrorBoundary> {/* Outer Error Boundary for the whole page */}
        <Suspense fallback={<p>Preparing your product experience...</p>}>
          <ProductDetails productId={productId} />

          <ErrorBoundary> {/* Inner Error Boundary for reviews */}
            <Suspense fallback={<p>Fetching global customer insights...</p>}>
              <ProductReviews productId={productId} />
            </Suspense>
          </ErrorBoundary>

          <ErrorBoundary> {/* Inner Error Boundary for related products */}
            <Suspense fallback={<p>Discovering complementary items...</p>}>
              <RelatedProducts productId={productId} />
            </Suspense>
          </ErrorBoundary>
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

            

              
                Copy
              
            
          

            <Suspense fallback={<LoadingMessage id="productDetails" />}>
  <ProductDetails productId={productId} />
</Suspense>

            

              
                Copy
              
            
          

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

// --- RESOURCE MANAGEMENT UTILITY (Simplified for demo) ---
// In a real app, you'd use a dedicated data fetching library compatible with Suspense.
// For demonstration, this simple `createResource` simulates it.
const resourceCache = new Map();

function createDataResource(key, fetcher) {
  if (resourceCache.has(key)) {
    return resourceCache.get(key);
  }

  let status = 'pending';
  let result;
  let suspender = fetcher().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  const resource = {
    read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      return result;
    },
    clear() {
        resourceCache.delete(key);
    }
  };
  resourceCache.set(key, resource);
  return resource;
}

// --- SUSPENSE-ENABLED IMAGE COMPONENT ---
// Demonstrates how a component can suspend for an image load.
function SuspenseImage({ src, alt, ...props }) {
  const [loaded, setLoaded] = useState(false);
  
  // This is a simple promise for the image loading,
  // in a real app, you'd want a more robust image preloader or a dedicated library.
  // For the sake of Suspense demo, we simulate a promise.
  const imagePromise = new Promise((resolve, reject) => {
    const img = new Image();
    img.src = src;
    img.onload = () => {
      setLoaded(true);
      resolve(img);
    };
    img.onerror = (e) => reject(e);
  });

  // Use a resource to make the image component Suspense-compatible
  const imageResource = createDataResource(`image-${src}`, () => imagePromise);
  imageResource.read(); // This will throw the promise if not loaded

  return <img src={src} alt={alt} {...props} />;
}

// --- DATA FETCHING FUNCTIONS (SIMULATED) ---
const fetchProductData = (id) =>
  new Promise((resolve) => setTimeout(() => resolve({
    id,
    name: `The Omni-Global Communicator ${id}`,
    price: 199.99,
    currency: 'USD',
    description: `Connect seamlessly across continents with crystal-clear audio and robust data encryption. Designed for the discerning global professional.`,
    imageUrl: `https://picsum.photos/seed/${id}/600/400` // Larger image
  }), 1800 + Math.random() * 1000));

const fetchReviewsData = (id) =>
  new Promise((resolve) => setTimeout(() => resolve([
    { id: 1, author: 'Dr. Anya Sharma (India)', rating: 5, comment: 'Indispensable for my remote team meetings!' },
    { id: 2, author: 'Prof. Jean-Luc Dubois (France)', rating: 4, comment: 'Excellente qualité sonore, mais le manuel pourrait être plus multilingue.' },
    { id: 3, author: 'Ms. Emily Tan (Singapore)', rating: 5, comment: 'Battery life is superb, perfect for international travel.' },
    { id: 4, author: 'Mr. Kenji Tanaka (Japan)', rating: 5, comment: 'Clear audio and easy to use. Highly recommended.' },
  ]), 3000 + Math.random() * 1500));

const fetchRecommendationsData = (id) =>
  new Promise((resolve) => setTimeout(() => resolve([
    { id: 'ACC001', name: 'Global Travel Adapter', price: 29.99, category: 'Accessories' },
    { id: 'ACC002', name: 'Secure Carry Case', price: 49.99, category: 'Accessories' },
  ]), 1200 + Math.random() * 700));

// --- SUSPENSE-ENABLED DATA COMPONENTS ---
// These components read from the resource cache, triggering Suspense.
function ProductMainDetails({ productId }) {
  const productResource = createDataResource(`product-${productId}`, () => fetchProductData(productId));
  const product = productResource.read(); // Suspend here if data is not ready

  return (
    <div className="product-main-details">
      <Suspense fallback={<div style={{width: '600px', height: '400px', background: '#eee'}}>Loading Image...</div>}>
        <SuspenseImage src={product.imageUrl} alt={product.name} style={{ maxWidth: '100%', height: 'auto', borderRadius: '8px' }} />
      </Suspense>
      <h2>{product.name}</h2>
      <p><strong>Price:</strong> {product.currency} {product.price.toFixed(2)}</p>
      <p><strong>Description:</strong> {product.description}</p>
    </div>
  );
}

function ProductCustomerReviews({ productId }) {
  const reviewsResource = createDataResource(`reviews-${productId}`, () => fetchReviewsData(productId));
  const reviews = reviewsResource.read(); // Suspend here

  return (
    <div className="product-customer-reviews">
      <h3>Global Customer Reviews</h3>
      {reviews.length === 0 ? (
        <p>No reviews yet. Be the first to share your experience!</p>
      ) : (
        <ul style={{ listStyleType: 'none', paddingLeft: 0 }}>
          {reviews.map((review) => (
            <li key={review.id} style={{ borderBottom: '1px dashed #eee', paddingBottom: '10px', marginBottom: '10px' }}>
              <p><strong>{review.author}</strong> - Rating: {review.rating}/5</p>
              <p><em>"${review.comment}"</em></p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function ProductRecommendations({ productId }) {
  const recommendationsResource = createDataResource(`recommendations-${productId}`, () => fetchRecommendationsData(productId));
  const recommendations = recommendationsResource.read(); // Suspend here

  return (
    <div className="product-recommendations">
      <h3>Complementary Global Accessories</h3>
      {recommendations.length === 0 ? (
        <p>No complementary items found.</p>
      ) : (
        <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
          {recommendations.map((item) => (
            <li key={item.id}>
              <a href={`/product/${item.id}`}>{item.name} ({item.category})</a> - {item.price.toFixed(2)} {item.currency || 'USD'}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

// --- MAIN PAGE COMPONENT WITH NESTED SUSPENSE HIERARCHY ---
function ProductPageWithFullHierarchy({ productId }) {
  return (
    <div className="app-container" style={{ maxWidth: '960px', margin: '40px auto', padding: '20px', background: '#fff', borderRadius: '10px', boxShadow: '0 4px 12px rgba(0,0,0,0.05)' }}>
      <h1 style={{ textAlign: 'center', color: '#333', marginBottom: '30px' }}>The Ultimate Global Product Showcase</h1>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '40px' }}>
        {/* Outermost Suspense for critical main product details, with a full-page skeleton */}
        <Suspense fallback={
          <div className="main-product-skeleton" style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
            <div style={{ width: '100%', height: '300px', background: '#f0f0f0', borderRadius: '4px', marginBottom: '20px' }}></div>
            <div style={{ width: '80%', height: '25px', background: '#e0e0e0', marginBottom: '15px' }}></div>
            <div style={{ width: '60%', height: '20px', background: '#f0f0f0', marginBottom: '10px' }}></div>
            <div style={{ width: '95%', height: '80px', background: '#e0e0e0' }}></div>
            <p style={{ textAlign: 'center', marginTop: '30px', color: '#777' }}>Fetching primary product information from global servers...</p>
          </div>
        }>
          <ProductMainDetails productId={productId} />

          {/* Nested Suspense for reviews, with a section-specific skeleton */}
          <Suspense fallback={
            <div className="reviews-section-skeleton" style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px', marginTop: '30px' }}>
              <h3>Global Customer Reviews</h3>
              <div style={{ width: '50%', height: '20px', background: '#f0f0f0', marginBottom: '15px' }}></div>
              <div style={{ width: '90%', height: '60px', background: '#e0e0e0', marginBottom: '10px' }}></div>
              <div style={{ width: '80%', height: '60px', background: '#f0f0f0' }}></div>
              <p style={{ textAlign: 'center', marginTop: '20px', color: '#777' }}>Gathering diverse customer perspectives...</p>
            </div>
          }>
            <ProductCustomerReviews productId={productId} />
          </Suspense>

          {/* Further nested Suspense for recommendations, also with a distinct skeleton */}
          <Suspense fallback={
            <div className="recommendations-section-skeleton" style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px', marginTop: '30px' }}>
              <h3>Complementary Global Accessories</h3>
              <div style={{ width: '60%', height: '20px', background: '#e0e0e0', marginBottom: '15px' }}></div>
              <div style={{ width: '70%', height: '20px', background: '#f0f0f0', marginBottom: '10px' }}></div>
              <div style={{ width: '85%', height: '20px', background: '#e0e0e0' }}></div>
              <p style={{ textAlign: 'center', marginTop: '20px', color: '#777' }}>Suggesting relevant items from our global catalog...</p>
            </div>
          }>
            <ProductRecommendations productId={productId} />
          </Suspense>
        </Suspense>
      </div>
    </div>
  );
}

// To render this:
// <ProductPageWithFullHierarchy productId="WIDGET007" />

            

              
                Copy