Merge branch 'master' into fix/search-layout-on-mobile

.editorconfig

@@ -0,0 +1,23 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+tab_width = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.js]
+quote_type = single
+
+[{*.c,*.cc,*.h,*.hh,*.cpp,*.hpp,*.m,*.mm,*.mpp,*.js,*.java,*.go,*.rs,*.php,*.ng,*.jsx,*.ts,*.d,*.cs,*.swift}]
+curly_bracket_next_line = false
+spaces_around_operators = true
+spaces_around_brackets = outside
+# close enough to 1TB
+indent_brace_style = K&R

components/cart/CartItem/CartItem.tsx

@@ -97,6 +97,7 @@ const CartItem = ({
           <button type="button" onClick={() => increaseQuantity(-1)}>
             <Minus width={18} height={18} />
           </button>
+          <label>
             <input
               type="number"
               max={99}
@@ -106,6 +107,7 @@ const CartItem = ({
               onChange={handleQuantity}
               onBlur={handleBlur}
             />
+          </label>
           <button type="button" onClick={() => increaseQuantity(1)}>
             <Plus width={18} height={18} />
           </button>

components/common/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FC, useState } from 'react'
+import { FC, useState, useMemo, useRef, useEffect } from 'react'
 import { getRandomPairOfColors } from '@lib/colors'
 
 interface Props {
@@ -8,14 +8,19 @@ interface Props {
 }
 
 const Avatar: FC<Props> = ({}) => {
-  const [bg] = useState(getRandomPairOfColors)
+  const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
+  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
+    }
+  }, [bg])
 
   return (
     <div
+      ref={ref}
       className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
-      style={{
-        backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
-      }}
     >
       {/* Add an image - We're generating a gradient as placeholder  <img></img> */}
     </div>

components/common/Footer/Footer.tsx

@@ -84,7 +84,11 @@ const Footer: FC<Props> = ({ className, pages }) => {
           </div>
           <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
             <div className="flex space-x-6 items-center h-10">
-              <a href="https://github.com/vercel/commerce" className={s.link}>
+              <a
+                aria-label="Github Repository"
+                href="https://github.com/vercel/commerce"
+                className={s.link}
+              >
                 <Github />
               </a>
               <I18nWidget />

components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react'
 import Link from 'next/link'
-import { getCategoryPath, getDesignerPath } from '@lib/search'
 import { Grid } from '@components/ui'
 import { ProductCard } from '@components/product'
 import s from './HomeAllProductsGrid.module.css'
+import { getCategoryPath, getDesignerPath } from '@lib/search'
 
 interface Props {
   categories?: any

components/common/Layout/Layout.tsx

@@ -1,17 +1,45 @@
-import { FC, useCallback, useEffect, useState } from 'react'
 import cn from 'classnames'
-import { useRouter } from 'next/router'
+import dynamic from 'next/dynamic'
-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 s from './Layout.module.css'
-import debounce from 'lodash.debounce'
+import { useRouter } from 'next/router'
+import React, { FC } 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 { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
+import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+
+const Loading = () => (
+  <div className="w-80 h-80 flex items-center text-center justify-center p-3">
+    <LoadingDots />
+  </div>
+)
+
+const dynamicProps = {
+  loading: () => <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,55 +53,23 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
     closeSidebar,
     closeModal,
     modalView,
-    toastText,
-    closeToast,
-    displayToast,
   } = useUI()
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
-  const [hasScrolled, setHasScrolled] = useState(false)
   const { locale = 'en-US' } = useRouter()
 
   usePreventScroll({
     isDisabled: !(displaySidebar || displayModal),
   })
 
-  const handleScroll = useCallback(
-    debounce(() => {
-      const offset = 0
-      const { scrollTop } = document.documentElement
-      const scrolled = scrollTop > offset
-
-      setHasScrolled(scrolled)
-    }, 1),
-    []
-  )
-
-  useEffect(() => {
-    document.addEventListener('scroll', handleScroll)
-    return () => {
-      document.removeEventListener('scroll', handleScroll)
-    }
-  }, [handleScroll])
-
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>
-        <header
-          className={cn(
-            'sticky top-0 bg-primary z-40 transition-all duration-150',
-            { 'shadow-magical': hasScrolled }
-          )}
-        >
-          <Container>
         <Navbar />
-          </Container>
-        </header>
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
         <Sidebar open={displaySidebar} onClose={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
-
         <Modal open={displayModal} onClose={closeModal}>
           {modalView === 'LOGIN_VIEW' && <LoginView />}
           {modalView === 'SIGNUP_VIEW' && <SignUpView />}
@@ -88,10 +84,6 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
             </Button>
           }
         />
-
-        {/* <Toast open={displayToast} onClose={closeModal}>
-          {toastText}
-        </Toast> */}
       </div>
     </CommerceProvider>
   )

components/common/Navbar/Navbar.module.css

@@ -1,3 +1,7 @@
+.root {
+  @apply sticky top-0 bg-primary z-40 transition-all duration-150;
+}
+
 .link {
   @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accents-6;
 }

components/common/Navbar/Navbar.tsx

@@ -1,17 +1,31 @@
-import { FC } from 'react'
+import { FC, useState, useEffect } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
-import { Logo } from '@components/ui'
+import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
-interface Props {
+import cn from 'classnames'
-  className?: string
+import throttle from 'lodash.throttle'
+
+const Navbar: FC = () => {
+  const [hasScrolled, setHasScrolled] = useState(false)
+
+  const handleScroll = () => {
+    const offset = 0
+    const { scrollTop } = document.documentElement
+    const scrolled = scrollTop > offset
+    setHasScrolled(scrolled)
   }
 
-const Navbar: FC<Props> = ({ className }) => {
+  useEffect(() => {
-  const rootClassName = className
+    document.addEventListener('scroll', throttle(handleScroll, 200))
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
 
   return (
-    <div className={rootClassName}>
+    <div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
+      <Container>
         <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
           <div className="flex flex-1 items-center">
             <Link href="/">
@@ -42,8 +56,9 @@ const Navbar: FC<Props> = ({ className }) => {
         </div>
 
         <div className="flex pb-4 lg:px-6 lg:hidden">
-        <Searchbar id="mobileSearch" />
+          <Searchbar id="mobile-search" />
         </div>
+      </Container>
     </div>
   )
 }

components/common/Searchbar/Searchbar.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react'
+import { FC, useEffect, useMemo } from 'react'
 import cn from 'classnames'
 import s from './Searchbar.module.css'
 import { useRouter } from 'next/router'
@@ -15,14 +15,17 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
     router.prefetch('/search')
   }, [])
 
-  return (
+  return useMemo(
+    () => (
       <div
         className={cn(
           'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
           className
         )}
       >
-      <label htmlFor={id}>
+        <label className="hidden" htmlFor={id}>
+          Search
+        </label>
         <input
           id={id}
           className={s.input}
@@ -45,7 +48,6 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
             }
           }}
         />
-      </label>
         <div className={s.iconContainer}>
           <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
             <path
@@ -56,6 +58,8 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
           </svg>
         </div>
       </div>
+    ),
+    []
   )
 }
 

components/common/UserNav/UserNav.tsx

@@ -34,7 +34,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
           </li>
           <li className={s.item}>
             <Link href="/wishlist">
-              <a onClick={closeSidebarIfPresent}>
+              <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
                 <Heart />
               </a>
             </Link>

components/icons/Cross.tsx

@@ -5,11 +5,11 @@ const Cross = ({ ...props }) => {
       width="24"
       height="24"
       stroke="currentColor"
-      stroke-width="1.5"
+      strokeWidth="1.5"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
       fill="none"
-      shape-rendering="geometricPrecision"
+      shapeRendering="geometricPrecision"
       {...props}
     >
       <path d="M18 6L6 18" />

components/icons/Info.tsx

@@ -5,11 +5,11 @@ const Info = ({ ...props }) => {
       width="24"
       height="24"
       stroke="currentColor"
-      stroke-width="1.5"
+      strokeWidth="1.5"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
       fill="none"
-      shape-rendering="geometricPrecision"
+      shapeRendering="geometricPrecision"
       {...props}
     >
       <circle cx="12" cy="12" r="10" fill="transparent" />

components/product/ProductCard/ProductCard.module.css

@@ -1,5 +1,7 @@
 .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 +69,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;
+  background-image: url('/bg-products.svg');
   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");
 }
 
 .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 {
@@ -125,15 +127,15 @@
 }
 
 .imageContainer {
+  @apply flex items-center justify-center;
+  overflow: hidden;
+
   & > div {
-    & > div {
+    min-width: 100%;
-      height: 100%;
-      margin: 0 auto;
-    }
   }
 }
 
-.product-image {
+.image {
-  height: 120% !important;
+  object-fit: cover;
-  top: -10% !important;
+  transform: scale(1.2);
 }

components/product/ProductCard/ProductCard.tsx

@@ -13,7 +13,10 @@ interface Props {
   variant?: 'slim' | 'simple'
   imgWidth: number | string
   imgHeight: number | string
-  priority?: boolean
+  imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
+  imgPriority?: boolean
+  imgLoading?: 'eager' | 'lazy'
+  imgSizes?: string
 }
 
 const ProductCard: FC<Props> = ({
@@ -22,7 +25,10 @@ const ProductCard: FC<Props> = ({
   variant,
   imgWidth,
   imgHeight,
-  priority,
+  imgPriority,
+  imgLoading,
+  imgSizes,
+  imgLayout = 'responsive',
 }) => {
   const src = p.images.edges?.[0]?.node?.urlOriginal!
   const { price } = usePrice({
@@ -44,12 +50,15 @@ const ProductCard: FC<Props> = ({
               </span>
             </div>
             <Image
+              quality="85"
+              width={imgWidth}
+              sizes={imgSizes}
+              height={imgHeight}
+              layout={imgLayout}
+              loading={imgLoading}
+              priority={imgPriority}
               src={p.images.edges?.[0]?.node.urlOriginal!}
               alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
-              width={imgWidth}
-              height={imgHeight}
-              priority={priority}
-              quality="85"
             />
           </div>
         ) : (
@@ -70,13 +79,16 @@ const ProductCard: FC<Props> = ({
             </div>
             <div className={s.imageContainer}>
               <Image
-                alt={p.name}
-                className={cn('w-full object-cover', s['product-image'])}
-                src={src}
-                width={imgWidth}
-                height={imgHeight}
-                priority={priority}
                 quality="85"
+                src={src}
+                alt={p.name}
+                className={s.image}
+                width={imgWidth}
+                sizes={imgSizes}
+                height={imgHeight}
+                layout={imgLayout}
+                loading={imgLoading}
+                priority={imgPriority}
               />
             </div>
           </>

components/ui/Grid/Grid.module.css

@@ -1,6 +1,7 @@
 .root {
-  --row-height: calc(100vh - 80px - 56px);
+  --row-height: calc(100vh - 88px);
   @apply grid grid-cols-1 gap-0;
+  min-height: var(--row-height);
 
   @screen lg {
     @apply grid-cols-3 grid-rows-2;

components/ui/Marquee/Marquee.tsx

@@ -2,6 +2,7 @@ import cn from 'classnames'
 import s from './Marquee.module.css'
 import { FC, ReactNode, Component } from 'react'
 import Ticker from 'react-ticker'
+import { useInView } from 'react-intersection-observer'
 
 interface Props {
   className?: string
@@ -9,7 +10,11 @@ interface Props {
   variant?: 'primary' | 'secondary'
 }
 
-const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
+const Maquee: FC<Props> = ({
+  className = '',
+  children,
+  variant = 'primary',
+}) => {
   const rootClassName = cn(
     s.root,
     {
@@ -18,14 +23,20 @@ const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
     },
     className
   )
+  const [ref, inView] = useInView({
+    triggerOnce: true,
+    rootMargin: '200px 0px',
+  })
 
   return (
-    <div className={rootClassName}>
+    <div className={rootClassName} ref={ref}>
+      {inView ? (
         <Ticker offset={80}>
-        {({ index }) => <div className={s.container}>{children}</div>}
+          {() => <div className={s.container}>{children}</div>}
         </Ticker>
+      ) : null}
     </div>
   )
 }
 
-export default M
+export default Maquee

lib/browser.ts

@@ -1,16 +0,0 @@
-import * as Bowser from 'bowser'
-
-export function isDesktop(): boolean {
-  const browser = Bowser.getParser(window.navigator.userAgent)
-  return browser.getPlatform().type === 'desktop'
-}
-
-export function isMobile(): boolean {
-  const browser = Bowser.getParser(window.navigator.userAgent)
-  return browser.getPlatform().type === 'mobile'
-}
-
-export function isTablet(): boolean {
-  const browser = Bowser.getParser(window.navigator.userAgent)
-  return browser.getPlatform().type === 'tablet'
-}

next.config.js

@@ -1,6 +1,11 @@
-module.exports = {
+
+
+const bundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: !!process.env.BUNDLE_ANALYZE
+})
+
+module.exports = bundleAnalyzer({
   images: {
-    sizes: [320, 480, 820, 1200, 1600],
     domains: ['cdn11.bigcommerce.com'],
   },
   i18n: {
@@ -51,4 +56,4 @@ module.exports = {
       },
     ]
   },
-}
+});

package.json

@@ -4,25 +4,48 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "analyze": "BUNDLE_ANALYZE=both yarn build",
+    "find:unused": "next-unused"
   },
   "prettier": {
     "semi": false,
     "singleQuote": true
+  },
+    "next-unused": {
+    "alias": {
+      "@lib/*": ["lib/*"],
+      "@assets/*": ["assets/*"],
+      "@config/*": ["config/*"],
+      "@components/*": ["components/*"],
+      "@utils/*": ["utils/*"]
+    },
+    "debug": true,
+    "include": [
+      "components",
+      "lib",
+      "pages"
+    ],
+    "exclude": [
+    ],
+    "entrypoints": [
+      "pages"
+    ]
   },
   "dependencies": {
     "@bigcommerce/storefront-data-hooks": "^1.0.2",
     "@headlessui/react": "^0.2.0",
     "@react-aria/overlays": "^3.4.0",
     "@tailwindcss/ui": "^0.6.2",
+    "@types/lodash.throttle": "^4.1.6",
     "@vercel/fetch": "^6.1.0",
     "bowser": "^2.11.0",
     "classnames": "^2.2.6",
     "email-validator": "^2.0.4",
     "js-cookie": "^2.2.1",
     "keen-slider": "^5.2.4",
-    "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
+    "lodash.throttle": "^4.1.1",
     "next": "^10.0.1-canary.7",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
@@ -30,21 +53,23 @@
     "react": "^16.14.0",
     "react-aria": "^3.0.0",
     "react-dom": "^16.14.0",
+    "react-intersection-observer": "^8.30.1",
     "react-merge-refs": "^1.1.0",
     "react-ticker": "^1.2.2",
     "tailwindcss": "^1.9"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "^10.0.1",
     "@types/bunyan": "^1.8.6",
     "@types/bunyan-prettystream": "^0.1.31",
     "@types/classnames": "^2.2.10",
     "@types/js-cookie": "^2.2.6",
-    "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.random": "^3.2.6",
     "@types/node": "^14.11.2",
     "@types/react": "^16.9.49",
     "bunyan": "^1.8.14",
     "bunyan-prettystream": "^0.1.3",
+    "next-unused": "^0.0.3",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.1.2",

pages/index.tsx

@@ -1,10 +1,9 @@
-import { useMemo } from 'react'
-import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import rangeMap from '@lib/range-map'
 import { Layout } from '@components/common'
-import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
+import { Grid, Marquee, Hero } from '@components/ui'
 import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
+import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 
 import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
 import getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
@@ -17,47 +16,33 @@ export async function getStaticProps({
 }: GetStaticPropsContext) {
   const config = getConfig({ locale })
 
+  // Get Featured Products
   const { products: featuredProducts } = await getAllProducts({
     variables: { field: 'featuredProducts', first: 6 },
     config,
     preview,
   })
+
+  // Get Best Selling Products
   const { products: bestSellingProducts } = await getAllProducts({
     variables: { field: 'bestSellingProducts', first: 6 },
     config,
     preview,
   })
+
+  // Get Best Newest Products
   const { products: newestProducts } = await getAllProducts({
     variables: { field: 'newestProducts', first: 12 },
     config,
     preview,
   })
+
   const { categories, brands } = await getSiteInfo({ config, preview })
   const { pages } = await getAllPages({ config, preview })
 
-  return {
+  // These are the products that are going to be displayed in the landing.
-    props: {
+  // We prefer to do the computation at buildtime/servertime
-      featuredProducts,
+  const { featured, bestSelling } = (() => {
-      bestSellingProducts,
-      newestProducts,
-      categories,
-      brands,
-      pages,
-    },
-    revalidate: 10,
-  }
-}
-
-const nonNullable = (v: any) => v
-
-export default function Home({
-  featuredProducts,
-  bestSellingProducts,
-  newestProducts,
-  categories,
-  brands,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  const { featured, bestSelling } = useMemo(() => {
     // Create a copy of products that we can mutate
     const products = [...newestProducts]
     // If the lists of featured and best selling products don't have enough
@@ -73,8 +58,30 @@ export default function Home({
         (i) => bestSellingProducts[i] ?? products.shift()
       ).filter(nonNullable),
     }
-  }, [newestProducts, featuredProducts, bestSellingProducts])
+  })()
 
+  return {
+    props: {
+      featured,
+      bestSelling,
+      newestProducts,
+      categories,
+      brands,
+      pages,
+    },
+    revalidate: 10,
+  }
+}
+
+const nonNullable = (v: any) => v
+
+export default function Home({
+  featured,
+  bestSelling,
+  brands,
+  categories,
+  newestProducts,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <div>
       <Grid>
@@ -82,10 +89,10 @@ export default function Home({
           <ProductCard
             key={node.path}
             product={node}
-            // The first image is the largest one in the grid
+            imgWidth={i === 0 ? 1080 : 540}
-            imgWidth={i === 0 ? 1600 : 820}
+            imgHeight={i === 0 ? 1080 : 540}
-            imgHeight={i === 0 ? 1600 : 820}
+            imgPriority
-            priority
+            imgLoading="eager"
           />
         ))}
       </Grid>
@@ -97,6 +104,7 @@ export default function Home({
             variant="slim"
             imgWidth={320}
             imgHeight={320}
+            imgLayout="fixed"
           />
         ))}
       </Marquee>
@@ -115,9 +123,8 @@ export default function Home({
           <ProductCard
             key={node.path}
             product={node}
-            // The second image is the largest one in the grid
+            imgWidth={i === 1 ? 1080 : 540}
-            imgWidth={i === 1 ? 1600 : 820}
+            imgHeight={i === 1 ? 1080 : 540}
-            imgHeight={i === 1 ? 1600 : 820}
           />
         ))}
       </Grid>
@@ -129,6 +136,7 @@ export default function Home({
             variant="slim"
             imgWidth={320}
             imgHeight={320}
+            imgLayout="fixed"
           />
         ))}
       </Marquee>

public/bg-products.svg

@@ -0,0 +1,7 @@
+<svg width="48" height="46" viewBox="0 0 48 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <line opacity="0.1" x1="9.41421" y1="8" x2="21" y2="19.5858" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <line 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"/>
+  <line 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"/>
+  <line opacity="0.1" x1="38.5858" y1="38" x2="27" y2="26.4142" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+

tailwind.config.js

@@ -1,4 +1,7 @@
 module.exports = {
+  future: {
+    purgeLayersByDefault: true,
+  },
   purge: {
     content: [
       './pages/**/*.{js,ts,jsx,tsx}',