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}
-
- {/*
+
-
{modalView === 'LOGIN_VIEW' && }
{modalView === 'SIGNUP_VIEW' && }
{modalView === 'FORGOT_VIEW' && }
- */}
-
+
= ({ children, pageProps }) => {
}
/>
-
- {/*
- {toastText}
- */}
)
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 2a1c28c2e..47b11a583 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -1,5 +1,5 @@
.root {
- @apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
+ @apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition-transform ease-linear cursor-pointer;
height: 100% !important;
&:hover {
@@ -67,24 +67,24 @@
.productTitle > span,
.productPrice,
.wishlistButton {
- @apply transition ease-in-out duration-500;
+ @apply transition-colors ease-in-out duration-500;
}
.squareBg {
- @apply transform absolute inset-0 z-0;
+ @apply transition-colors absolute inset-0 z-0;
background-color: #212529;
}
.squareBg:before {
@apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
content: '';
- background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+ background-image: url('/bg-products.svg');
}
.simple {
& .squareBg {
@apply bg-accents-0 !important;
- background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.05' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+ background-image: url('/bg-products.svg');
}
& .productTitle {
diff --git a/pages/index.tsx b/pages/index.tsx
index c410d6051..8fbdd5e9e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -97,7 +97,7 @@ export default function Home({
/>
))}
- {/*