mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Avoid unnecesary rerenders
This commit is contained in:
Belen Curcio
parent
2c40f61dc9
commit
2ad7c59c43
@ -2,14 +2,13 @@ import cn from 'classnames'
|
||||
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 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 { Container, Sidebar, Button, Modal, LoadingDots } from '@components/ui'
|
||||
import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
|
||||
import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
|
||||
|
||||
const Loading = () => (
|
||||
@ -56,46 +55,16 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
||||
modalView,
|
||||
} = useUI()
|
||||
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
|
||||
const [hasScrolled, setHasScrolled] = useState(false)
|
||||
const { locale = 'en-US' } = useRouter()
|
||||
|
||||
console.log('Layout')
|
||||
|
||||
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}>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,49 +1,68 @@
|
||||
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'
|
||||
import cn from 'classnames'
|
||||
import throttle from 'lodash.throttle'
|
||||
interface Props {
|
||||
className?: string
|
||||
}
|
||||
|
||||
const Navbar: FC<Props> = ({ className }) => {
|
||||
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="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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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",
|
||||
@ -40,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",
|
||||
|
||||
21
yarn.lock
21
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user