From 86e8a10f72d57bbf3f653b0d41de59cc1f7a6f2b Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Thu, 14 Jan 2021 17:52:59 +0000
Subject: [PATCH] fix: hide content before css loaded

---
 src/components/card.js           |  2 +-
 src/components/nav-link.js       |  3 +--
 src/components/review-summary.js |  2 +-
 src/layout.js                    | 15 ++++++++++-----
 src/pages/index.js               |  2 +-
 src/pages/services/index.js      |  3 +--
 6 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/card.js b/src/components/card.js
index b2af622..89d4434 100644
--- a/src/components/card.js
+++ b/src/components/card.js
@@ -49,7 +49,7 @@ export default function Card({ image, children, to }) {
           <Img
             style={{
               display: "block",
-              "border-radius": "5px"
+              borderRadius: "5px"
             }}
             fixed={image}
           />
diff --git a/src/components/nav-link.js b/src/components/nav-link.js
index 06a1b8c..6718178 100644
--- a/src/components/nav-link.js
+++ b/src/components/nav-link.js
@@ -24,7 +24,6 @@ const Link = styled(GatsbyLink)`
   }
 `;
 
-export default function NavLink({ location, children, to }) {
-  console.log(location);
+export default function NavLink({ children, to }) {
   return <Link to={to}>{children}</Link>;
 }
diff --git a/src/components/review-summary.js b/src/components/review-summary.js
index dc183d9..b94c4cf 100644
--- a/src/components/review-summary.js
+++ b/src/components/review-summary.js
@@ -68,7 +68,7 @@ const Title = styled.p`
   color: var(--theme-color-dark);
 `;
 
-const SmallIcon = styled.div`
+const SmallIcon = styled.span`
   display: inline-block;
   width: 16px;
   height: 16px;
diff --git a/src/layout.js b/src/layout.js
index a73a6b1..95c79a1 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -85,8 +85,7 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-export default function Layout({ location, children }) {
-  console.log(location);
+export default function Layout({ children }) {
   const data = useStaticQuery(graphql`
     query HeaderQuery {
       site {
@@ -108,6 +107,7 @@ export default function Layout({ location, children }) {
   `);
   const { title, description, keywords, navData } = data.site.siteMetadata;
   const [navOpen, setNavOpen] = useState();
+  const [loaded, setLoaded] = useState();
   return (
     <>
       <main>
@@ -117,12 +117,17 @@ export default function Layout({ location, children }) {
             { name: "description", content: description },
             { name: "keywords", content: keywords }
           ]}
+          onChangeClientState={() => setLoaded(true)}
         />
         <GlobalStyle navOpen={navOpen} />
-        {children}
-        <Footer />
+        {loaded && (
+          <>
+            {children}
+            <Footer />
+          </>
+        )}
       </main>
-      <Nav data={navData} open={navOpen} setOpen={setNavOpen} />
+      {loaded && <Nav data={navData} open={navOpen} setOpen={setNavOpen} />}
     </>
   );
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index 19a7019..5c36ac1 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -13,7 +13,7 @@ export default function Index({ data }) {
   return (
     <Layout>
       <Header image={data.headerImage.childImageSharp.fluid}>
-        <HeaderLogo transition={true} />
+        <HeaderLogo />
       </Header>
       <Section>
         <Text>
diff --git a/src/pages/services/index.js b/src/pages/services/index.js
index 0d0410c..9081348 100644
--- a/src/pages/services/index.js
+++ b/src/pages/services/index.js
@@ -3,8 +3,7 @@ import { graphql } from "gatsby";
 import Layout from "../../layout";
 import Header from "../../components/header";
 
-export default function Index({ location, data }) {
-  console.log(location);
+export default function Index({ data }) {
   return (
     <Layout>
       <Header image={data.headerImage.childImageSharp.fluid}>