4
0
forked from crowetic/commerce

Fix for layout shift (#147)

This commit is contained in:
B 2021-01-06 17:15:52 -03:00 committed by GitHub
parent b6f80b7245
commit 4028e308bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 17 deletions

View File

@ -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>
)
}

View File

@ -63,7 +63,6 @@
"postcss-nesting": "^7.0.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-intersection-observer": "^8.30.1",
"react-merge-refs": "^1.1.0",
"react-ticker": "^1.2.2",
"swr": "^0.3.11",

View File

@ -6406,11 +6406,6 @@ 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"