codesplit.js

import { lazy, Suspense } from 'react';

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

function ProductListing({ products }) {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <ProductDetails product={product} />
          </li>
        ))}
      </ul>
    </Suspense>
  );
}