Use Suspense

This commit is contained in:
Lee Robinson
2023-11-08 15:04:50 -06:00
parent 6955c1cec6
commit d88cabf683
5 changed files with 33 additions and 14 deletions

View File

@@ -2,6 +2,7 @@ import { AddToCart } from 'components/cart/add-to-cart';
import Price from 'components/price';
import Prose from 'components/prose';
import { Product } from 'lib/shopify/types';
import { Suspense } from 'react';
import { VariantSelector } from './variant-selector';
export function ProductDescription({ product }: { product: Product }) {
@@ -16,7 +17,9 @@ export function ProductDescription({ product }: { product: Product }) {
/>
</div>
</div>
<VariantSelector options={product.options} variants={product.variants} />
<Suspense fallback={null}>
<VariantSelector options={product.options} variants={product.variants} />
</Suspense>
{product.descriptionHtml ? (
<Prose
@@ -25,7 +28,9 @@ export function ProductDescription({ product }: { product: Product }) {
/>
) : null}
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
<Suspense fallback={null}>
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
</Suspense>
</>
);
}