From 4398139b33d2fdfb32736ec0420c1056b5ea5f53 Mon Sep 17 00:00:00 2001
From: Alec Swanson <aswanson@newrelic.com>
Date: Fri, 7 May 2021 14:11:31 -0700
Subject: [PATCH] feat: Update theme to include A/B testing button

---
 gatsby-config.js                              |  13 +
 package.json                                  |   2 +-
 .../__snapshots__/Header.spec.js.snap         | 107 ++-
 .../__snapshots__/collection.spec.js.snap     | 169 +++--
 .../external-projects.spec.js.snap            | 169 +++--
 .../__snapshots__/index.spec.js.snap          | 183 +++--
 .../__snapshots__/oss-category.spec.js.snap   | 173 +++--
 .../external-project-page.spec.js.snap        | 639 ++++++++----------
 yarn.lock                                     | 192 +++---
 9 files changed, 778 insertions(+), 869 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 99fc03c950..b5dbd04313 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -78,6 +78,19 @@ module.exports = {
             }),
           },
         },
+        splitio: {
+          // Mocked features only used when in localhost mode
+          // https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#localhost-mode
+          features: {
+            free_account_button_color: {
+              treatment: 'off',
+            },
+          },
+          core: {
+            authorizationKey: process.env.SPLITIO_AUTH_KEY || 'localhost',
+          },
+          debug: false,
+        },
       },
     },
     {
diff --git a/package.json b/package.json
index 7790418f42..50d9dc2320 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "@emotion/styled": "^11.3.0",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@newrelic/gatsby-theme-newrelic": "^2.0.1",
+    "@newrelic/gatsby-theme-newrelic": "2.2.0",
     "@splitsoftware/splitio-react": "^1.2.4",
     "date-fns": "^2.17.0",
     "feather-icons": "^4.28.0",
diff --git a/src/components/__tests__/__snapshots__/Header.spec.js.snap b/src/components/__tests__/__snapshots__/Header.spec.js.snap
index aa80cd1fa8..89af96a428 100644
--- a/src/components/__tests__/__snapshots__/Header.spec.js.snap
+++ b/src/components/__tests__/__snapshots__/Header.spec.js.snap
@@ -2,7 +2,16 @@
 
 exports[`Header renders correctly 1`] = `
 Array [
-  .emotion-87 {
+  @keyframes animation-0 {
+  to {
+    -webkit-transform: rotate(1turn);
+    -moz-transform: rotate(1turn);
+    -ms-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+.emotion-86 {
   background-color: var(--color-neutrals-100);
   position: -webkit-sticky;
   position: sticky;
@@ -11,20 +20,20 @@ Array [
   z-index: 700;
 }
 
-.dark-mode .emotion-87 {
+.dark-mode .emotion-86 {
   background-color: var(--color-dark-100);
 }
 
-.emotion-87 ul {
+.emotion-86 ul {
   line-height: 14px;
   font-size: 16px;
 }
 
-.emotion-87 a {
+.emotion-86 a {
   border-bottom: none;
 }
 
-.emotion-86 {
+.emotion-85 {
   height: var(--global-header-height);
   display: -webkit-box;
   display: -webkit-flex;
@@ -1763,7 +1772,7 @@ Array [
   color: var(--color-dark-700);
 }
 
-.emotion-85 {
+.emotion-84 {
   margin: 0;
   margin-left: 1rem;
   padding: 0;
@@ -1781,18 +1790,18 @@ Array [
   flex: 1;
 }
 
-.emotion-85 >li {
+.emotion-84 >li {
   -webkit-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   color: var(--secondary-text-color);
 }
 
-.emotion-85 >li:not(:first-of-type) {
+.emotion-84 >li:not(:first-of-type) {
   margin-left: 0.5rem;
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-85 {
+  .emotion-84 {
     -webkit-flex: unset;
     -ms-flex: unset;
     flex: unset;
@@ -2025,7 +2034,7 @@ Array [
   }
 }
 
-.emotion-84 {
+.emotion-83 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2033,49 +2042,35 @@ Array [
 }
 
 .emotion-82 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border-radius: 3px;
-  font-family: var(--primary-font-family);
-  line-height: 1;
-  cursor: pointer;
-  border: 1px solid transparent;
-  -webkit-transition: all 0.15s ease-out;
-  transition: all 0.15s ease-out;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--color-white);
-  background-color: var(--color-brand-600);
-  font-size: 0.625rem;
-  padding: 0.375rem 0.625rem;
-  border-radius: 0.125rem;
+  --spinner-size: 1rem;
+  display: inline-block;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
-.emotion-82:hover {
-  color: var(--color-white);
-  background-color: var(--color-brand-500);
+.emotion-82:after {
+  -webkit-animation: animation-0 0.5s linear infinite;
+  animation: animation-0 0.5s linear infinite;
+  border-radius: 50%;
+  border-right: 1px solid transparent;
+  border-top: 1px solid;
+  content: '';
+  left: calc(50% + 1px);
+  margin-left: calc(var(--spinner-size) / 2 * -1);
+  margin-top: calc(var(--spinner-size) / 2 * -1);
+  position: absolute;
+  top: calc(50% + 1px);
+  width: var(--spinner-size);
+  height: var(--spinner-size);
 }
 
 <div
-    className=" emotion-87"
+    className=" emotion-86"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-86"
+      className="emotion-85"
     >
       <div
         className="emotion-28"
@@ -2355,7 +2350,7 @@ Array [
         </ul>
       </nav>
       <ul
-        className="emotion-85"
+        className="emotion-84"
       >
         <li
           className="emotion-75"
@@ -2470,21 +2465,13 @@ Array [
           </a>
         </li>
         <li
-          className="emotion-84"
+          className="emotion-83"
         >
-          <a
-            className="emotion-82 emotion-55"
-            href="https://newrelic.com/signup"
-            onClick={[Function]}
-            rel="noopener"
-            size="extraSmall"
-            target="_blank"
-            variant="primary"
-          >
-            <span>
-              Free account
-            </span>
-          </a>
+          <div
+            aria-busy={true}
+            aria-label="Loading"
+            className="emotion-82"
+          />
         </li>
       </ul>
     </div>
diff --git a/src/pages/__tests__/__snapshots__/collection.spec.js.snap b/src/pages/__tests__/__snapshots__/collection.spec.js.snap
index 61039236e7..1996998dab 100644
--- a/src/pages/__tests__/__snapshots__/collection.spec.js.snap
+++ b/src/pages/__tests__/__snapshots__/collection.spec.js.snap
@@ -1,7 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Data Collection Agents Page Renders correctly 1`] = `
-.emotion-138 {
+@keyframes animation-0 {
+  to {
+    -webkit-transform: rotate(1turn);
+    -moz-transform: rotate(1turn);
+    -ms-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+.emotion-137 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14,7 +23,7 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
   position: relative;
 }
 
-.emotion-87 {
+.emotion-86 {
   background-color: var(--color-neutrals-100);
   position: -webkit-sticky;
   position: sticky;
@@ -23,20 +32,20 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
   z-index: 700;
 }
 
-.dark-mode .emotion-87 {
+.dark-mode .emotion-86 {
   background-color: var(--color-dark-100);
 }
 
-.emotion-87 ul {
+.emotion-86 ul {
   line-height: 14px;
   font-size: 16px;
 }
 
-.emotion-87 a {
+.emotion-86 a {
   border-bottom: none;
 }
 
-.emotion-86 {
+.emotion-85 {
   height: var(--global-header-height);
   display: -webkit-box;
   display: -webkit-flex;
@@ -1775,7 +1784,7 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
   color: var(--color-dark-700);
 }
 
-.emotion-85 {
+.emotion-84 {
   margin: 0;
   margin-left: 1rem;
   padding: 0;
@@ -1793,18 +1802,18 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
   flex: 1;
 }
 
-.emotion-85 >li {
+.emotion-84 >li {
   -webkit-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   color: var(--secondary-text-color);
 }
 
-.emotion-85 >li:not(:first-of-type) {
+.emotion-84 >li:not(:first-of-type) {
   margin-left: 0.5rem;
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-85 {
+  .emotion-84 {
     -webkit-flex: unset;
     -ms-flex: unset;
     flex: unset;
@@ -2037,7 +2046,7 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
   }
 }
 
-.emotion-84 {
+.emotion-83 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2045,61 +2054,47 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
 }
 
 .emotion-82 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border-radius: 3px;
-  font-family: var(--primary-font-family);
-  line-height: 1;
-  cursor: pointer;
-  border: 1px solid transparent;
-  -webkit-transition: all 0.15s ease-out;
-  transition: all 0.15s ease-out;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--color-white);
-  background-color: var(--color-brand-600);
-  font-size: 0.625rem;
-  padding: 0.375rem 0.625rem;
-  border-radius: 0.125rem;
+  --spinner-size: 1rem;
+  display: inline-block;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
-.emotion-82:hover {
-  color: var(--color-white);
-  background-color: var(--color-brand-500);
+.emotion-82:after {
+  -webkit-animation: animation-0 0.5s linear infinite;
+  animation: animation-0 0.5s linear infinite;
+  border-radius: 50%;
+  border-right: 1px solid transparent;
+  border-top: 1px solid;
+  content: '';
+  left: calc(50% + 1px);
+  margin-left: calc(var(--spinner-size) / 2 * -1);
+  margin-top: calc(var(--spinner-size) / 2 * -1);
+  position: absolute;
+  top: calc(50% + 1px);
+  width: var(--spinner-size);
+  height: var(--spinner-size);
 }
 
-.emotion-109 {
+.emotion-108 {
   display: block;
   width: 257px;
 }
 
 @media screen and (max-width: 724px) {
-  .emotion-109 {
+  .emotion-108 {
     width: 160px;
     z-index: 500;
   }
 }
 
-.emotion-108 {
+.emotion-107 {
   fill: none;
   width: 100%;
 }
 
-.emotion-110 {
+.emotion-109 {
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
@@ -2113,28 +2108,28 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
   max-width: 1180px;
 }
 
-.emotion-110>hr {
+.emotion-109>hr {
   height: 2px;
   margin: 36px 0;
   background-color: var(--color-neutrals-200);
   border: none;
 }
 
-.emotion-137 {
+.emotion-136 {
   color: var(--secondary-text-color);
   background-color: var(--color-neutrals-050);
   z-index: 1;
 }
 
-.dark-mode .emotion-137 {
+.dark-mode .emotion-136 {
   background-color: var(--color-dark-050);
 }
 
-.emotion-137 a {
+.emotion-136 a {
   color: currentColor;
 }
 
-.emotion-132 {
+.emotion-131 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2153,7 +2148,7 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-132 {
+  .emotion-131 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -2164,27 +2159,27 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
   }
 }
 
-.emotion-131 {
+.emotion-130 {
   fill: none;
   width: 150px;
   display: block;
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-131 {
+  .emotion-130 {
     margin-bottom: 1rem;
   }
 }
 
-.emotion-136 {
+.emotion-135 {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.dark-mode .emotion-136 {
+.dark-mode .emotion-135 {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-135 {
+.emotion-134 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2202,7 +2197,7 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-135 {
+  .emotion-134 {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
@@ -2214,14 +2209,14 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
   }
 }
 
-.emotion-133 {
+.emotion-132 {
   grid-area: copyright;
   text-transform: uppercase;
   font-size: 0.5rem;
   letter-spacing: 0.1rem;
 }
 
-.emotion-134 {
+.emotion-133 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2237,20 +2232,20 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
   grid-area: legal;
 }
 
-.emotion-134 a {
+.emotion-133 a {
   margin-left: 0.75rem;
   white-space: nowrap;
 }
 
 <div
-  className="emotion-138"
+  className="emotion-137"
 >
   <div
-    className=" emotion-87"
+    className=" emotion-86"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-86"
+      className="emotion-85"
     >
       <div
         className="emotion-28"
@@ -2530,7 +2525,7 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
         </ul>
       </nav>
       <ul
-        className="emotion-85"
+        className="emotion-84"
       >
         <li
           className="emotion-75"
@@ -2645,21 +2640,13 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
           </a>
         </li>
         <li
-          className="emotion-84"
+          className="emotion-83"
         >
-          <a
-            className="emotion-82 emotion-55"
-            href="https://newrelic.com/signup"
-            onClick={[Function]}
-            rel="noopener"
-            size="extraSmall"
-            target="_blank"
-            variant="primary"
-          >
-            <span>
-              Free account
-            </span>
-          </a>
+          <div
+            aria-busy={true}
+            aria-label="Loading"
+            className="emotion-82"
+          />
         </li>
       </ul>
     </div>
@@ -2669,11 +2656,11 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
         "
   >
     <a
-      className="emotion-109"
+      className="emotion-108"
       href="/"
     >
       <svg
-        className="emotion-108"
+        className="emotion-107"
         viewBox="0 0 79 15"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -2794,7 +2781,7 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
     </div>
   </header>
   <main
-    className="emotion-110"
+    className="emotion-109"
   >
     <div>
       <div
@@ -2831,17 +2818,17 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
     </div>
   </main>
   <footer
-    className="emotion-137"
+    className="emotion-136"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-132"
+      className="emotion-131"
     >
       <a
         href="/"
       >
         <svg
-          className="emotion-131"
+          className="emotion-130"
           viewBox="0 0 79 15"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -2894,18 +2881,18 @@ exports[`Data Collection Agents Page Renders correctly 1`] = `
       <div />
     </div>
     <div
-      className="emotion-136"
+      className="emotion-135"
     >
       <div
-        className="emotion-135"
+        className="emotion-134"
       >
         <div
-          className="emotion-133"
+          className="emotion-132"
         >
           Copyright © 2021 New Relic Inc.
         </div>
         <div
-          className="emotion-134"
+          className="emotion-133"
         >
           <a
             href="https://newrelic.com/about/careers"
diff --git a/src/pages/__tests__/__snapshots__/external-projects.spec.js.snap b/src/pages/__tests__/__snapshots__/external-projects.spec.js.snap
index 16f546b0f5..cb1469f494 100644
--- a/src/pages/__tests__/__snapshots__/external-projects.spec.js.snap
+++ b/src/pages/__tests__/__snapshots__/external-projects.spec.js.snap
@@ -1,7 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`External Projects Page Renders correctly 1`] = `
-.emotion-138 {
+@keyframes animation-0 {
+  to {
+    -webkit-transform: rotate(1turn);
+    -moz-transform: rotate(1turn);
+    -ms-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+.emotion-137 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14,7 +23,7 @@ exports[`External Projects Page Renders correctly 1`] = `
   position: relative;
 }
 
-.emotion-87 {
+.emotion-86 {
   background-color: var(--color-neutrals-100);
   position: -webkit-sticky;
   position: sticky;
@@ -23,20 +32,20 @@ exports[`External Projects Page Renders correctly 1`] = `
   z-index: 700;
 }
 
-.dark-mode .emotion-87 {
+.dark-mode .emotion-86 {
   background-color: var(--color-dark-100);
 }
 
-.emotion-87 ul {
+.emotion-86 ul {
   line-height: 14px;
   font-size: 16px;
 }
 
-.emotion-87 a {
+.emotion-86 a {
   border-bottom: none;
 }
 
-.emotion-86 {
+.emotion-85 {
   height: var(--global-header-height);
   display: -webkit-box;
   display: -webkit-flex;
@@ -1775,7 +1784,7 @@ exports[`External Projects Page Renders correctly 1`] = `
   color: var(--color-dark-700);
 }
 
-.emotion-85 {
+.emotion-84 {
   margin: 0;
   margin-left: 1rem;
   padding: 0;
@@ -1793,18 +1802,18 @@ exports[`External Projects Page Renders correctly 1`] = `
   flex: 1;
 }
 
-.emotion-85 >li {
+.emotion-84 >li {
   -webkit-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   color: var(--secondary-text-color);
 }
 
-.emotion-85 >li:not(:first-of-type) {
+.emotion-84 >li:not(:first-of-type) {
   margin-left: 0.5rem;
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-85 {
+  .emotion-84 {
     -webkit-flex: unset;
     -ms-flex: unset;
     flex: unset;
@@ -2037,7 +2046,7 @@ exports[`External Projects Page Renders correctly 1`] = `
   }
 }
 
-.emotion-84 {
+.emotion-83 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2045,61 +2054,47 @@ exports[`External Projects Page Renders correctly 1`] = `
 }
 
 .emotion-82 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border-radius: 3px;
-  font-family: var(--primary-font-family);
-  line-height: 1;
-  cursor: pointer;
-  border: 1px solid transparent;
-  -webkit-transition: all 0.15s ease-out;
-  transition: all 0.15s ease-out;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--color-white);
-  background-color: var(--color-brand-600);
-  font-size: 0.625rem;
-  padding: 0.375rem 0.625rem;
-  border-radius: 0.125rem;
+  --spinner-size: 1rem;
+  display: inline-block;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
-.emotion-82:hover {
-  color: var(--color-white);
-  background-color: var(--color-brand-500);
+.emotion-82:after {
+  -webkit-animation: animation-0 0.5s linear infinite;
+  animation: animation-0 0.5s linear infinite;
+  border-radius: 50%;
+  border-right: 1px solid transparent;
+  border-top: 1px solid;
+  content: '';
+  left: calc(50% + 1px);
+  margin-left: calc(var(--spinner-size) / 2 * -1);
+  margin-top: calc(var(--spinner-size) / 2 * -1);
+  position: absolute;
+  top: calc(50% + 1px);
+  width: var(--spinner-size);
+  height: var(--spinner-size);
 }
 
-.emotion-109 {
+.emotion-108 {
   display: block;
   width: 257px;
 }
 
 @media screen and (max-width: 724px) {
-  .emotion-109 {
+  .emotion-108 {
     width: 160px;
     z-index: 500;
   }
 }
 
-.emotion-108 {
+.emotion-107 {
   fill: none;
   width: 100%;
 }
 
-.emotion-110 {
+.emotion-109 {
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
@@ -2113,28 +2108,28 @@ exports[`External Projects Page Renders correctly 1`] = `
   max-width: 1180px;
 }
 
-.emotion-110>hr {
+.emotion-109>hr {
   height: 2px;
   margin: 36px 0;
   background-color: var(--color-neutrals-200);
   border: none;
 }
 
-.emotion-137 {
+.emotion-136 {
   color: var(--secondary-text-color);
   background-color: var(--color-neutrals-050);
   z-index: 1;
 }
 
-.dark-mode .emotion-137 {
+.dark-mode .emotion-136 {
   background-color: var(--color-dark-050);
 }
 
-.emotion-137 a {
+.emotion-136 a {
   color: currentColor;
 }
 
-.emotion-132 {
+.emotion-131 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2153,7 +2148,7 @@ exports[`External Projects Page Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-132 {
+  .emotion-131 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -2164,27 +2159,27 @@ exports[`External Projects Page Renders correctly 1`] = `
   }
 }
 
-.emotion-131 {
+.emotion-130 {
   fill: none;
   width: 150px;
   display: block;
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-131 {
+  .emotion-130 {
     margin-bottom: 1rem;
   }
 }
 
-.emotion-136 {
+.emotion-135 {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.dark-mode .emotion-136 {
+.dark-mode .emotion-135 {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-135 {
+.emotion-134 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2202,7 +2197,7 @@ exports[`External Projects Page Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-135 {
+  .emotion-134 {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
@@ -2214,14 +2209,14 @@ exports[`External Projects Page Renders correctly 1`] = `
   }
 }
 
-.emotion-133 {
+.emotion-132 {
   grid-area: copyright;
   text-transform: uppercase;
   font-size: 0.5rem;
   letter-spacing: 0.1rem;
 }
 
-.emotion-134 {
+.emotion-133 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2237,20 +2232,20 @@ exports[`External Projects Page Renders correctly 1`] = `
   grid-area: legal;
 }
 
-.emotion-134 a {
+.emotion-133 a {
   margin-left: 0.75rem;
   white-space: nowrap;
 }
 
 <div
-  className="emotion-138"
+  className="emotion-137"
 >
   <div
-    className=" emotion-87"
+    className=" emotion-86"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-86"
+      className="emotion-85"
     >
       <div
         className="emotion-28"
@@ -2530,7 +2525,7 @@ exports[`External Projects Page Renders correctly 1`] = `
         </ul>
       </nav>
       <ul
-        className="emotion-85"
+        className="emotion-84"
       >
         <li
           className="emotion-75"
@@ -2645,21 +2640,13 @@ exports[`External Projects Page Renders correctly 1`] = `
           </a>
         </li>
         <li
-          className="emotion-84"
+          className="emotion-83"
         >
-          <a
-            className="emotion-82 emotion-55"
-            href="https://newrelic.com/signup"
-            onClick={[Function]}
-            rel="noopener"
-            size="extraSmall"
-            target="_blank"
-            variant="primary"
-          >
-            <span>
-              Free account
-            </span>
-          </a>
+          <div
+            aria-busy={true}
+            aria-label="Loading"
+            className="emotion-82"
+          />
         </li>
       </ul>
     </div>
@@ -2669,11 +2656,11 @@ exports[`External Projects Page Renders correctly 1`] = `
         "
   >
     <a
-      className="emotion-109"
+      className="emotion-108"
       href="/"
     >
       <svg
-        className="emotion-108"
+        className="emotion-107"
         viewBox="0 0 79 15"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -2794,22 +2781,22 @@ exports[`External Projects Page Renders correctly 1`] = `
     </div>
   </header>
   <main
-    className="emotion-110"
+    className="emotion-109"
   >
     <div />
   </main>
   <footer
-    className="emotion-137"
+    className="emotion-136"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-132"
+      className="emotion-131"
     >
       <a
         href="/"
       >
         <svg
-          className="emotion-131"
+          className="emotion-130"
           viewBox="0 0 79 15"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -2862,18 +2849,18 @@ exports[`External Projects Page Renders correctly 1`] = `
       <div />
     </div>
     <div
-      className="emotion-136"
+      className="emotion-135"
     >
       <div
-        className="emotion-135"
+        className="emotion-134"
       >
         <div
-          className="emotion-133"
+          className="emotion-132"
         >
           Copyright © 2021 New Relic Inc.
         </div>
         <div
-          className="emotion-134"
+          className="emotion-133"
         >
           <a
             href="https://newrelic.com/about/careers"
diff --git a/src/pages/__tests__/__snapshots__/index.spec.js.snap b/src/pages/__tests__/__snapshots__/index.spec.js.snap
index 211e82cc7c..6fdb34c2c4 100644
--- a/src/pages/__tests__/__snapshots__/index.spec.js.snap
+++ b/src/pages/__tests__/__snapshots__/index.spec.js.snap
@@ -1,7 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HomePage Renders correctly 1`] = `
-.emotion-141 {
+@keyframes animation-0 {
+  to {
+    -webkit-transform: rotate(1turn);
+    -moz-transform: rotate(1turn);
+    -ms-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+.emotion-140 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14,7 +23,7 @@ exports[`HomePage Renders correctly 1`] = `
   position: relative;
 }
 
-.emotion-87 {
+.emotion-86 {
   background-color: var(--color-neutrals-100);
   position: -webkit-sticky;
   position: sticky;
@@ -23,20 +32,20 @@ exports[`HomePage Renders correctly 1`] = `
   z-index: 700;
 }
 
-.dark-mode .emotion-87 {
+.dark-mode .emotion-86 {
   background-color: var(--color-dark-100);
 }
 
-.emotion-87 ul {
+.emotion-86 ul {
   line-height: 14px;
   font-size: 16px;
 }
 
-.emotion-87 a {
+.emotion-86 a {
   border-bottom: none;
 }
 
-.emotion-86 {
+.emotion-85 {
   height: var(--global-header-height);
   display: -webkit-box;
   display: -webkit-flex;
@@ -1775,7 +1784,7 @@ exports[`HomePage Renders correctly 1`] = `
   color: var(--color-dark-700);
 }
 
-.emotion-85 {
+.emotion-84 {
   margin: 0;
   margin-left: 1rem;
   padding: 0;
@@ -1793,18 +1802,18 @@ exports[`HomePage Renders correctly 1`] = `
   flex: 1;
 }
 
-.emotion-85 >li {
+.emotion-84 >li {
   -webkit-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   color: var(--secondary-text-color);
 }
 
-.emotion-85 >li:not(:first-of-type) {
+.emotion-84 >li:not(:first-of-type) {
   margin-left: 0.5rem;
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-85 {
+  .emotion-84 {
     -webkit-flex: unset;
     -ms-flex: unset;
     flex: unset;
@@ -2037,7 +2046,7 @@ exports[`HomePage Renders correctly 1`] = `
   }
 }
 
-.emotion-84 {
+.emotion-83 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2045,61 +2054,47 @@ exports[`HomePage Renders correctly 1`] = `
 }
 
 .emotion-82 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border-radius: 3px;
-  font-family: var(--primary-font-family);
-  line-height: 1;
-  cursor: pointer;
-  border: 1px solid transparent;
-  -webkit-transition: all 0.15s ease-out;
-  transition: all 0.15s ease-out;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--color-white);
-  background-color: var(--color-brand-600);
-  font-size: 0.625rem;
-  padding: 0.375rem 0.625rem;
-  border-radius: 0.125rem;
+  --spinner-size: 1rem;
+  display: inline-block;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
-.emotion-82:hover {
-  color: var(--color-white);
-  background-color: var(--color-brand-500);
+.emotion-82:after {
+  -webkit-animation: animation-0 0.5s linear infinite;
+  animation: animation-0 0.5s linear infinite;
+  border-radius: 50%;
+  border-right: 1px solid transparent;
+  border-top: 1px solid;
+  content: '';
+  left: calc(50% + 1px);
+  margin-left: calc(var(--spinner-size) / 2 * -1);
+  margin-top: calc(var(--spinner-size) / 2 * -1);
+  position: absolute;
+  top: calc(50% + 1px);
+  width: var(--spinner-size);
+  height: var(--spinner-size);
 }
 
-.emotion-109 {
+.emotion-108 {
   display: block;
   width: 257px;
 }
 
 @media screen and (max-width: 724px) {
-  .emotion-109 {
+  .emotion-108 {
     width: 160px;
     z-index: 500;
   }
 }
 
-.emotion-108 {
+.emotion-107 {
   fill: none;
   width: 100%;
 }
 
-.emotion-113 {
+.emotion-112 {
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
@@ -2113,21 +2108,21 @@ exports[`HomePage Renders correctly 1`] = `
   max-width: 1180px;
 }
 
-.emotion-113>hr {
+.emotion-112>hr {
   height: 2px;
   margin: 36px 0;
   background-color: var(--color-neutrals-200);
   border: none;
 }
 
-.emotion-110 {
+.emotion-109 {
   font-size: 40px;
   line-height: 110%;
   font-weight: 600;
   color: var(--color-neutrals-900);
 }
 
-.emotion-111 {
+.emotion-110 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2157,34 +2152,34 @@ exports[`HomePage Renders correctly 1`] = `
   background-color: var(--color-brand-600);
 }
 
-.emotion-111:hover {
+.emotion-110:hover {
   color: var(--color-white);
   background-color: var(--color-brand-500);
 }
 
-.dark-mode .emotion-111 {
+.dark-mode .emotion-110 {
   border-color: transparent;
 }
 
-.emotion-111.emotion-111.emotion-111:after {
+.emotion-110.emotion-110.emotion-110:after {
   display: none;
 }
 
-.emotion-140 {
+.emotion-139 {
   color: var(--secondary-text-color);
   background-color: var(--color-neutrals-050);
   z-index: 1;
 }
 
-.dark-mode .emotion-140 {
+.dark-mode .emotion-139 {
   background-color: var(--color-dark-050);
 }
 
-.emotion-140 a {
+.emotion-139 a {
   color: currentColor;
 }
 
-.emotion-135 {
+.emotion-134 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2203,7 +2198,7 @@ exports[`HomePage Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-135 {
+  .emotion-134 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -2214,27 +2209,27 @@ exports[`HomePage Renders correctly 1`] = `
   }
 }
 
-.emotion-134 {
+.emotion-133 {
   fill: none;
   width: 150px;
   display: block;
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-134 {
+  .emotion-133 {
     margin-bottom: 1rem;
   }
 }
 
-.emotion-139 {
+.emotion-138 {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.dark-mode .emotion-139 {
+.dark-mode .emotion-138 {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-138 {
+.emotion-137 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2252,7 +2247,7 @@ exports[`HomePage Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-138 {
+  .emotion-137 {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
@@ -2264,14 +2259,14 @@ exports[`HomePage Renders correctly 1`] = `
   }
 }
 
-.emotion-136 {
+.emotion-135 {
   grid-area: copyright;
   text-transform: uppercase;
   font-size: 0.5rem;
   letter-spacing: 0.1rem;
 }
 
-.emotion-137 {
+.emotion-136 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2287,20 +2282,20 @@ exports[`HomePage Renders correctly 1`] = `
   grid-area: legal;
 }
 
-.emotion-137 a {
+.emotion-136 a {
   margin-left: 0.75rem;
   white-space: nowrap;
 }
 
 <div
-  className="emotion-141"
+  className="emotion-140"
 >
   <div
-    className=" emotion-87"
+    className=" emotion-86"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-86"
+      className="emotion-85"
     >
       <div
         className="emotion-28"
@@ -2580,7 +2575,7 @@ exports[`HomePage Renders correctly 1`] = `
         </ul>
       </nav>
       <ul
-        className="emotion-85"
+        className="emotion-84"
       >
         <li
           className="emotion-75"
@@ -2695,21 +2690,13 @@ exports[`HomePage Renders correctly 1`] = `
           </a>
         </li>
         <li
-          className="emotion-84"
+          className="emotion-83"
         >
-          <a
-            className="emotion-82 emotion-55"
-            href="https://newrelic.com/signup"
-            onClick={[Function]}
-            rel="noopener"
-            size="extraSmall"
-            target="_blank"
-            variant="primary"
-          >
-            <span>
-              Free account
-            </span>
-          </a>
+          <div
+            aria-busy={true}
+            aria-label="Loading"
+            className="emotion-82"
+          />
         </li>
       </ul>
     </div>
@@ -2719,11 +2706,11 @@ exports[`HomePage Renders correctly 1`] = `
         "
   >
     <a
-      className="emotion-109"
+      className="emotion-108"
       href="/"
     >
       <svg
-        className="emotion-108"
+        className="emotion-107"
         viewBox="0 0 79 15"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -2844,12 +2831,12 @@ exports[`HomePage Renders correctly 1`] = `
     </div>
   </header>
   <main
-    className="emotion-113"
+    className="emotion-112"
   >
     <div>
       <div>
         <h2
-          className="emotion-110"
+          className="emotion-109"
           data-testid="homepageHeroHeading"
         >
           Open standards.
@@ -2962,7 +2949,7 @@ exports[`HomePage Renders correctly 1`] = `
         onMouseOver={[Function]}
       >
         <a
-          className="emotion-111 emotion-55"
+          className="emotion-110 emotion-55"
           href="/instrumentation"
         >
           <span>
@@ -3001,17 +2988,17 @@ exports[`HomePage Renders correctly 1`] = `
     </div>
   </main>
   <footer
-    className="emotion-140"
+    className="emotion-139"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-135"
+      className="emotion-134"
     >
       <a
         href="/"
       >
         <svg
-          className="emotion-134"
+          className="emotion-133"
           viewBox="0 0 79 15"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -3064,18 +3051,18 @@ exports[`HomePage Renders correctly 1`] = `
       <div />
     </div>
     <div
-      className="emotion-139"
+      className="emotion-138"
     >
       <div
-        className="emotion-138"
+        className="emotion-137"
       >
         <div
-          className="emotion-136"
+          className="emotion-135"
         >
           Copyright © 2021 New Relic Inc.
         </div>
         <div
-          className="emotion-137"
+          className="emotion-136"
         >
           <a
             href="https://newrelic.com/about/careers"
diff --git a/src/pages/__tests__/__snapshots__/oss-category.spec.js.snap b/src/pages/__tests__/__snapshots__/oss-category.spec.js.snap
index 3cf4d6c7f5..1c4704d253 100644
--- a/src/pages/__tests__/__snapshots__/oss-category.spec.js.snap
+++ b/src/pages/__tests__/__snapshots__/oss-category.spec.js.snap
@@ -1,7 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OSS Category Page Renders correctly 1`] = `
-.emotion-139 {
+@keyframes animation-0 {
+  to {
+    -webkit-transform: rotate(1turn);
+    -moz-transform: rotate(1turn);
+    -ms-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+.emotion-138 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14,7 +23,7 @@ exports[`OSS Category Page Renders correctly 1`] = `
   position: relative;
 }
 
-.emotion-87 {
+.emotion-86 {
   background-color: var(--color-neutrals-100);
   position: -webkit-sticky;
   position: sticky;
@@ -23,20 +32,20 @@ exports[`OSS Category Page Renders correctly 1`] = `
   z-index: 700;
 }
 
-.dark-mode .emotion-87 {
+.dark-mode .emotion-86 {
   background-color: var(--color-dark-100);
 }
 
-.emotion-87 ul {
+.emotion-86 ul {
   line-height: 14px;
   font-size: 16px;
 }
 
-.emotion-87 a {
+.emotion-86 a {
   border-bottom: none;
 }
 
-.emotion-86 {
+.emotion-85 {
   height: var(--global-header-height);
   display: -webkit-box;
   display: -webkit-flex;
@@ -1775,7 +1784,7 @@ exports[`OSS Category Page Renders correctly 1`] = `
   color: var(--color-dark-700);
 }
 
-.emotion-85 {
+.emotion-84 {
   margin: 0;
   margin-left: 1rem;
   padding: 0;
@@ -1793,18 +1802,18 @@ exports[`OSS Category Page Renders correctly 1`] = `
   flex: 1;
 }
 
-.emotion-85 >li {
+.emotion-84 >li {
   -webkit-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   color: var(--secondary-text-color);
 }
 
-.emotion-85 >li:not(:first-of-type) {
+.emotion-84 >li:not(:first-of-type) {
   margin-left: 0.5rem;
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-85 {
+  .emotion-84 {
     -webkit-flex: unset;
     -ms-flex: unset;
     flex: unset;
@@ -2037,7 +2046,7 @@ exports[`OSS Category Page Renders correctly 1`] = `
   }
 }
 
-.emotion-84 {
+.emotion-83 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2045,61 +2054,47 @@ exports[`OSS Category Page Renders correctly 1`] = `
 }
 
 .emotion-82 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border-radius: 3px;
-  font-family: var(--primary-font-family);
-  line-height: 1;
-  cursor: pointer;
-  border: 1px solid transparent;
-  -webkit-transition: all 0.15s ease-out;
-  transition: all 0.15s ease-out;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--color-white);
-  background-color: var(--color-brand-600);
-  font-size: 0.625rem;
-  padding: 0.375rem 0.625rem;
-  border-radius: 0.125rem;
+  --spinner-size: 1rem;
+  display: inline-block;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
-.emotion-82:hover {
-  color: var(--color-white);
-  background-color: var(--color-brand-500);
+.emotion-82:after {
+  -webkit-animation: animation-0 0.5s linear infinite;
+  animation: animation-0 0.5s linear infinite;
+  border-radius: 50%;
+  border-right: 1px solid transparent;
+  border-top: 1px solid;
+  content: '';
+  left: calc(50% + 1px);
+  margin-left: calc(var(--spinner-size) / 2 * -1);
+  margin-top: calc(var(--spinner-size) / 2 * -1);
+  position: absolute;
+  top: calc(50% + 1px);
+  width: var(--spinner-size);
+  height: var(--spinner-size);
 }
 
-.emotion-109 {
+.emotion-108 {
   display: block;
   width: 257px;
 }
 
 @media screen and (max-width: 724px) {
-  .emotion-109 {
+  .emotion-108 {
     width: 160px;
     z-index: 500;
   }
 }
 
-.emotion-108 {
+.emotion-107 {
   fill: none;
   width: 100%;
 }
 
-.emotion-111 {
+.emotion-110 {
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
@@ -2112,32 +2107,32 @@ exports[`OSS Category Page Renders correctly 1`] = `
   flex-shrink: 0;
 }
 
-.emotion-111>hr {
+.emotion-110>hr {
   height: 2px;
   margin: 36px 0;
   background-color: var(--color-neutrals-200);
   border: none;
 }
 
-.emotion-110 {
+.emotion-109 {
   margin-bottom: 1rem;
 }
 
-.emotion-138 {
+.emotion-137 {
   color: var(--secondary-text-color);
   background-color: var(--color-neutrals-050);
   z-index: 1;
 }
 
-.dark-mode .emotion-138 {
+.dark-mode .emotion-137 {
   background-color: var(--color-dark-050);
 }
 
-.emotion-138 a {
+.emotion-137 a {
   color: currentColor;
 }
 
-.emotion-133 {
+.emotion-132 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2156,7 +2151,7 @@ exports[`OSS Category Page Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-133 {
+  .emotion-132 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -2167,27 +2162,27 @@ exports[`OSS Category Page Renders correctly 1`] = `
   }
 }
 
-.emotion-132 {
+.emotion-131 {
   fill: none;
   width: 150px;
   display: block;
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-132 {
+  .emotion-131 {
     margin-bottom: 1rem;
   }
 }
 
-.emotion-137 {
+.emotion-136 {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.dark-mode .emotion-137 {
+.dark-mode .emotion-136 {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-136 {
+.emotion-135 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2205,7 +2200,7 @@ exports[`OSS Category Page Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-136 {
+  .emotion-135 {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
@@ -2217,14 +2212,14 @@ exports[`OSS Category Page Renders correctly 1`] = `
   }
 }
 
-.emotion-134 {
+.emotion-133 {
   grid-area: copyright;
   text-transform: uppercase;
   font-size: 0.5rem;
   letter-spacing: 0.1rem;
 }
 
-.emotion-135 {
+.emotion-134 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2240,20 +2235,20 @@ exports[`OSS Category Page Renders correctly 1`] = `
   grid-area: legal;
 }
 
-.emotion-135 a {
+.emotion-134 a {
   margin-left: 0.75rem;
   white-space: nowrap;
 }
 
 <div
-  className="emotion-139"
+  className="emotion-138"
 >
   <div
-    className=" emotion-87"
+    className=" emotion-86"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-86"
+      className="emotion-85"
     >
       <div
         className="emotion-28"
@@ -2533,7 +2528,7 @@ exports[`OSS Category Page Renders correctly 1`] = `
         </ul>
       </nav>
       <ul
-        className="emotion-85"
+        className="emotion-84"
       >
         <li
           className="emotion-75"
@@ -2648,21 +2643,13 @@ exports[`OSS Category Page Renders correctly 1`] = `
           </a>
         </li>
         <li
-          className="emotion-84"
+          className="emotion-83"
         >
-          <a
-            className="emotion-82 emotion-55"
-            href="https://newrelic.com/signup"
-            onClick={[Function]}
-            rel="noopener"
-            size="extraSmall"
-            target="_blank"
-            variant="primary"
-          >
-            <span>
-              Free account
-            </span>
-          </a>
+          <div
+            aria-busy={true}
+            aria-label="Loading"
+            className="emotion-82"
+          />
         </li>
       </ul>
     </div>
@@ -2672,11 +2659,11 @@ exports[`OSS Category Page Renders correctly 1`] = `
         "
   >
     <a
-      className="emotion-109"
+      className="emotion-108"
       href="/"
     >
       <svg
-        className="emotion-108"
+        className="emotion-107"
         viewBox="0 0 79 15"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -2797,7 +2784,7 @@ exports[`OSS Category Page Renders correctly 1`] = `
     </div>
   </header>
   <main
-    className="emotion-111"
+    className="emotion-110"
   >
     <div
       className="primary-content"
@@ -2810,7 +2797,7 @@ exports[`OSS Category Page Renders correctly 1`] = `
             Categories
           </h4>
           <ul
-            className="emotion-110"
+            className="emotion-109"
           >
             <li>
               <a
@@ -3186,17 +3173,17 @@ exports[`OSS Category Page Renders correctly 1`] = `
     </div>
   </main>
   <footer
-    className="emotion-138"
+    className="emotion-137"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-133"
+      className="emotion-132"
     >
       <a
         href="/"
       >
         <svg
-          className="emotion-132"
+          className="emotion-131"
           viewBox="0 0 79 15"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -3249,18 +3236,18 @@ exports[`OSS Category Page Renders correctly 1`] = `
       <div />
     </div>
     <div
-      className="emotion-137"
+      className="emotion-136"
     >
       <div
-        className="emotion-136"
+        className="emotion-135"
       >
         <div
-          className="emotion-134"
+          className="emotion-133"
         >
           Copyright © 2021 New Relic Inc.
         </div>
         <div
-          className="emotion-135"
+          className="emotion-134"
         >
           <a
             href="https://newrelic.com/about/careers"
diff --git a/src/templates/__tests__/__snapshots__/external-project-page.spec.js.snap b/src/templates/__tests__/__snapshots__/external-project-page.spec.js.snap
index b00a81ae36..90e50f2d35 100644
--- a/src/templates/__tests__/__snapshots__/external-project-page.spec.js.snap
+++ b/src/templates/__tests__/__snapshots__/external-project-page.spec.js.snap
@@ -1,7 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Adopt OpenJDK Renders correctly 1`] = `
-.emotion-144 {
+@keyframes animation-0 {
+  to {
+    -webkit-transform: rotate(1turn);
+    -moz-transform: rotate(1turn);
+    -ms-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+.emotion-143 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14,7 +23,7 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
   position: relative;
 }
 
-.emotion-87 {
+.emotion-86 {
   background-color: var(--color-neutrals-100);
   position: -webkit-sticky;
   position: sticky;
@@ -23,20 +32,20 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
   z-index: 700;
 }
 
-.dark-mode .emotion-87 {
+.dark-mode .emotion-86 {
   background-color: var(--color-dark-100);
 }
 
-.emotion-87 ul {
+.emotion-86 ul {
   line-height: 14px;
   font-size: 16px;
 }
 
-.emotion-87 a {
+.emotion-86 a {
   border-bottom: none;
 }
 
-.emotion-86 {
+.emotion-85 {
   height: var(--global-header-height);
   display: -webkit-box;
   display: -webkit-flex;
@@ -1775,7 +1784,7 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
   color: var(--color-dark-700);
 }
 
-.emotion-85 {
+.emotion-84 {
   margin: 0;
   margin-left: 1rem;
   padding: 0;
@@ -1793,18 +1802,18 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
   flex: 1;
 }
 
-.emotion-85 >li {
+.emotion-84 >li {
   -webkit-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   color: var(--secondary-text-color);
 }
 
-.emotion-85 >li:not(:first-of-type) {
+.emotion-84 >li:not(:first-of-type) {
   margin-left: 0.5rem;
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-85 {
+  .emotion-84 {
     -webkit-flex: unset;
     -ms-flex: unset;
     flex: unset;
@@ -2037,7 +2046,7 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
   }
 }
 
-.emotion-84 {
+.emotion-83 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2045,61 +2054,47 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
 }
 
 .emotion-82 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border-radius: 3px;
-  font-family: var(--primary-font-family);
-  line-height: 1;
-  cursor: pointer;
-  border: 1px solid transparent;
-  -webkit-transition: all 0.15s ease-out;
-  transition: all 0.15s ease-out;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--color-white);
-  background-color: var(--color-brand-600);
-  font-size: 0.625rem;
-  padding: 0.375rem 0.625rem;
-  border-radius: 0.125rem;
+  --spinner-size: 1rem;
+  display: inline-block;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
-.emotion-82:hover {
-  color: var(--color-white);
-  background-color: var(--color-brand-500);
+.emotion-82:after {
+  -webkit-animation: animation-0 0.5s linear infinite;
+  animation: animation-0 0.5s linear infinite;
+  border-radius: 50%;
+  border-right: 1px solid transparent;
+  border-top: 1px solid;
+  content: '';
+  left: calc(50% + 1px);
+  margin-left: calc(var(--spinner-size) / 2 * -1);
+  margin-top: calc(var(--spinner-size) / 2 * -1);
+  position: absolute;
+  top: calc(50% + 1px);
+  width: var(--spinner-size);
+  height: var(--spinner-size);
 }
 
-.emotion-109 {
+.emotion-108 {
   display: block;
   width: 257px;
 }
 
 @media screen and (max-width: 724px) {
-  .emotion-109 {
+  .emotion-108 {
     width: 160px;
     z-index: 500;
   }
 }
 
-.emotion-108 {
+.emotion-107 {
   fill: none;
   width: 100%;
 }
 
-.emotion-116 {
+.emotion-115 {
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
@@ -2112,18 +2107,18 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
   flex-shrink: 0;
 }
 
-.emotion-116>hr {
+.emotion-115>hr {
   height: 2px;
   margin: 36px 0;
   background-color: var(--color-neutrals-200);
   border: none;
 }
 
-.emotion-115 {
+.emotion-114 {
   margin-bottom: 1rem;
 }
 
-.emotion-110 {
+.emotion-109 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2153,12 +2148,12 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
   background-color: var(--color-brand-600);
 }
 
-.emotion-110:hover {
+.emotion-109:hover {
   color: var(--color-white);
   background-color: var(--color-brand-500);
 }
 
-.emotion-113 {
+.emotion-112 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2188,33 +2183,33 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
   background: transparent;
 }
 
-.emotion-113:hover {
+.emotion-112:hover {
   color: var(--link-hover-color);
 }
 
-.dark-mode .emotion-113 {
+.dark-mode .emotion-112 {
   border-color: transparent;
 }
 
-.emotion-112 {
+.emotion-111 {
   margin-right: 0.5rem;
 }
 
-.emotion-143 {
+.emotion-142 {
   color: var(--secondary-text-color);
   background-color: var(--color-neutrals-050);
   z-index: 1;
 }
 
-.dark-mode .emotion-143 {
+.dark-mode .emotion-142 {
   background-color: var(--color-dark-050);
 }
 
-.emotion-143 a {
+.emotion-142 a {
   color: currentColor;
 }
 
-.emotion-138 {
+.emotion-137 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2233,7 +2228,7 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-138 {
+  .emotion-137 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -2244,27 +2239,27 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
   }
 }
 
-.emotion-137 {
+.emotion-136 {
   fill: none;
   width: 150px;
   display: block;
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-137 {
+  .emotion-136 {
     margin-bottom: 1rem;
   }
 }
 
-.emotion-142 {
+.emotion-141 {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.dark-mode .emotion-142 {
+.dark-mode .emotion-141 {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-141 {
+.emotion-140 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2282,7 +2277,7 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-141 {
+  .emotion-140 {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
@@ -2294,14 +2289,14 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
   }
 }
 
-.emotion-139 {
+.emotion-138 {
   grid-area: copyright;
   text-transform: uppercase;
   font-size: 0.5rem;
   letter-spacing: 0.1rem;
 }
 
-.emotion-140 {
+.emotion-139 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2317,20 +2312,20 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
   grid-area: legal;
 }
 
-.emotion-140 a {
+.emotion-139 a {
   margin-left: 0.75rem;
   white-space: nowrap;
 }
 
 <div
-  className="emotion-144"
+  className="emotion-143"
 >
   <div
-    className=" emotion-87"
+    className=" emotion-86"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-86"
+      className="emotion-85"
     >
       <div
         className="emotion-28"
@@ -2610,7 +2605,7 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
         </ul>
       </nav>
       <ul
-        className="emotion-85"
+        className="emotion-84"
       >
         <li
           className="emotion-75"
@@ -2725,21 +2720,13 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
           </a>
         </li>
         <li
-          className="emotion-84"
+          className="emotion-83"
         >
-          <a
-            className="emotion-82 emotion-55"
-            href="https://newrelic.com/signup"
-            onClick={[Function]}
-            rel="noopener"
-            size="extraSmall"
-            target="_blank"
-            variant="primary"
-          >
-            <span>
-              Free account
-            </span>
-          </a>
+          <div
+            aria-busy={true}
+            aria-label="Loading"
+            className="emotion-82"
+          />
         </li>
       </ul>
     </div>
@@ -2749,11 +2736,11 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
         undefined"
   >
     <a
-      className="emotion-109"
+      className="emotion-108"
       href="/"
     >
       <svg
-        className="emotion-108"
+        className="emotion-107"
         viewBox="0 0 79 15"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -2874,7 +2861,7 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
     </div>
   </header>
   <main
-    className="emotion-116"
+    className="emotion-115"
   >
     <div
       className="primary-content"
@@ -2919,11 +2906,11 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
       >
         <div>
           <div
-            className="emotion-115"
+            className="emotion-114"
           >
             <div>
               <a
-                className="emotion-110 emotion-55"
+                className="emotion-109 emotion-55"
                 href="https://github.com/AdoptOpenJDK"
                 rel="noopener noreferrer"
                 target="__blank"
@@ -2931,13 +2918,13 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
                 View Website
               </a>
               <a
-                className="emotion-113 emotion-55"
+                className="emotion-112 emotion-55"
                 href="https://github.com/AdoptOpenJDK"
                 rel="noopener noreferrer"
               >
                 <img
                   alt="GitHub logo"
-                  className="emotion-112"
+                  className="emotion-111"
                   src="test-file-stub"
                 />
                 GitHub
@@ -2952,17 +2939,17 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
     </div>
   </main>
   <footer
-    className="emotion-143"
+    className="emotion-142"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-138"
+      className="emotion-137"
     >
       <a
         href="/"
       >
         <svg
-          className="emotion-137"
+          className="emotion-136"
           viewBox="0 0 79 15"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -3015,18 +3002,18 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
       <div />
     </div>
     <div
-      className="emotion-142"
+      className="emotion-141"
     >
       <div
-        className="emotion-141"
+        className="emotion-140"
       >
         <div
-          className="emotion-139"
+          className="emotion-138"
         >
           Copyright © 2021 New Relic Inc.
         </div>
         <div
-          className="emotion-140"
+          className="emotion-139"
         >
           <a
             href="https://newrelic.com/about/careers"
@@ -3084,7 +3071,16 @@ exports[`Adopt OpenJDK Renders correctly 1`] = `
 `;
 
 exports[`Open Telemetry Page Renders correctly 1`] = `
-.emotion-144 {
+@keyframes animation-0 {
+  to {
+    -webkit-transform: rotate(1turn);
+    -moz-transform: rotate(1turn);
+    -ms-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+.emotion-143 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3097,7 +3093,7 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
   position: relative;
 }
 
-.emotion-87 {
+.emotion-86 {
   background-color: var(--color-neutrals-100);
   position: -webkit-sticky;
   position: sticky;
@@ -3106,20 +3102,20 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
   z-index: 700;
 }
 
-.dark-mode .emotion-87 {
+.dark-mode .emotion-86 {
   background-color: var(--color-dark-100);
 }
 
-.emotion-87 ul {
+.emotion-86 ul {
   line-height: 14px;
   font-size: 16px;
 }
 
-.emotion-87 a {
+.emotion-86 a {
   border-bottom: none;
 }
 
-.emotion-86 {
+.emotion-85 {
   height: var(--global-header-height);
   display: -webkit-box;
   display: -webkit-flex;
@@ -4858,7 +4854,7 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
   color: var(--color-dark-700);
 }
 
-.emotion-85 {
+.emotion-84 {
   margin: 0;
   margin-left: 1rem;
   padding: 0;
@@ -4876,18 +4872,18 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
   flex: 1;
 }
 
-.emotion-85 >li {
+.emotion-84 >li {
   -webkit-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   color: var(--secondary-text-color);
 }
 
-.emotion-85 >li:not(:first-of-type) {
+.emotion-84 >li:not(:first-of-type) {
   margin-left: 0.5rem;
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-85 {
+  .emotion-84 {
     -webkit-flex: unset;
     -ms-flex: unset;
     flex: unset;
@@ -5120,7 +5116,7 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
   }
 }
 
-.emotion-84 {
+.emotion-83 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5128,61 +5124,47 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
 }
 
 .emotion-82 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border-radius: 3px;
-  font-family: var(--primary-font-family);
-  line-height: 1;
-  cursor: pointer;
-  border: 1px solid transparent;
-  -webkit-transition: all 0.15s ease-out;
-  transition: all 0.15s ease-out;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--color-white);
-  background-color: var(--color-brand-600);
-  font-size: 0.625rem;
-  padding: 0.375rem 0.625rem;
-  border-radius: 0.125rem;
+  --spinner-size: 1rem;
+  display: inline-block;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
-.emotion-82:hover {
-  color: var(--color-white);
-  background-color: var(--color-brand-500);
+.emotion-82:after {
+  -webkit-animation: animation-0 0.5s linear infinite;
+  animation: animation-0 0.5s linear infinite;
+  border-radius: 50%;
+  border-right: 1px solid transparent;
+  border-top: 1px solid;
+  content: '';
+  left: calc(50% + 1px);
+  margin-left: calc(var(--spinner-size) / 2 * -1);
+  margin-top: calc(var(--spinner-size) / 2 * -1);
+  position: absolute;
+  top: calc(50% + 1px);
+  width: var(--spinner-size);
+  height: var(--spinner-size);
 }
 
-.emotion-109 {
+.emotion-108 {
   display: block;
   width: 257px;
 }
 
 @media screen and (max-width: 724px) {
-  .emotion-109 {
+  .emotion-108 {
     width: 160px;
     z-index: 500;
   }
 }
 
-.emotion-108 {
+.emotion-107 {
   fill: none;
   width: 100%;
 }
 
-.emotion-116 {
+.emotion-115 {
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
@@ -5195,18 +5177,18 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
   flex-shrink: 0;
 }
 
-.emotion-116>hr {
+.emotion-115>hr {
   height: 2px;
   margin: 36px 0;
   background-color: var(--color-neutrals-200);
   border: none;
 }
 
-.emotion-115 {
+.emotion-114 {
   margin-bottom: 1rem;
 }
 
-.emotion-110 {
+.emotion-109 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5236,12 +5218,12 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
   background-color: var(--color-brand-600);
 }
 
-.emotion-110:hover {
+.emotion-109:hover {
   color: var(--color-white);
   background-color: var(--color-brand-500);
 }
 
-.emotion-113 {
+.emotion-112 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5271,33 +5253,33 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
   background: transparent;
 }
 
-.emotion-113:hover {
+.emotion-112:hover {
   color: var(--link-hover-color);
 }
 
-.dark-mode .emotion-113 {
+.dark-mode .emotion-112 {
   border-color: transparent;
 }
 
-.emotion-112 {
+.emotion-111 {
   margin-right: 0.5rem;
 }
 
-.emotion-143 {
+.emotion-142 {
   color: var(--secondary-text-color);
   background-color: var(--color-neutrals-050);
   z-index: 1;
 }
 
-.dark-mode .emotion-143 {
+.dark-mode .emotion-142 {
   background-color: var(--color-dark-050);
 }
 
-.emotion-143 a {
+.emotion-142 a {
   color: currentColor;
 }
 
-.emotion-138 {
+.emotion-137 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -5316,7 +5298,7 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-138 {
+  .emotion-137 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -5327,27 +5309,27 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
   }
 }
 
-.emotion-137 {
+.emotion-136 {
   fill: none;
   width: 150px;
   display: block;
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-137 {
+  .emotion-136 {
     margin-bottom: 1rem;
   }
 }
 
-.emotion-142 {
+.emotion-141 {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.dark-mode .emotion-142 {
+.dark-mode .emotion-141 {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-141 {
+.emotion-140 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -5365,7 +5347,7 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-141 {
+  .emotion-140 {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
@@ -5377,14 +5359,14 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
   }
 }
 
-.emotion-139 {
+.emotion-138 {
   grid-area: copyright;
   text-transform: uppercase;
   font-size: 0.5rem;
   letter-spacing: 0.1rem;
 }
 
-.emotion-140 {
+.emotion-139 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5400,20 +5382,20 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
   grid-area: legal;
 }
 
-.emotion-140 a {
+.emotion-139 a {
   margin-left: 0.75rem;
   white-space: nowrap;
 }
 
 <div
-  className="emotion-144"
+  className="emotion-143"
 >
   <div
-    className=" emotion-87"
+    className=" emotion-86"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-86"
+      className="emotion-85"
     >
       <div
         className="emotion-28"
@@ -5693,7 +5675,7 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
         </ul>
       </nav>
       <ul
-        className="emotion-85"
+        className="emotion-84"
       >
         <li
           className="emotion-75"
@@ -5808,21 +5790,13 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
           </a>
         </li>
         <li
-          className="emotion-84"
+          className="emotion-83"
         >
-          <a
-            className="emotion-82 emotion-55"
-            href="https://newrelic.com/signup"
-            onClick={[Function]}
-            rel="noopener"
-            size="extraSmall"
-            target="_blank"
-            variant="primary"
-          >
-            <span>
-              Free account
-            </span>
-          </a>
+          <div
+            aria-busy={true}
+            aria-label="Loading"
+            className="emotion-82"
+          />
         </li>
       </ul>
     </div>
@@ -5832,11 +5806,11 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
         undefined"
   >
     <a
-      className="emotion-109"
+      className="emotion-108"
       href="/"
     >
       <svg
-        className="emotion-108"
+        className="emotion-107"
         viewBox="0 0 79 15"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -5957,7 +5931,7 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
     </div>
   </header>
   <main
-    className="emotion-116"
+    className="emotion-115"
   >
     <div
       className="primary-content"
@@ -6002,11 +5976,11 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
       >
         <div>
           <div
-            className="emotion-115"
+            className="emotion-114"
           >
             <div>
               <a
-                className="emotion-110 emotion-55"
+                className="emotion-109 emotion-55"
                 href="https://github.com/AdoptOpenJDK"
                 rel="noopener noreferrer"
                 target="__blank"
@@ -6014,13 +5988,13 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
                 View Website
               </a>
               <a
-                className="emotion-113 emotion-55"
+                className="emotion-112 emotion-55"
                 href="https://github.com/AdoptOpenJDK"
                 rel="noopener noreferrer"
               >
                 <img
                   alt="GitHub logo"
-                  className="emotion-112"
+                  className="emotion-111"
                   src="test-file-stub"
                 />
                 GitHub
@@ -6035,17 +6009,17 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
     </div>
   </main>
   <footer
-    className="emotion-143"
+    className="emotion-142"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-138"
+      className="emotion-137"
     >
       <a
         href="/"
       >
         <svg
-          className="emotion-137"
+          className="emotion-136"
           viewBox="0 0 79 15"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -6098,18 +6072,18 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
       <div />
     </div>
     <div
-      className="emotion-142"
+      className="emotion-141"
     >
       <div
-        className="emotion-141"
+        className="emotion-140"
       >
         <div
-          className="emotion-139"
+          className="emotion-138"
         >
           Copyright © 2021 New Relic Inc.
         </div>
         <div
-          className="emotion-140"
+          className="emotion-139"
         >
           <a
             href="https://newrelic.com/about/careers"
@@ -6167,7 +6141,16 @@ exports[`Open Telemetry Page Renders correctly 1`] = `
 `;
 
 exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
-.emotion-163 {
+@keyframes animation-0 {
+  to {
+    -webkit-transform: rotate(1turn);
+    -moz-transform: rotate(1turn);
+    -ms-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+.emotion-162 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6180,7 +6163,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   position: relative;
 }
 
-.emotion-91 {
+.emotion-90 {
   background-color: var(--color-neutrals-100);
   position: -webkit-sticky;
   position: sticky;
@@ -6189,20 +6172,20 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   z-index: 700;
 }
 
-.dark-mode .emotion-91 {
+.dark-mode .emotion-90 {
   background-color: var(--color-dark-100);
 }
 
-.emotion-91 ul {
+.emotion-90 ul {
   line-height: 14px;
   font-size: 16px;
 }
 
-.emotion-91 a {
+.emotion-90 a {
   border-bottom: none;
 }
 
-.emotion-90 {
+.emotion-89 {
   height: var(--global-header-height);
   display: -webkit-box;
   display: -webkit-flex;
@@ -7941,7 +7924,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   color: var(--color-dark-700);
 }
 
-.emotion-89 {
+.emotion-88 {
   margin: 0;
   margin-left: 1rem;
   padding: 0;
@@ -7959,18 +7942,18 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   flex: 1;
 }
 
-.emotion-89 >li {
+.emotion-88 >li {
   -webkit-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   color: var(--secondary-text-color);
 }
 
-.emotion-89 >li:not(:first-of-type) {
+.emotion-88 >li:not(:first-of-type) {
   margin-left: 0.5rem;
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-89 {
+  .emotion-88 {
     -webkit-flex: unset;
     -ms-flex: unset;
     flex: unset;
@@ -8203,7 +8186,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   }
 }
 
-.emotion-88 {
+.emotion-87 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8211,61 +8194,47 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
 }
 
 .emotion-86 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border-radius: 3px;
-  font-family: var(--primary-font-family);
-  line-height: 1;
-  cursor: pointer;
-  border: 1px solid transparent;
-  -webkit-transition: all 0.15s ease-out;
-  transition: all 0.15s ease-out;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--color-white);
-  background-color: var(--color-brand-600);
-  font-size: 0.625rem;
-  padding: 0.375rem 0.625rem;
-  border-radius: 0.125rem;
+  --spinner-size: 1rem;
+  display: inline-block;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
-.emotion-86:hover {
-  color: var(--color-white);
-  background-color: var(--color-brand-500);
+.emotion-86:after {
+  -webkit-animation: animation-0 0.5s linear infinite;
+  animation: animation-0 0.5s linear infinite;
+  border-radius: 50%;
+  border-right: 1px solid transparent;
+  border-top: 1px solid;
+  content: '';
+  left: calc(50% + 1px);
+  margin-left: calc(var(--spinner-size) / 2 * -1);
+  margin-top: calc(var(--spinner-size) / 2 * -1);
+  position: absolute;
+  top: calc(50% + 1px);
+  width: var(--spinner-size);
+  height: var(--spinner-size);
 }
 
-.emotion-113 {
+.emotion-112 {
   display: block;
   width: 257px;
 }
 
 @media screen and (max-width: 724px) {
-  .emotion-113 {
+  .emotion-112 {
     width: 160px;
     z-index: 500;
   }
 }
 
-.emotion-112 {
+.emotion-111 {
   fill: none;
   width: 100%;
 }
 
-.emotion-126 {
+.emotion-125 {
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
@@ -8278,18 +8247,18 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   flex-shrink: 0;
 }
 
-.emotion-126>hr {
+.emotion-125>hr {
   height: 2px;
   margin: 36px 0;
   background-color: var(--color-neutrals-200);
   border: none;
 }
 
-.emotion-119 {
+.emotion-118 {
   margin-bottom: 1rem;
 }
 
-.emotion-114 {
+.emotion-113 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -8319,12 +8288,12 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   background-color: var(--color-brand-600);
 }
 
-.emotion-114:hover {
+.emotion-113:hover {
   color: var(--color-white);
   background-color: var(--color-brand-500);
 }
 
-.emotion-117 {
+.emotion-116 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -8354,33 +8323,33 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   background: transparent;
 }
 
-.emotion-117:hover {
+.emotion-116:hover {
   color: var(--link-hover-color);
 }
 
-.dark-mode .emotion-117 {
+.dark-mode .emotion-116 {
   border-color: transparent;
 }
 
-.emotion-116 {
+.emotion-115 {
   margin-right: 0.5rem;
 }
 
-.emotion-153 {
+.emotion-152 {
   color: var(--secondary-text-color);
   background-color: var(--color-neutrals-050);
   z-index: 1;
 }
 
-.dark-mode .emotion-153 {
+.dark-mode .emotion-152 {
   background-color: var(--color-dark-050);
 }
 
-.emotion-153 a {
+.emotion-152 a {
   color: currentColor;
 }
 
-.emotion-148 {
+.emotion-147 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -8399,7 +8368,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-148 {
+  .emotion-147 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -8410,27 +8379,27 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   }
 }
 
-.emotion-147 {
+.emotion-146 {
   fill: none;
   width: 150px;
   display: block;
 }
 
 @media screen and (max-width: 550px) {
-  .emotion-147 {
+  .emotion-146 {
     margin-bottom: 1rem;
   }
 }
 
-.emotion-152 {
+.emotion-151 {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.dark-mode .emotion-152 {
+.dark-mode .emotion-151 {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-151 {
+.emotion-150 {
   font-size: 0.75rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -8448,7 +8417,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 760px) {
-  .emotion-151 {
+  .emotion-150 {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
@@ -8460,14 +8429,14 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   }
 }
 
-.emotion-149 {
+.emotion-148 {
   grid-area: copyright;
   text-transform: uppercase;
   font-size: 0.5rem;
   letter-spacing: 0.1rem;
 }
 
-.emotion-150 {
+.emotion-149 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8483,7 +8452,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   grid-area: legal;
 }
 
-.emotion-150 a {
+.emotion-149 a {
   margin-left: 0.75rem;
   white-space: nowrap;
 }
@@ -8547,12 +8516,12 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   box-shadow: 0 0 0 4px rgba(0, 126, 138, 0.1);
 }
 
-.emotion-120 {
+.emotion-119 {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-162 {
+.emotion-161 {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -8564,12 +8533,12 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   backdrop-filter: blur(5px);
 }
 
-.dark-mode .emotion-162 {
+.dark-mode .emotion-161 {
   background-color: rgba(15, 25, 28, 0.92);
   box-shadow: 0 -1px 0 rgba(55, 72, 78, 0.4);
 }
 
-.emotion-161 {
+.emotion-160 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8588,14 +8557,14 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 1200px) {
-  .emotion-161 {
+  .emotion-160 {
     width: 100%;
     padding: 1.125rem 1.75rem;
   }
 }
 
 @media screen and (max-width: 480px) {
-  .emotion-161 {
+  .emotion-160 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -8606,7 +8575,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   }
 }
 
-.emotion-154 {
+.emotion-153 {
   color: #fff;
   margin-top: 0;
   margin-bottom: 2px;
@@ -8614,12 +8583,12 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 1200px) {
-  .emotion-154 {
+  .emotion-153 {
     margin-bottom: 0.375rem;
   }
 }
 
-.emotion-155 {
+.emotion-154 {
   margin: 0 0 0px;
   font-size: 13px;
   line-height: 21px;
@@ -8627,25 +8596,25 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
 }
 
 @media screen and (max-width: 1200px) {
-  .emotion-155 {
+  .emotion-154 {
     line-height: 19px;
   }
 }
 
 @media screen and (max-width: 1200px) {
-  .emotion-155 {
+  .emotion-154 {
     margin-bottom: 1rem;
   }
 }
 
-.emotion-160 {
+.emotion-159 {
   margin-left: 1rem;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.emotion-156 {
+.emotion-155 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -8677,19 +8646,19 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   padding: 0.625rem 1.75rem;
 }
 
-.emotion-156:hover {
+.emotion-155:hover {
   color: var(--color-white);
   background-color: var(--color-brand-500);
 }
 
 @media screen and (max-width: 480px) {
-  .emotion-156 {
+  .emotion-155 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
 }
 
-.emotion-158 {
+.emotion-157 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -8720,37 +8689,37 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
   padding: 0.625rem 1rem;
 }
 
-.emotion-158:hover {
+.emotion-157:hover {
   color: var(--color-brand-600);
   background: rgba(112,204,210,0.17);
 }
 
-.dark-mode .emotion-158 {
+.dark-mode .emotion-157 {
   color: var(--color-dark-700);
   background-color: var(--color-dark-200);
 }
 
-.dark-mode .emotion-158:hover {
+.dark-mode .emotion-157:hover {
   color: var(--color-brand-200);
   background-color: rgba(112,204,210,0.17);
 }
 
 @media screen and (max-width: 480px) {
-  .emotion-158 {
+  .emotion-157 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
 }
 
 <div
-  className="emotion-163"
+  className="emotion-162"
 >
   <div
-    className=" emotion-91"
+    className=" emotion-90"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-90"
+      className="emotion-89"
     >
       <div
         className="emotion-32"
@@ -9086,7 +9055,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
         </ul>
       </nav>
       <ul
-        className="emotion-89"
+        className="emotion-88"
       >
         <li
           className="emotion-79"
@@ -9201,21 +9170,13 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
           </a>
         </li>
         <li
-          className="emotion-88"
+          className="emotion-87"
         >
-          <a
-            className="emotion-86 emotion-59"
-            href="https://newrelic.com/signup"
-            onClick={[Function]}
-            rel="noopener"
-            size="extraSmall"
-            target="_blank"
-            variant="primary"
-          >
-            <span>
-              Free account
-            </span>
-          </a>
+          <div
+            aria-busy={true}
+            aria-label="Loading"
+            className="emotion-86"
+          />
         </li>
       </ul>
     </div>
@@ -9225,11 +9186,11 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
         undefined"
   >
     <a
-      className="emotion-113"
+      className="emotion-112"
       href="/"
     >
       <svg
-        className="emotion-112"
+        className="emotion-111"
         viewBox="0 0 79 15"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -9370,7 +9331,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
     </div>
   </header>
   <main
-    className="emotion-126"
+    className="emotion-125"
   >
     <div
       className="undefined undefined   undefined 
@@ -9434,11 +9395,11 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
       >
         <div>
           <div
-            className="emotion-119"
+            className="emotion-118"
           >
             <div>
               <a
-                className="emotion-114 emotion-59"
+                className="emotion-113 emotion-59"
                 href="https://github.com/AdoptOpenJDK"
                 rel="noopener noreferrer"
                 target="__blank"
@@ -9446,13 +9407,13 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
                 View Website
               </a>
               <a
-                className="emotion-117 emotion-59"
+                className="emotion-116 emotion-59"
                 href="https://github.com/AdoptOpenJDK"
                 rel="noopener noreferrer"
               >
                 <img
                   alt="GitHub logo"
-                  className="emotion-116"
+                  className="emotion-115"
                   src="test-file-stub"
                 />
                 GitHub
@@ -9464,7 +9425,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
           Involved from New Relic
         </h4>
         <a
-          className="undefined  emotion-120"
+          className="undefined  emotion-119"
           href="https://github.com/kittylyst"
           target="__blank"
         >
@@ -9485,7 +9446,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
           />
         </a>
         <a
-          className="undefined  emotion-120"
+          className="undefined  emotion-119"
           href="https://github.com/breedx-nr"
           target="__blank"
         >
@@ -9506,7 +9467,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
           />
         </a>
         <a
-          className="undefined  emotion-120"
+          className="undefined  emotion-119"
           href="https://github.com/jasonrclark"
           target="__blank"
         >
@@ -9527,7 +9488,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
           />
         </a>
         <a
-          className="undefined  emotion-120"
+          className="undefined  emotion-119"
           href="https://github.com/tmancill"
           target="__blank"
         >
@@ -9548,7 +9509,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
           />
         </a>
         <a
-          className="undefined  emotion-120"
+          className="undefined  emotion-119"
           href="https://github.com/cameronhotchkies"
           target="__blank"
         >
@@ -9569,7 +9530,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
           />
         </a>
         <a
-          className="undefined  emotion-120"
+          className="undefined  emotion-119"
           href="https://github.com/rvanderwal-newrelic"
           target="__blank"
         >
@@ -9593,17 +9554,17 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
     </div>
   </main>
   <footer
-    className="emotion-153"
+    className="emotion-152"
     data-swiftype-index={false}
   >
     <div
-      className="emotion-148"
+      className="emotion-147"
     >
       <a
         href="/"
       >
         <svg
-          className="emotion-147"
+          className="emotion-146"
           viewBox="0 0 79 15"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -9656,18 +9617,18 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
       <div />
     </div>
     <div
-      className="emotion-152"
+      className="emotion-151"
     >
       <div
-        className="emotion-151"
+        className="emotion-150"
       >
         <div
-          className="emotion-149"
+          className="emotion-148"
         >
           Copyright © 2021 New Relic Inc.
         </div>
         <div
-          className="emotion-150"
+          className="emotion-149"
         >
           <a
             href="https://newrelic.com/about/careers"
@@ -9722,14 +9683,14 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
     </div>
   </footer>
   <div
-    className="emotion-162"
+    className="emotion-161"
   >
     <div
-      className="emotion-161"
+      className="emotion-160"
     >
       <div>
         <h4
-          className="emotion-154"
+          className="emotion-153"
         >
           This site uses cookies
            
@@ -9741,7 +9702,7 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
           </span>
         </h4>
         <p
-          className="emotion-155"
+          className="emotion-154"
         >
           We use cookies and other similar technologies ("Cookies") on our websites and services to enhance your experience and to provide you with relevant content. By using our websites and services you are agreeing to the use of cookies. You can read more 
           <a
@@ -9760,16 +9721,16 @@ exports[`W3C Distributed Tracing Working Group Renders correctly 1`] = `
         </p>
       </div>
       <div
-        className="emotion-160"
+        className="emotion-159"
       >
         <button
-          className="emotion-156 emotion-59"
+          className="emotion-155 emotion-59"
           onClick={[Function]}
         >
           Yes
         </button>
         <button
-          className="emotion-158 emotion-59"
+          className="emotion-157 emotion-59"
           onClick={[Function]}
         >
           No
diff --git a/yarn.lock b/yarn.lock
index 03c81d692d..08acbb9c33 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2049,10 +2049,10 @@
     eslint-plugin-promise "^4.2.1"
     eslint-plugin-react "^7.14.3"
 
-"@newrelic/gatsby-theme-newrelic@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-2.0.1.tgz#44ff836e6b4d3430fdec528d6245ac55c0c00100"
-  integrity sha512-CQ7OLUMWJ2qUFmuJD8Yt3mUlXE2dSwEowfCSauoLPNyiFGtDariRd7IJThRagXbmz+8b+a96goJYxvkun+UOZQ==
+"@newrelic/gatsby-theme-newrelic@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-2.2.0.tgz#9d0719c7084436354f5aab9112986aabd974e79f"
+  integrity sha512-0B3Mzs8KEm/p9aHE4pjyn2/u9tTFvd93X9TkZ5/JYeEKYTiLUvAg3CFPw+JWAP303lpGE7aoUsydFcLF91rAHw==
   dependencies:
     "@elastic/react-search-ui" "^1.5.1"
     "@elastic/react-search-ui-views" "^1.5.1"
@@ -2083,7 +2083,7 @@
     react-live "^2.2.3"
     react-middle-ellipsis "^1.1.0"
     react-simple-code-editor "^0.11.0"
-    react-spring "^9.1.1"
+    react-spring "^9.1.2"
     react-typist "^2.0.5"
     react-use "^17.2.3"
     stream-browserify "^3.0.0"
@@ -2136,85 +2136,85 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
-"@react-spring/animated@~9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.1.1.tgz#996db774bbc42fb37838580674c4ade4f2d99f20"
-  integrity sha512-u8Assg5uySwqyoeb1f7eBAUSl8sleJTewdfhVi1EtcM9ngU2Snhcp6snF8NGxvf4gZp5z7v+Dfx3KdB2V8NnXQ==
-  dependencies:
-    "@react-spring/shared" "~9.1.1"
-    "@react-spring/types" "~9.1.1"
-
-"@react-spring/core@~9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.1.1.tgz#0d109c9f921bf957dcb65340a4192061f28e5cb2"
-  integrity sha512-flHeLN56idxQ1YIpUYY1m3r2ZAM2xg7Zb/pHBFSCbnOKP7TtlhAAOfmrabERqaThmrqkFKiq9FjyF76d3OjE5g==
-  dependencies:
-    "@react-spring/animated" "~9.1.1"
-    "@react-spring/shared" "~9.1.1"
-    "@react-spring/types" "~9.1.1"
-
-"@react-spring/konva@~9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.1.1.tgz#811b4baed651b9ffb8eb40caec7e80b6af6f446c"
-  integrity sha512-xD93j5gNYyNTspvtxZXIU91RIfAKdqHMCJ4m6pugFQyHpa3EYVFDIMkPx7l7sCngMH/9Ez5Irit7NDtp7rZ1Hw==
-  dependencies:
-    "@react-spring/animated" "~9.1.1"
-    "@react-spring/core" "~9.1.1"
-    "@react-spring/shared" "~9.1.1"
-    "@react-spring/types" "~9.1.1"
-
-"@react-spring/native@~9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.1.1.tgz#484d335372ed180bebb9edcfde8b7d4370239207"
-  integrity sha512-eDBB4rSCmsuqyhc15VtEOQmEebvnMdg4Nh/OTyAvfDVNQTXm9H1LwZpKi1enxq2kUhpyZ8jX3kHzz3DPy0+Dag==
-  dependencies:
-    "@react-spring/animated" "~9.1.1"
-    "@react-spring/core" "~9.1.1"
-    "@react-spring/shared" "~9.1.1"
-    "@react-spring/types" "~9.1.1"
-
-"@react-spring/shared@~9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.1.1.tgz#9f7b1a4051a0c71e0167805e7d499071b2aabddc"
-  integrity sha512-GA9A9l5JxC50eDTDPu5IDUMhQ4MiBrXd3ZdlI6/wUCgAsZ1wPx77sxaccomxlUomRet0IUcXCEKcL1Flax7ZMQ==
-  dependencies:
-    "@react-spring/types" "~9.1.1"
+"@react-spring/animated@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.1.2.tgz#e43b122160f8f4cbb0caac8a7f57acd76dd12369"
+  integrity sha512-nKOGk+3aWbNp46V/CB1J2vR3GJI/Vork8N1WTI5mt+32QekrSsBn5/YFt4/iPaDGhLjukFxF0IjLs6hRLqSObw==
+  dependencies:
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/core@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.1.2.tgz#6d854a12fe9c3caa7942e51e708cb5fb4e2d1124"
+  integrity sha512-rgobYPCcLdDwbHBVqAmvtXhhX92G7MoPltJlzUge843yp1dNr47tkagFdCtw9NMGp6eHu/CE5byh/imlhLLAxw==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/konva@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.1.2.tgz#20567063efd8d441a268826e326bd5d7574bbc50"
+  integrity sha512-P60mhUHRYgPPhoTBQWzuzD3hfeCFWC0BQ7N0iHzpMTzDIrAvutyg+iAX59jSXo3yatrcx60NmlCsiG8tRxbw6w==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/native@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.1.2.tgz#d21a64c20ca08d2c5839cedcf9cc4842770f8ffc"
+  integrity sha512-d7+tCoKAnDPSoVtpyFFm4BWQhn1h833ocdP0d2POZzKTcR1iQ8YI7EQ22iKGLvwH+0vjymde039CgYy31INqWQ==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/shared@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.1.2.tgz#c36d077d7eb31fd2cbcf8956d9d35037b2998613"
+  integrity sha512-sj/RrhFZAteCWAMk+W0t6Ku/skn/lbskCCs8B7ZnHNLMGPM+Zb3MOk+aVbX3T/D0iq/oTnKWyQYqrXDKiFcZ7g==
+  dependencies:
+    "@react-spring/types" "~9.1.2"
     rafz "^0.1.14"
 
-"@react-spring/three@~9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.1.1.tgz#ba06152963ae592f6fb3e10487c325e623261788"
-  integrity sha512-0CW41OHFkyx9laD/ZEkuHLXTq58c25ZFPTD+NyI2wHuhI1wyM0YGhlueNFXVpzkgpwj9dYnpdI7KxN7Cx0dnJg==
-  dependencies:
-    "@react-spring/animated" "~9.1.1"
-    "@react-spring/core" "~9.1.1"
-    "@react-spring/shared" "~9.1.1"
-    "@react-spring/types" "~9.1.1"
-
-"@react-spring/types@~9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.1.1.tgz#0e53317018b81c4716a776e65477c8b0ee62758e"
-  integrity sha512-GaesYowey+nmDw/yhZ5jErEH2UaDl4jxax8aQtW5h3OpNu/QS8swoEn/jxQgffLb0n6gjsER7QyIx/dmZIWlyw==
-
-"@react-spring/web@~9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.1.1.tgz#f7ff454631d0e495887ed4631672982e1e6fb500"
-  integrity sha512-py4c/Agqz9Unf+Apame29XYTLqHnKXSwJA6Q44jcNtHRFMuRjIpCyhS13C1ZI5PcJT0g9b8CvtMQFiShne8wNQ==
-  dependencies:
-    "@react-spring/animated" "~9.1.1"
-    "@react-spring/core" "~9.1.1"
-    "@react-spring/shared" "~9.1.1"
-    "@react-spring/types" "~9.1.1"
-
-"@react-spring/zdog@~9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.1.1.tgz#8a79a957a89141bf2281b597e98d9a8327a6ba15"
-  integrity sha512-v0bSWfc0HtfAH+ijdml+/h8pFtP+WtWkd8pDq1ncfA0V0ey+8/SILE6vd69jSIYq8Wr/Q/qIpMvPmM77YkT+Ag==
-  dependencies:
-    "@react-spring/animated" "~9.1.1"
-    "@react-spring/core" "~9.1.1"
-    "@react-spring/shared" "~9.1.1"
-    "@react-spring/types" "~9.1.1"
+"@react-spring/three@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.1.2.tgz#49d1d4c0b9d059bd470712c78c9dd73af130677d"
+  integrity sha512-d/v94ykmfJGLTJxJ+jxlTAJSfFdD+SSf+yvXReS81hc7+9VYeEwIHVIEKOzckYnPy/MEOSVhIVKF/9wdFIIo6g==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/types@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.1.2.tgz#3273a182f825b38f44ead2a2f3984344abad1e2b"
+  integrity sha512-NZNImL0ymRFbss1cGKX2qSEeFdFoOgnIJZEW4Uczt+wm04J7g0Zuf23Hf8hM35JtxDr8QO5okp8BBtCM5FzzMg==
+
+"@react-spring/web@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.1.2.tgz#6ec409e8559676834b67aa33f0a2d57643c3c555"
+  integrity sha512-E5W9Hmi2bO6CPorCNV/2iv12ux9LxHJAbpXmrBPKWFRqZixysiHoNQKKPG0DmSvUU1uKkvCvMC4VoB6pj/2kxw==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/zdog@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.1.2.tgz#edf270e93d5db8a94f65d4e94e4438352fbb454f"
+  integrity sha512-t5RobDp12HGVh6XJ1BZ+dFdxRQ/goEapYvjH5eqQa1vC97bSqJGLiG+SM/E360DtDlh8GXAyGSesd2pXzBkpPg==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
 
 "@semantic-release/changelog@^5.0.1":
   version "5.0.1"
@@ -7885,9 +7885,9 @@ gatsby-plugin-sharp@^3.3.0:
     uuid "3.4.0"
 
 gatsby-plugin-sitemap@^4.0.0-next.0:
-  version "4.0.0-next.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-sitemap/-/gatsby-plugin-sitemap-4.0.0-next.0.tgz#23296d97120ed7cc8a7009e8834dfb204ac991c4"
-  integrity sha512-VDmnJKRwNqKnNvLWnSklGAzdU7xnwu+OQG1T3OM+bYdRFL8EtdSz4ADE5CVfGWFw0jahJ1eMOde2CDiaCcIMuQ==
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sitemap/-/gatsby-plugin-sitemap-4.0.0.tgz#65f2ef27362796ac145cec1d8dd05c790b50e1fc"
+  integrity sha512-+GxxKhB4Lm1AY+k9LfcnATF/LsUXiRHVwM3YDjzpB25WCGrGZGEgviZXiy4xb2BOZz0EoUkYZ9IDU9eNgAoHBQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
     common-tags "^1.8.0"
@@ -14135,17 +14135,17 @@ react-simple-code-editor@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz#bb57c7c29b570f2ab229872599eac184f5bc673c"
   integrity sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==
 
-react-spring@^9.1.1:
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.1.1.tgz#0771de37421501be2121631cff2b36d0331770e2"
-  integrity sha512-gdRyLETB5183zCygEKXq5lNsNLSRXC8PZjEacB6CXC4gK7EErqsJBaC5vIHYc9/PMsi2XvUyTP17y8IhYHnKjg==
-  dependencies:
-    "@react-spring/core" "~9.1.1"
-    "@react-spring/konva" "~9.1.1"
-    "@react-spring/native" "~9.1.1"
-    "@react-spring/three" "~9.1.1"
-    "@react-spring/web" "~9.1.1"
-    "@react-spring/zdog" "~9.1.1"
+react-spring@^9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.1.2.tgz#a2392f5468bfd960976747d59361236536e1f303"
+  integrity sha512-xLmkierisElCQShCqAH3PpepjHhCyOK1wGSTdpvG7GGD+SbfG4Sac7wj6wrKTT5A5NUFM5OnVQUXZLe5HScIfA==
+  dependencies:
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/konva" "~9.1.2"
+    "@react-spring/native" "~9.1.2"
+    "@react-spring/three" "~9.1.2"
+    "@react-spring/web" "~9.1.2"
+    "@react-spring/zdog" "~9.1.2"
 
 react-style-singleton@^2.1.0:
   version "2.1.1"