mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Delay, and lazily load Marquees
This commit is contained in:
parent
b6160b44ab
commit
cc72658c99
@ -8,7 +8,7 @@
|
||||
|
||||
& > * {
|
||||
@apply flex-1 px-16 py-4;
|
||||
width: 430px;
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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',
|
||||
})
|
||||
console.log(inView)
|
||||
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
|
||||
|
8868
package-lock.json
generated
8868
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -30,6 +30,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"
|
||||
|
@ -4896,6 +4896,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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user