diff --git a/.changeset/smooth-rats-rule.md b/.changeset/smooth-rats-rule.md new file mode 100644 index 0000000000..17e5a2cdc2 --- /dev/null +++ b/.changeset/smooth-rats-rule.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": patch +--- + +Preconnect to checkout domain on cart page to improve checkout load time diff --git a/core/app/[locale]/(default)/cart/_components/checkout-preconnect.tsx b/core/app/[locale]/(default)/cart/_components/checkout-preconnect.tsx new file mode 100644 index 0000000000..0b39432674 --- /dev/null +++ b/core/app/[locale]/(default)/cart/_components/checkout-preconnect.tsx @@ -0,0 +1,9 @@ +'use client'; + +import { preconnect } from 'react-dom'; + +export function CheckoutPreconnect({ url }: { url: string }) { + preconnect(url); + + return null; +} diff --git a/core/app/[locale]/(default)/cart/page-data.ts b/core/app/[locale]/(default)/cart/page-data.ts index 7c6733d455..21e5f5c260 100644 --- a/core/app/[locale]/(default)/cart/page-data.ts +++ b/core/app/[locale]/(default)/cart/page-data.ts @@ -190,6 +190,11 @@ const CartPageQuery = graphql( ` query CartPageQuery($cartId: String) { site { + settings { + url { + checkoutUrl + } + } cart(entityId: $cartId) { entityId version diff --git a/core/app/[locale]/(default)/cart/page.tsx b/core/app/[locale]/(default)/cart/page.tsx index 0dd0d4044c..df61e28227 100644 --- a/core/app/[locale]/(default)/cart/page.tsx +++ b/core/app/[locale]/(default)/cart/page.tsx @@ -12,6 +12,7 @@ import { updateCouponCode } from './_actions/update-coupon-code'; import { updateLineItem } from './_actions/update-line-item'; import { updateShippingInfo } from './_actions/update-shipping-info'; import { CartViewed } from './_components/cart-viewed'; +import { CheckoutPreconnect } from './_components/checkout-preconnect'; import { getCart, getShippingCountries } from './page-data'; interface Props { @@ -152,9 +153,12 @@ export default async function Cart({ params }: Props) { const showShippingForm = shippingConsignment?.address && !shippingConsignment.selectedShippingOption; + const checkoutUrl = data.site.settings?.url.checkoutUrl; + return ( <> getAnalyticsData(cartId))}> + {checkoutUrl ? : null}