Implement react suspense data fetching ecommerce

Hard

You're building a modern e-commerce platform that needs to fetch product data while handling loading and error states elegantly. The product team wants to implement React Suspense for a better user experience. How would you properly implement data fetching with Suspense while ensuring the code follows React 18's best practices and handles cache invalidation?

ReactReact suspenseAsync programmingError handlingPromise managementData fetching+2

1import { useState, useTransition, Suspense } from 'react';
2import { fetchProductData } from './api';
3
4function ProductCatalog({ categoryId }) {
const [isPending, startTransition] = useTransition();
const [products, setProducts] = useState([]);

const loadProducts = async () => {
  startTransition(async () => {
    const resource = fetchProductData(categoryId);
    // Missing implementation
  });
};
14
return (
  <div className="product-catalog">
    <button onClick={loadProducts} disabled={isPending}>
      Load Products
    </button>
    <Suspense fallback={<SpinnerComponent />}>
      {/* Component implementation needed */}
    </Suspense>
  </div>
);
25}
26
27// Resource implementation
28const wrapPromise = (promise) => {
let status = 'pending';
let result;
let suspender = promise.then(
  (r) => {
    status = 'success';
    result = r;
  },
  (e) => {
    status = 'error';
    result = e;
  }
);
41
return {
  // Implementation needed
};
45};

Hint