Merge pull request #74 from vercel/develop

Performance Updates
2020-11-06 17:24:04 -03:00 · 2020-11-06 17:24:04 -03:00 · b0413fe6f1
commit b0413fe6f1
parent b6160b44ab 817fee61cf
22 changed files with 281 additions and 9088 deletions
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@ -97,15 +97,17 @@ const CartItem = ({
          <button type="button" onClick={() => increaseQuantity(-1)}>
            <Minus width={18} height={18} />
          </button>
-          <input
-            type="number"
-            max={99}
-            min={0}
-            className={s.quantity}
-            value={quantity}
-            onChange={handleQuantity}
-            onBlur={handleBlur}
-          />
+          <label>
+            <input
+              type="number"
+              max={99}
+              min={0}
+              className={s.quantity}
+              value={quantity}
+              onChange={handleQuantity}
+              onBlur={handleBlur}
+            />
+          </label>
          <button type="button" onClick={() => increaseQuantity(1)}>
            <Plus width={18} height={18} />
          </button>
--- a/components/common/Avatar/Avatar.tsx
+++ b/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>
--- a/components/common/Footer/Footer.tsx
+++ b/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 />
--- a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
+++ b/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
--- a/components/common/Layout/Layout.tsx
+++ b/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 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 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>
+        <Navbar />
        <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>
  )
--- a/components/common/Navbar/Navbar.module.css
+++ b/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;
 }
--- a/components/common/Navbar/Navbar.tsx
+++ b/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 {
-  className?: string
-}
+import cn from 'classnames'
+import throttle from 'lodash.throttle'

-const Navbar: FC<Props> = ({ className }) => {
-  const rootClassName = className
+const Navbar: FC = () => {
+  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="flex justify-between align-center flex-row py-4 md:py-6 relative">
-        <div className="flex flex-1 items-center">
-          <Link href="/">
-            <a className={s.logo} aria-label="Logo">
-              <Logo />
-            </a>
-          </Link>
-          <nav className="space-x-4 ml-6 hidden lg:block">
+    <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="/">
-              <a className={s.link}>All</a>
+              <a className={s.logo} aria-label="Logo">
+                <Logo />
+              </a>
            </Link>
-            <Link href="/search?q=clothes">
-              <a className={s.link}>Clothes</a>
-            </Link>
-            <Link href="/search?q=accessories">
-              <a className={s.link}>Accessories</a>
-            </Link>
-          </nav>
+            <nav className="space-x-4 ml-6 hidden lg:block">
+              <Link href="/">
+                <a className={s.link}>All</a>
+              </Link>
+              <Link href="/search?q=clothes">
+                <a className={s.link}>Clothes</a>
+              </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">
-          <Searchbar />
+        <div className="flex pb-4 lg:px-6 lg:hidden">
+          <Searchbar id="mobileSearch" />
        </div>
-
-        <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>
+      </Container>
    </div>
  )
 }
--- a/components/common/Searchbar/Searchbar.tsx
+++ b/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 (
-    <div
-      className={cn(
-        'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
-        className
-      )}
-    >
-      <label htmlFor={id}>
+  return useMemo(
+    () => (
+      <div
+        className={cn(
+          'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
+          className
+        )}
+      >
+        <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}>
-        <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
-          <path
-            fillRule="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"
-          />
-        </svg>
+        <div className={s.iconContainer}>
+          <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fillRule="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"
+            />
+          </svg>
+        </div>
      </div>
-    </div>
+    ),
+    []
  )
 }

--- a/components/common/UserNav/UserNav.tsx
+++ b/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>
--- a/components/icons/Cross.tsx
+++ b/components/icons/Cross.tsx
@ -5,11 +5,11 @@ const Cross = ({ ...props }) => {
      width="24"
      height="24"
      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
      fill="none"
-      shape-rendering="geometricPrecision"
+      shapeRendering="geometricPrecision"
      {...props}
    >
      <path d="M18 6L6 18" />
--- a/components/icons/Info.tsx
+++ b/components/icons/Info.tsx
@ -5,11 +5,11 @@ const Info = ({ ...props }) => {
      width="24"
      height="24"
      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
      fill="none"
-      shape-rendering="geometricPrecision"
+      shapeRendering="geometricPrecision"
      {...props}
    >
      <circle cx="12" cy="12" r="10" fill="transparent" />
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/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 {
-      height: 100%;
-      margin: 0 auto;
-    }
+    min-width: 100%;
  }
 }

-.product-image {
-  height: 120% !important;
-  top: -10% !important;
+.image {
+  object-fit: cover;
+  transform: scale(1.2);
 }
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/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>
          </>
--- a/components/ui/Grid/Grid.module.css
+++ b/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;
--- a/components/ui/Marquee/Marquee.tsx
+++ b/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}>
-      <Ticker offset={80}>
-        {({ index }) => <div className={s.container}>{children}</div>}
-      </Ticker>
+    <div className={rootClassName} ref={ref}>
+      {inView ? (
+        <Ticker offset={80}>
+          {() => <div className={s.container}>{children}</div>}
+        </Ticker>
+      ) : null}
    </div>
  )
 }

-export default M
+export default Maquee
--- a/lib/browser.ts
+++ b/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'
-}
--- a/next.config.js
+++ b/next.config.js
@ -1,6 +1,5 @@
 module.exports = {
  images: {
-    sizes: [320, 480, 820, 1200, 1600],
    domains: ['cdn11.bigcommerce.com'],
  },
  i18n: {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/pages/index.tsx
+++ b/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 {
-    props: {
-      featuredProducts,
-      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(() => {
+  // These are the products that are going to be displayed in the landing.
+  // We prefer to do the computation at buildtime/servertime
+  const { featured, bestSelling } = (() => {
    // 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 ? 1600 : 820}
-            imgHeight={i === 0 ? 1600 : 820}
-            priority
+            imgWidth={i === 0 ? 1080 : 540}
+            imgHeight={i === 0 ? 1080 : 540}
+            imgPriority
+            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 ? 1600 : 820}
-            imgHeight={i === 1 ? 1600 : 820}
+            imgWidth={i === 1 ? 1080 : 540}
+            imgHeight={i === 1 ? 1080 : 540}
          />
        ))}
      </Grid>
@ -129,6 +136,7 @@ export default function Home({
            variant="slim"
            imgWidth={320}
            imgHeight={320}
+            imgLayout="fixed"
          />
        ))}
      </Marquee>
--- a/public/bg-products.svg
+++ b/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>
+
--- a/yarn.lock
+++ b/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"