commerce icon indicating copy to clipboard operation
commerce copied to clipboard

why every client component is wrapped by Suspense

Open nabildroid opened this issue 1 year ago • 0 comments

many places where the page or layout is server side rendered, and it uses a client component, the client component is wrapped by Suspense

in product/[handle]

<Suspense
              fallback={
                <div className="relative bg-red-900 aspect-square h-full max-h-[550px] w-full overflow-hidden" />
              }
            >
              <Gallery
                images={product.images.slice(0, 5).map((image: Image) => ({
                  src: image.url,
                  altText: image.altText
                }))}
              />
            </Suspense>
          </div>

          <div className="basis-full lg:basis-2/6">
            <Suspense fallback={null}>
              <ProductDescription product={product} />
            </Suspense>
          </div>
<div className="hidden justify-center md:flex md:w-1/3">
          <Suspense fallback={<SearchSkeleton />}>
            <Search />
          </Suspense>
        </div>

i asked v0 and told me is mistake ?

nabildroid avatar Oct 17 '24 11:10 nabildroid