header fix when loaded from app shell

src/components/Layout.jsx

@@ -1,7 +1,7 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import posed, { PoseGroup } from 'react-pose'
-import { StaticQuery, graphql } from 'gatsby'
+import { graphql, useStaticQuery } from 'gatsby'
 import { fadeIn } from './atoms/Transitions'
 import Typekit from './atoms/Typekit'
 import HostnameCheck from './atoms/HostnameCheck'
@@ -22,48 +22,38 @@ const query = graphql`
   }
 `
 
-const timeout = 200
+Layout.propTypes = {
-const RoutesContainer = posed.div(fadeIn)
+  children: PropTypes.any.isRequired,
-
+  location: PropTypes.shape({
-export default class Layout extends PureComponent {
+    pathname: PropTypes.string.isRequired
-  static propTypes = {
+  }).isRequired
-    children: PropTypes.any.isRequired,
+}
-    location: PropTypes.shape({
+
-      pathname: PropTypes.string.isRequired
+export default function Layout({ children, location }) {
-    }).isRequired
+  const { metaYaml } = useStaticQuery(query)
-  }
+  const timeout = 200
-
+  const RoutesContainer = posed.div(fadeIn)
-  render() {
+  const isHomepage =
-    const { children, location } = this.props
+    location.pathname === '/' ||
-    const isHomepage = location.pathname === '/'
+    location.pathname === '/offline-plugin-app-shell-fallback/'
-
+
-    return (
+  return (
-      <StaticQuery
+    <>
-        query={query}
+      <Typekit />
-        render={data => {
+      <HostnameCheck allowedHosts={metaYaml.allowedHosts} />
-          const { allowedHosts } = data.metaYaml
+
-
+      <PoseGroup animateOnMount={true}>
-          return (
+        <RoutesContainer
-            <>
+          key={location.pathname}
-              <Typekit />
+          delay={timeout}
-              <HostnameCheck allowedHosts={allowedHosts} />
+          delayChildren={timeout}
-
+        >
-              <PoseGroup animateOnMount={true}>
+          <Header minimal={!isHomepage} />
-                <RoutesContainer
+          <main className={styles.screen}>{children}</main>
-                  key={location.pathname}
+        </RoutesContainer>
-                  delay={timeout}
+      </PoseGroup>
-                  delayChildren={timeout}
+
-                >
+      <Footer />
-                  <Header minimal={!isHomepage} />
+    </>
-                  <main className={styles.screen}>{children}</main>
+  )
-                </RoutesContainer>
-              </PoseGroup>
-
-              <Footer />
-            </>
-          )
-        }}
-      />
-    )
-  }
 }