jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-10-27 19:15:48 -04:00
Code Issues Activity

tell unblock-transitions script to remove itself when finished

Browse Source
This commit is contained in:
Jake Jarvis
2022-02-18 12:31:57 -05:00
parent 5f977db7f2
commit 17a271eb87
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/Layout/Layout.tsx
View File

@@ -26,16 +26,14 @@ const Layout = ({ container = true, stickyHeader = true, className, children, ..
}} }}
/> />
{/* kinda a hack to prevent dramatically fading into dark theme if we're immediately setting it on load */} {/* dynamically set browser theme color to match the background color; default to light for SSR */}
<style id="no-fade-css">{`.page.no-fade,.page.no-fade *{transition:none!important}`}</style>
{/* dynamically set browser theme color to match the background color */}
<meta name="theme-color" content={themes[resolvedTheme || "light"]["background-outer"]} /> <meta name="theme-color" content={themes[resolvedTheme || "light"]["background-outer"]} />
</Head> </Head>
{/* remove the `.no-fade` class above from body once the page is finished loading */} {/* this script removes the CSS that blocks transitions (see _document.tsx) once the page is finished loading...
...and removes itself after it has done that: */}
<Script id="unblock-transitions" strategy="lazyOnload"> <Script id="unblock-transitions" strategy="lazyOnload">
{`try{document.body.classList.remove("no-fade");document.getElementById("no-fade-css").remove()}catch(e){}`} {`try{document.getElementById("block-transitions").remove();document.getElementById("unblock-transitions").remove()}catch(e){}`}
</Script> </Script>
<div className={classNames(styles.flex, className)} {...rest}> <div className={classNames(styles.flex, className)} {...rest}>

6
pages/_document.tsx
View File

@@ -5,7 +5,11 @@ import * as config from "../lib/config";
const Document = () => { const Document = () => {
return ( return (
<Html lang={config.siteLocale?.replace("_", "-")}> <Html lang={config.siteLocale?.replace("_", "-")}>
<Head /> <Head>
{/* kinda a hack to prevent dramatically fading into dark theme if we're immediately setting it on load. */}
{/* removed by `<Layout />` once the page is completely finished loading. */}
<style id="block-transitions">{`*,::before,::after{transition:none!important}`}</style>
</Head>
<body> <body>
<Main /> <Main />
<NextScript /> <NextScript />