From ed2ff89fa0eea0ec9454060d93fd8ae693325d0c Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 10:33:44 -0700
Subject: [PATCH] chore: Load sdk with the main site rather than async

---
 gatsby-ssr.js                      | 13 ++++++-
 src/hooks/useSdk.js                | 14 --------
 src/templates/ReferenceTemplate.js | 54 +++++++++++++-----------------
 3 files changed, 35 insertions(+), 46 deletions(-)
 delete mode 100644 src/hooks/useSdk.js

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 41ae50b21..7bc45280e 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -6,8 +6,14 @@
 
 // This is needed to ensure the NR1 SDK can load properly
 const React = require('react');
+const { JS_BUNDLE } = require('./src/utils/sdk');
 
-exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
+exports.onPreRenderHTML = ({
+  getHeadComponents,
+  replaceHeadComponents,
+  getPostBodyComponents,
+  replacePostBodyComponents,
+}) => {
   replaceHeadComponents([
     ...getHeadComponents(),
     <script
@@ -36,4 +42,9 @@ exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
       src="//nr1.nr-assets.net/lib/d3/3.5.17/d3.js"
     />,
   ]);
+
+  replacePostBodyComponents([
+    ...getPostBodyComponents(),
+    <script key="nr1-sdk" crossOrigin="anonymous" src={JS_BUNDLE} />,
+  ]);
 };
diff --git a/src/hooks/useSdk.js b/src/hooks/useSdk.js
deleted file mode 100644
index ad40b2d5f..000000000
--- a/src/hooks/useSdk.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import useScript from './useScript';
-import useStylesheet from './useStylesheet';
-import { JS_BUNDLE, CSS_BUNDLE } from '../utils/sdk';
-
-const useSdk = () => {
-  const scriptLoaded = useScript(JS_BUNDLE);
-  const stylesheetLoaded = useStylesheet(CSS_BUNDLE, {
-    insertBefore: 'sdk-overrides',
-  });
-
-  return scriptLoaded && stylesheetLoaded;
-};
-
-export default useSdk;
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
index 805c3cb8f..61ae79695 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ReferenceTemplate.js
@@ -8,14 +8,12 @@ import ComponentExample from '../components/ComponentExample';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
-import useSdk from '../hooks/useSdk';
 
 import pages from '../data/sidenav.json';
 
 import styles from './ReferenceTemplate.module.scss';
 
 const ReferenceTemplate = ({ data }) => {
-  const loaded = useSdk();
   const [isOpen, setIsOpen] = useState(false);
   const { mdx } = data;
   const { frontmatter } = mdx;
@@ -25,8 +23,6 @@ const ReferenceTemplate = ({ data }) => {
   const componentData = window?.__NR1_SDK__?.default?.[component];
   const examples = componentData?.__docs__.tags.examples || [];
 
-  useSdk();
-
   return (
     <Layout>
       <SEO title={title} description={description} />
@@ -37,35 +33,31 @@ const ReferenceTemplate = ({ data }) => {
           isOpen={isOpen}
           toggle={() => setIsOpen(!isOpen)}
         />
-        {loaded ? (
-          <main className={styles.content}>
-            <h1>{component}</h1>
+        <main className={styles.content}>
+          <h1>{component}</h1>
 
-            {componentData && componentData.__docs__ && (
-              <>
-                <section className={cx(styles.section, styles.description)}>
-                  <ReactMarkdown source={componentData.__docs__.text} />
+          {componentData && componentData.__docs__ && (
+            <>
+              <section className={cx(styles.section, styles.description)}>
+                <ReactMarkdown source={componentData.__docs__.text} />
+              </section>
+              {examples.length > 0 && (
+                <section className={styles.section}>
+                  <h2>Examples</h2>
+                  <div>
+                    {examples.map((example, i) => (
+                      <ComponentExample
+                        key={i}
+                        className={styles.componentExample}
+                        example={example}
+                      />
+                    ))}
+                  </div>
                 </section>
-                {examples.length > 0 && (
-                  <section className={styles.section}>
-                    <h2>Examples</h2>
-                    <div>
-                      {examples.map((example, i) => (
-                        <ComponentExample
-                          key={i}
-                          className={styles.componentExample}
-                          example={example}
-                        />
-                      ))}
-                    </div>
-                  </section>
-                )}
-              </>
-            )}
-          </main>
-        ) : (
-          <p>Loading...</p>
-        )}
+              )}
+            </>
+          )}
+        </main>
       </Container>
     </Layout>
   );