chore: Load sdk with the main site rather than async

newrelic · Jun 3, 2020 · ed2ff89 · ed2ff89
1 parent ef68231
commit ed2ff89
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 46 deletions.
diff --git 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
diff --git 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>
   );