mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
Fix for layout shift (#147)
This commit is contained in:
@@ -2,7 +2,6 @@ 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
|
||||
@@ -23,18 +22,12 @@ const Maquee: FC<Props> = ({
|
||||
},
|
||||
className
|
||||
)
|
||||
const [ref, inView] = useInView({
|
||||
triggerOnce: true,
|
||||
rootMargin: '200px 0px',
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={rootClassName} ref={ref}>
|
||||
{inView ? (
|
||||
<Ticker offset={80}>
|
||||
{() => <div className={s.container}>{children}</div>}
|
||||
</Ticker>
|
||||
) : null}
|
||||
<div className={rootClassName}>
|
||||
<Ticker offset={80}>
|
||||
{() => <div className={s.container}>{children}</div>}
|
||||
</Ticker>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
Reference in New Issue
Block a user