crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-31 14:01:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make image, variant, and cart updates faster with useOptimistic (#1365)

Browse Source
This commit is contained in:
Lee Robinson
2024-07-28 22:58:59 -05:00
committed by GitHub
parent dd7449f975
commit 9a4c995bb6
24 changed files with 642 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/layout.tsx
View File

@@ -1,7 +1,12 @@
import Navbar from 'components/layout/navbar';
import { CartProvider } from 'components/cart/cart-context';
import { Navbar } from 'components/layout/navbar';
import { WelcomeToast } from 'components/welcome-toast';
import { GeistSans } from 'geist/font/sans';
import { getCart } from 'lib/shopify';
import { ensureStartsWith } from 'lib/utils';
import { cookies } from 'next/headers';
import { ReactNode } from 'react';
import { Toaster } from 'sonner';
import './globals.css';
const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
@@ -32,11 +37,21 @@ export const metadata = {
};
export default async function RootLayout({ children }: { children: ReactNode }) {
const cartId = cookies().get('cartId')?.value;
// Don't await the fetch, pass the Promise to the context provider
const cart = getCart(cartId);
return (
<html lang="en" className={GeistSans.variable}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<Navbar />
<main>{children}</main>
<CartProvider cartPromise={cart}>
<Navbar />
<main>
{children}
<Toaster closeButton />
<WelcomeToast />
</main>
</CartProvider>
</body>
</html>
);

2
app/page.tsx
View File

@@ -9,7 +9,7 @@ export const metadata = {
}
};
export default async function HomePage() {
export default function HomePage() {
return (
<>
<ThreeItemGrid />

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

@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
import { GridTileImage } from 'components/grid/tile';
import Footer from 'components/layout/footer';
import { Gallery } from 'components/product/gallery';
import { ProductProvider } from 'components/product/product-context';
import { ProductDescription } from 'components/product/product-description';
import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
import { getProduct, getProductRecommendations } from 'lib/shopify';
@@ -72,7 +73,7 @@ export default async function ProductPage({ params }: { params: { handle: string
};
return (
<>
<ProductProvider>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
@@ -88,7 +89,7 @@ export default async function ProductPage({ params }: { params: { handle: string
}
>
<Gallery
images={product.images.map((image: Image) => ({
images={product.images.slice(0, 5).map((image: Image) => ({
src: image.url,
altText: image.altText
}))}
@@ -97,13 +98,15 @@ export default async function ProductPage({ params }: { params: { handle: string
</div>
<div className="basis-full lg:basis-2/6">
<ProductDescription product={product} />
<Suspense fallback={null}>
<ProductDescription product={product} />
</Suspense>
</div>
</div>
<RelatedProducts id={product.id} />
</div>
<Footer />
</>
</ProductProvider>
);
}

2
app/search/loading.tsx
View File

@@ -7,7 +7,7 @@ export default function Loading() {
.fill(0)
.map((_, index) => {
return (
<Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-900" />
<Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-800" />
);
})}
</Grid>