diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx index 23dbf4a23..e346feb73 100644 --- a/components/common/Layout/Layout.tsx +++ b/components/common/Layout/Layout.tsx @@ -1,17 +1,46 @@ -import { FC, useCallback, useEffect, useState } from 'react' import cn from 'classnames' -import { useRouter } from 'next/router' -import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages' -import { CommerceProvider } from '@bigcommerce/storefront-data-hooks' -import { useAcceptCookies } from '@lib/hooks/useAcceptCookies' -import { CartSidebarView } from '@components/cart' -import { Container, Sidebar, Button, Modal, Toast } from '@components/ui' -import { Navbar, FeatureBar, Footer } from '@components/common' -import { LoginView, SignUpView, ForgotPassword } from '@components/auth' -import { useUI } from '@components/ui/context' -import { usePreventScroll } from '@react-aria/overlays' +import dynamic from 'next/dynamic' import s from './Layout.module.css' +import { useRouter } from 'next/router' import debounce from 'lodash.debounce' +import React, { FC, useCallback, useEffect, useState, Suspense } from 'react' +import { useUI } from '@components/ui/context' +import { Navbar, Footer } from '@components/common' +import { usePreventScroll } from '@react-aria/overlays' +import { useAcceptCookies } from '@lib/hooks/useAcceptCookies' +import { CommerceProvider } from '@bigcommerce/storefront-data-hooks' +import { Container, Sidebar, Button, Modal, LoadingDots } from '@components/ui' +import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages' + +const Loading = () => ( +
+ +
+) + +const dynamicProps = { + loading: () => , +} +const CartSidebarView = dynamic( + () => import('@components/cart/CartSidebarView') +) +const LoginView = dynamic( + () => import('@components/auth/LoginView'), + dynamicProps +) +const SignUpView = dynamic( + () => import('@components/auth/SignUpView'), + dynamicProps +) +const ForgotPassword = dynamic( + () => import('@components/auth/ForgotPassword'), + dynamicProps +) +const FeatureBar = dynamic( + () => import('@components/common/FeatureBar'), + dynamicProps +) + interface Props { pageProps: { pages?: Page[] @@ -25,9 +54,6 @@ const Layout: FC = ({ children, pageProps }) => { closeSidebar, closeModal, modalView, - toastText, - closeToast, - displayToast, } = useUI() const { acceptedCookies, onAcceptCookies } = useAcceptCookies() const [hasScrolled, setHasScrolled] = useState(false) @@ -72,17 +98,14 @@ const Layout: FC = ({ children, pageProps }) => {
{children}