crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-18 13:11:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into hotfix/upgrade-next

Browse Source
This commit is contained in:
Joe Haddad 2021-01-06 15:16:16 -05:00 committed by GitHub
commit 178a5db7df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/chrome-bug.css Normal file
View File

@ -0,0 +1,12 @@
/**
* Chrome has a bug with transitions on load since 2012!
*
* To prevent a "pop" of content, you have to disable all transitions until
* the page is done loading.
*
* https://lab.laukstein.com/bug/input
* https://twitter.com/timer150/status/1345217126680899584
*/
body.loading * {
transition: none !important;
}

15
components/ui/Marquee/Marquee.tsx
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>
)
}

1
package.json
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",

7
pages/_app.tsx
View File

@ -1,7 +1,8 @@
import '@assets/main.css'
import 'keen-slider/keen-slider.min.css'
import '@assets/chrome-bug.css'
import { FC } from 'react'
import { FC, useEffect } from 'react'
import type { AppProps } from 'next/app'
import { ManagedUIContext } from '@components/ui/context'
@ -12,6 +13,10 @@ const Noop: FC = ({ children }) => <>{children}</>
export default function MyApp({ Component, pageProps }: AppProps) {
const Layout = (Component as any).Layout || Noop
useEffect(() => {
document.body.classList?.remove('loading')
}, [])
return (
<>
<Head />

23
pages/_document.tsx Normal file
View File

@ -0,0 +1,23 @@
import Document, {
DocumentContext,
Head,
Html,
Main,
NextScript,
} from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body className="loading">
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument

5
yarn.lock
View File

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