fix: remove initial page jump on initial load

packages/gatsby-theme-carbon/gatsby-browser.js

@@ -1,9 +1,42 @@
 import React from 'react';
 import ThemeProvider from './src/components/ThemeProvider';
 import { NavContextProvider } from './src/util/context/NavContext';
+import { useSmoothScroll } from './src/util/hooks';
+
+const SmoothLoader = ({ children }) => {
+  useSmoothScroll();
+  return children;
+};
 
 export const wrapRootElement = ({ element }) => (
   <NavContextProvider>
-    <ThemeProvider>{element}</ThemeProvider>
+    <ThemeProvider>
+      <SmoothLoader>{element}</SmoothLoader>
+    </ThemeProvider>
   </NavContextProvider>
 );
+
+const getTargetOffset = hash => {
+  const id = window.decodeURI(hash.replace(`#`, ``));
+  if (id !== ``) {
+    const element = document.getElementById(id);
+    if (element) {
+      return element.offsetTop - 48;
+    }
+  }
+  return null;
+};
+
+export const onInitialClientRender = () => {
+  requestAnimationFrame(() => {
+    const offset = getTargetOffset(window.location.hash);
+    if (offset !== null) {
+      window.scrollTo(0, offset);
+    }
+  });
+};
+
+export const shouldUpdateScroll = ({ routerProps: { location } }) => {
+  const offset = getTargetOffset(location.hash);
+  return offset !== null ? [0, offset] : true;
+};

packages/gatsby-theme-carbon/gatsby-ssr.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import ThemeProvider from './src/components/ThemeProvider';
 import { NavContextProvider } from './src/util/context/NavContext';
@@ -7,3 +8,28 @@ export const wrapRootElement = ({ element }) => (
     <ThemeProvider>{element}</ThemeProvider>
   </NavContextProvider>
 );
+
+export const onRenderBody = ({ setHeadComponents }) => {
+  const script = `
+    document.addEventListener("DOMContentLoaded", function(event) {
+      var hash = window.decodeURI(location.hash.replace('#', ''))
+      if (hash !== '') {
+        var element = document.getElementById(hash)
+        if (element) {
+          var offset = element.offsetTop
+          // Wait for the browser to finish rendering before scrolling.
+          setTimeout((function() {
+            window.scrollTo(0, offset - 48)
+          }), 0)
+        }
+      }
+    })
+  `;
+
+  return setHeadComponents([
+    <script
+      key="scroll-loader-script"
+      dangerouslySetInnerHTML={{ __html: script }}
+    />,
+  ]);
+};

packages/gatsby-theme-carbon/src/components/Layout.js

@@ -7,13 +7,10 @@ import Switcher from './Switcher';
 import Footer from './Footer';
 import MDXProvider from './MDXProvider';
 import Container from './Container';
-import { useSmoothScroll } from '../util/hooks';
 
 import '../styles/index.scss';
 
 const Layout = ({ children, homepage, ...rest }) => {
-  useSmoothScroll();
-
   const is404 = children.key === null;
 
   return (