From daf2cbb06f972bf4df5f97409ef1a7021d3aa0f3 Mon Sep 17 00:00:00 2001
From: Carlos Cuesta <carloscuesta@me.com>
Date: Mon, 3 Apr 2023 20:14:04 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Render=20`CarbonAd`=20only=20whe?=
 =?UTF-8?q?n=20component=20is=20mounted=20(#1405)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__snapshots__/pages.spec.tsx.snap         | 16 ++++++++--------
 .../__snapshots__/carbonAd.spec.tsx.snap      |  4 ++--
 .../website/src/components/CarbonAd/index.tsx | 19 ++++++++++++++-----
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/website/src/__tests__/__snapshots__/pages.spec.tsx.snap b/packages/website/src/__tests__/__snapshots__/pages.spec.tsx.snap
index 33d5945..4b5048e 100644
--- a/packages/website/src/__tests__/__snapshots__/pages.spec.tsx.snap
+++ b/packages/website/src/__tests__/__snapshots__/pages.spec.tsx.snap
@@ -3,10 +3,10 @@
 exports[`Pages About should render the page 1`] = `
 <main>
   <div
-    className="jsx-f88da8e0e7f3559f col-xs-12"
+    className="jsx-b734095dc71c6fb7 col-xs-12"
   >
     <div
-      className="jsx-f88da8e0e7f3559f carbon-container row center-xs"
+      className="jsx-b734095dc71c6fb7 carbon-container row center-xs"
     />
   </div>
   <section>
@@ -502,10 +502,10 @@ exports[`Pages App should render the page 1`] = `
 exports[`Pages Contributors should render the page 1`] = `
 <main>
   <div
-    className="jsx-f88da8e0e7f3559f col-xs-12"
+    className="jsx-b734095dc71c6fb7 col-xs-12"
   >
     <div
-      className="jsx-f88da8e0e7f3559f carbon-container row center-xs"
+      className="jsx-b734095dc71c6fb7 carbon-container row center-xs"
     />
   </div>
   <section>
@@ -537,10 +537,10 @@ exports[`Pages Contributors should render the page 1`] = `
 exports[`Pages Index should render the page 1`] = `
 <main>
   <div
-    className="jsx-f88da8e0e7f3559f col-xs-12"
+    className="jsx-b734095dc71c6fb7 col-xs-12"
   >
     <div
-      className="jsx-f88da8e0e7f3559f carbon-container row center-xs"
+      className="jsx-b734095dc71c6fb7 carbon-container row center-xs"
     />
   </div>
   <div
@@ -4102,10 +4102,10 @@ exports[`Pages Index should render the page 1`] = `
 exports[`Pages Specification should render the page 1`] = `
 <main>
   <div
-    className="jsx-f88da8e0e7f3559f col-xs-12"
+    className="jsx-b734095dc71c6fb7 col-xs-12"
   >
     <div
-      className="jsx-f88da8e0e7f3559f carbon-container row center-xs"
+      className="jsx-b734095dc71c6fb7 carbon-container row center-xs"
     />
   </div>
   <section>
diff --git a/packages/website/src/components/CarbonAd/__tests__/__snapshots__/carbonAd.spec.tsx.snap b/packages/website/src/components/CarbonAd/__tests__/__snapshots__/carbonAd.spec.tsx.snap
index 2542e67..5c8e30d 100644
--- a/packages/website/src/components/CarbonAd/__tests__/__snapshots__/carbonAd.spec.tsx.snap
+++ b/packages/website/src/components/CarbonAd/__tests__/__snapshots__/carbonAd.spec.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`CarbonAd should render the component 1`] = `
 <div
-  className="jsx-f88da8e0e7f3559f col-xs-12"
+  className="jsx-b734095dc71c6fb7 col-xs-12"
 >
   <div
-    className="jsx-f88da8e0e7f3559f carbon-container row center-xs"
+    className="jsx-b734095dc71c6fb7 carbon-container row center-xs"
   />
 </div>
 `;
diff --git a/packages/website/src/components/CarbonAd/index.tsx b/packages/website/src/components/CarbonAd/index.tsx
index d0addb8..8593fc6 100644
--- a/packages/website/src/components/CarbonAd/index.tsx
+++ b/packages/website/src/components/CarbonAd/index.tsx
@@ -1,10 +1,15 @@
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, useState } from 'react'
 
 const CarbonAd = () => {
   const adsContainer = useRef<HTMLDivElement>(null)
+  const [isMounted, setIsMounted] = useState(false)
 
   useEffect(() => {
-    if (adsContainer.current) {
+    setIsMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (adsContainer.current && isMounted) {
       const carbonAdsScript = document.createElement('script')
 
       carbonAdsScript.src =
@@ -14,7 +19,7 @@ const CarbonAd = () => {
 
       adsContainer.current.appendChild(carbonAdsScript)
     }
-  }, [adsContainer])
+  }, [adsContainer, isMounted])
 
   return (
     <div className="col-xs-12">
@@ -89,11 +94,15 @@ const CarbonAd = () => {
           }
 
           .carbon-container {
-            min-height: 90px;
+            height: 100px;
           }
         `}
       </style>
-      <div ref={adsContainer} className="carbon-container row center-xs" />
+      {isMounted ? (
+        <div ref={adsContainer} className="carbon-container row center-xs" />
+      ) : (
+        <div className="carbon-container row center-xs" />
+      )}
     </div>
   )
 }