archive-gh-me/gitmoji
1
0
Fork 0
mirror of https://github.com/carloscuesta/gitmoji.git synced 2025-12-08 20:14:12 +00:00
Code Issues Projects Releases Wiki Activity

🐛 Render CarbonAd only when component is mounted (#1405)

Browse Source
This commit is contained in:
Carlos Cuesta 2023-04-03 20:14:04 +02:00 committed by GitHub
parent 33920d4f38
commit daf2cbb06f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/website/src/__tests__/__snapshots__/pages.spec.tsx.snap
View File

@ -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>

4
packages/website/src/components/CarbonAd/__tests__/__snapshots__/carbonAd.spec.tsx.snap
View File

@ -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>
`;

19
packages/website/src/components/CarbonAd/index.tsx
View File

@ -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>
)
}