Merge pull request #74 from vercel/develop

Performance Updates

components/cart/CartItem/CartItem.tsx

@@ -97,15 +97,17 @@ const CartItem = ({
           <button type="button" onClick={() => increaseQuantity(-1)}>
             <Minus width={18} height={18} />
           </button>
-          <input
+          <label>
-            type="number"
+            <input
-            max={99}
+              type="number"
-            min={0}
+              max={99}
-            className={s.quantity}
+              min={0}
-            value={quantity}
+              className={s.quantity}
-            onChange={handleQuantity}
+              value={quantity}
-            onBlur={handleBlur}
+              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
+        <Navbar />
-          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,49 +1,64 @@
-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<Props> = ({ className }) => {
+const Navbar: FC = () => {
-  const rootClassName = className
+  const [hasScrolled, setHasScrolled] = useState(false)
+
+  const handleScroll = () => {
+    const offset = 0
+    const { scrollTop } = document.documentElement
+    const scrolled = scrollTop > offset
+    setHasScrolled(scrolled)
+  }
+
+  useEffect(() => {
+    document.addEventListener('scroll', throttle(handleScroll, 200))
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
 
   return (
-    <div className={rootClassName}>
+    <div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
-      <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
+      <Container>
-        <div className="flex flex-1 items-center">
+        <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
-          <Link href="/">
+          <div className="flex flex-1 items-center">
-            <a className={s.logo} aria-label="Logo">
-              <Logo />
-            </a>
-          </Link>
-          <nav className="space-x-4 ml-6 hidden lg:block">
             <Link href="/">
-              <a className={s.link}>All</a>
+              <a className={s.logo} aria-label="Logo">
+                <Logo />
+              </a>
             </Link>
-            <Link href="/search?q=clothes">
+            <nav className="space-x-4 ml-6 hidden lg:block">
-              <a className={s.link}>Clothes</a>
+              <Link href="/">
-            </Link>
+                <a className={s.link}>All</a>
-            <Link href="/search?q=accessories">
+              </Link>
-              <a className={s.link}>Accessories</a>
+              <Link href="/search?q=clothes">
-            </Link>
+                <a className={s.link}>Clothes</a>
-          </nav>
+              </Link>
+              <Link href="/search?q=accessories">
+                <a className={s.link}>Accessories</a>
+              </Link>
+            </nav>
+          </div>
+
+          <div className="flex-1 justify-center hidden lg:flex">
+            <Searchbar />
+          </div>
+
+          <div className="flex flex-1 justify-end space-x-8">
+            <UserNav />
+          </div>
         </div>
 
-        <div className="flex-1 justify-center hidden lg:flex">
+        <div className="flex pb-4 lg:px-6 lg:hidden">
-          <Searchbar />
+          <Searchbar id="mobileSearch" />
         </div>
-
+      </Container>
-        <div className="flex flex-1 justify-end space-x-8">
-          <UserNav />
-        </div>
-      </div>
-
-      <div className="flex pb-4 lg:px-6 lg:hidden">
-        <Searchbar id="mobileSearch" />
-      </div>
     </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(
+      <div
-        'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
+        className={cn(
-        className
+          '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,17 +48,18 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
             }
           }}
         />
-      </label>
+        <div className={s.iconContainer}>
-      <div className={s.iconContainer}>
+          <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
-        <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
+            <path
-          <path
+              fillRule="evenodd"
-            fillRule="evenodd"
+              clipRule="evenodd"
-            clipRule="evenodd"
+              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+            />
-          />
+          </svg>
-        </svg>
+        </div>
       </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}>
-      <Ticker offset={80}>
+      {inView ? (
-        {({ index }) => <div className={s.container}>{children}</div>}
+        <Ticker offset={80}>
-      </Ticker>
+          {() => <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,5 @@
 module.exports = {
   images: {
-    sizes: [320, 480, 820, 1200, 1600],
     domains: ['cdn11.bigcommerce.com'],
   },
   i18n: {

package.json

@@ -15,14 +15,15 @@
     "@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,6 +31,7 @@
     "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"
@@ -39,7 +41,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",

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>
+

yarn.lock

@@ -1818,13 +1818,6 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
 
-"@types/lodash.debounce@^4.0.6":
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz#c5a2326cd3efc46566c47e4c0aa248dc0ee57d60"
-  integrity sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==
-  dependencies:
-    "@types/lodash" "*"
-
 "@types/lodash.random@^3.2.6":
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/@types/lodash.random/-/lodash.random-3.2.6.tgz#64b08abad168dca39c778ed40cce75b2f9e168eb"
@@ -1832,6 +1825,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.throttle@^4.1.6":
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz#f5ba2c22244ee42ff6c2c49e614401a870c1009c"
+  integrity sha512-/UIH96i/sIRYGC60NoY72jGkCJtFN5KVPhEMMMTjol65effe1gPn0tycJqV5tlSwMTzX8FqzB5yAj0rfGHTPNg==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash@*":
   version "4.14.162"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.162.tgz#65d78c397e0d883f44afbf1f7ba9867022411470"
@@ -3747,7 +3747,7 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
-lodash.debounce@4.0.8, lodash.debounce@^4.0.8:
+lodash.debounce@4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
@@ -3777,6 +3777,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -4896,6 +4901,11 @@ react-dom@^16.14.0:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-intersection-observer@^8.30.1:
+  version "8.30.1"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.30.1.tgz#e0ce4835d2834fc712b096aec65230de79eeaadb"
+  integrity sha512-BGHGkmWz/d4Gs+44jWkrZBtJ6//HGwouZ9ub+kRRoRfguw2JoDlVrgTDwkQ/deDJAR9keTkQmMilNu+onhqfgw==
+
 react-is@16.13.1, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"