From b6f80b7245a86733359f017f790bf6c1e97052eb Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 6 Jan 2021 15:01:07 -0500 Subject: [PATCH 1/2] fix(css): apply workaround for chrome bug (#146) --- assets/chrome-bug.css | 12 ++++++++++++ pages/_app.tsx | 7 ++++++- pages/_document.tsx | 23 +++++++++++++++++++++++ 3 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 assets/chrome-bug.css create mode 100644 pages/_document.tsx diff --git a/assets/chrome-bug.css b/assets/chrome-bug.css new file mode 100644 index 000000000..245ec8f09 --- /dev/null +++ b/assets/chrome-bug.css @@ -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; +} diff --git a/pages/_app.tsx b/pages/_app.tsx index dabaaf8d0..132ce5f18 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -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 ( <> diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 000000000..c2baf322e --- /dev/null +++ b/pages/_document.tsx @@ -0,0 +1,23 @@ +import Document, { + DocumentContext, + Head, + Html, + Main, + NextScript, +} from 'next/document' + +class MyDocument extends Document { + render() { + return ( + + + +
+ + + + ) + } +} + +export default MyDocument From 4028e308bf5d17a8da4a70e9c48979e99dd6d4e3 Mon Sep 17 00:00:00 2001 From: B Date: Wed, 6 Jan 2021 17:15:52 -0300 Subject: [PATCH 2/2] Fix for layout shift (#147) --- components/ui/Marquee/Marquee.tsx | 15 ++++----------- package.json | 1 - yarn.lock | 5 ----- 3 files changed, 4 insertions(+), 17 deletions(-) diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx index 8ec6d5182..09f562011 100644 --- a/components/ui/Marquee/Marquee.tsx +++ b/components/ui/Marquee/Marquee.tsx @@ -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 = ({ }, className ) - const [ref, inView] = useInView({ - triggerOnce: true, - rootMargin: '200px 0px', - }) return ( -
- {inView ? ( - - {() =>
{children}
} - - ) : null} +
+ + {() =>
{children}
} +
) } diff --git a/package.json b/package.json index 9dd25b6ba..5a46c710b 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 372894006..0adf712cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"