crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-13 21:27:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use Suspense

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/product/[handle]/page.tsx
View File

@ -9,6 +9,7 @@ import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
import { getProduct, getProductRecommendations } from 'lib/shopify';
import { Image } from 'lib/shopify/types';
import Link from 'next/link';
import { Suspense } from 'react';
export async function generateMetadata({
params
@ -81,12 +82,14 @@ export default async function ProductPage({ params }: { params: { handle: string
<div className="mx-auto max-w-screen-2xl px-4">
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
<div className="h-full w-full basis-full lg:basis-4/6">
<Gallery
images={product.images.map((image: Image) => ({
src: image.url,
altText: image.altText
}))}
/>
<Suspense fallback={null}>
<Gallery
images={product.images.map((image: Image) => ({
src: image.url,
altText: image.altText
}))}
/>
</Suspense>
</div>
<div className="basis-full lg:basis-2/6">

8
components/layout/navbar/index.tsx
View File

@ -15,7 +15,9 @@ export default async function Navbar() {
return (
<nav className="relative flex items-center justify-between p-4 lg:px-6">
<div className="block flex-none md:hidden">
<MobileMenu menu={menu} />
<Suspense fallback={null}>
<MobileMenu menu={menu} />
</Suspense>
</div>
<div className="flex w-full items-center">
<div className="flex w-full md:w-1/3">
@ -41,7 +43,9 @@ export default async function Navbar() {
) : null}
</div>
<div className="hidden justify-center md:flex md:w-1/3">
<Search />
<Suspense fallback={null}>
<Search />
</Suspense>
</div>
<div className="flex justify-end md:w-1/3">
<Suspense fallback={<OpenCart />}>

6
components/layout/navbar/mobile-menu.tsx
View File

@ -3,7 +3,7 @@
import { Dialog, Transition } from '@headlessui/react';
import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation';
import { Fragment, useEffect, useState } from 'react';
import { Fragment, Suspense, useEffect, useState } from 'react';
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
import { Menu } from 'lib/shopify/types';
@ -72,7 +72,9 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
</button>
<div className="mb-4 w-full">
<Search />
<Suspense fallback={null}>
<Search />
</Suspense>
</div>
{menu.length ? (
<ul className="flex w-full flex-col">

9
components/layout/search/filter/index.tsx
View File

@ -1,4 +1,5 @@
import { SortFilterItem } from 'lib/constants';
import { Suspense } from 'react';
import FilterItemDropdown from './dropdown';
import { FilterItem } from './item';
@ -25,10 +26,14 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
</h3>
) : null}
<ul className="hidden md:block">
<FilterItemList list={list} />
<Suspense fallback={null}>
<FilterItemList list={list} />
</Suspense>
</ul>
<ul className="md:hidden">
<FilterItemDropdown list={list} />
<Suspense fallback={null}>
<FilterItemDropdown list={list} />
</Suspense>
</ul>
</nav>
</>

9
components/product/product-description.tsx
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>
</>
);
}