diff --git a/.changeset/thick-donuts-hope.md b/.changeset/thick-donuts-hope.md new file mode 100644 index 000000000..cb6db20ef --- /dev/null +++ b/.changeset/thick-donuts-hope.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": minor +--- + +wraps header and footer in suspense boundaries diff --git a/core/app/[locale]/(default)/layout.tsx b/core/app/[locale]/(default)/layout.tsx index d921d8d1b..a53345e7f 100644 --- a/core/app/[locale]/(default)/layout.tsx +++ b/core/app/[locale]/(default)/layout.tsx @@ -1,52 +1,31 @@ import { unstable_setRequestLocale } from 'next-intl/server'; -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, Suspense } from 'react'; -import { getSessionCustomerId } from '~/auth'; -import { client } from '~/client'; -import { graphql } from '~/client/graphql'; -import { revalidate } from '~/client/revalidate-target'; import { Footer } from '~/components/footer/footer'; -import { FooterFragment } from '~/components/footer/fragment'; -import { Header } from '~/components/header'; +import { Header, HeaderSkeleton } from '~/components/header'; import { Cart } from '~/components/header/cart'; -import { HeaderFragment } from '~/components/header/fragment'; import { LocaleType } from '~/i18n/routing'; interface Props extends PropsWithChildren { params: { locale: LocaleType }; } -const LayoutQuery = graphql( - ` - query LayoutQuery { - site { - ...HeaderFragment - ...FooterFragment - } - } - `, - [HeaderFragment, FooterFragment], -); - -export default async function DefaultLayout({ children, params: { locale } }: Props) { +export default function DefaultLayout({ children, params: { locale } }: Props) { unstable_setRequestLocale(locale); - const customerId = await getSessionCustomerId(); - - const { data } = await client.fetch({ - document: LayoutQuery, - fetchOptions: customerId ? { cache: 'no-store' } : { next: { revalidate } }, - }); - return ( <> -
} data={data.site} /> + }> +
} /> +
{children}
-