fix: hide content before css loaded

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}
           />

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>;
 }

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;

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} />
+        {loaded && (
+          <>
             {children}
             <Footer />
+          </>
+        )}
       </main>
-      <Nav data={navData} open={navOpen} setOpen={setNavOpen} />
+      {loaded && <Nav data={navData} open={navOpen} setOpen={setNavOpen} />}
     </>
   );
 }

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>

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}>