fix unstyled flash

Shane98c · Feb 11, 2021 · 44ce8c6 · 44ce8c6 · vercel · Feb 11, 2021
1 parent f1facc8
commit 44ce8c6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/pages/_document.js b/pages/_document.js
@@ -4,7 +4,7 @@ import { ServerStyleSheet } from "styled-components";
 export default class MyDocument extends Document {
   static getInitialProps({ renderPage }) {
     const sheet = new ServerStyleSheet();
-    const page = renderPage(App => props =>
+    const page = renderPage((App) => (props) =>
       sheet.collectStyles(<App {...props} />)
     );
     const styleTags = sheet.getStyleElement();
@@ -15,6 +15,17 @@ export default class MyDocument extends Document {
     return (
       <html>
         <Head>
+          {
+            <style
+              dangerouslySetInnerHTML={{
+                __html: `
+body #__next div {visibility: hidden}
+body.loaded #__next div {visibility: visible}
+
+`,
+              }}
+            ></style>
+          }
           <title>Shane Loeffler</title>
           {this.props.styleTags}
           <meta name="viewport" content="width=device-width, initial-scale=1" />

diff --git a/pages/index.js b/pages/index.js
@@ -2,6 +2,9 @@ import * as React from "react";
 import Layout from "../components/Layout";
 import Highlight from "../components/Highlight";
 
+if (process.browser) {
+  document.body.classList.add("loaded");
+}
 const projects = [
   {
     img: "../static/img/maptheblacksnake.png",