docs: prevent layout from moving during loading

mrholek · mrholek · commit dea7fc25d6b1 · 2024-12-15T23:43:14.000+01:00
diff --git a/packages/docs/src/components/Ads.tsx b/packages/docs/src/components/Ads.tsx
@@ -19,7 +19,7 @@ export const Ads: FC<AdsProps> = ({ code, location, placement }) => {
     }
   }, [location])
 
-  return <div ref={ref} />
+  return <div className="carbonads-wrapper" ref={ref} />
 }
 
 Ads.displayName = 'Ads'
diff --git a/packages/docs/src/styles/_ads.scss b/packages/docs/src/styles/_ads.scss
@@ -4,12 +4,16 @@
 // Carbon ads
 //
 
+.carbonads-wrapper {
+  min-height: 130px;
+  margin: 2rem 0;
+}
+
 #carbonads {
   position: static;
   display: block;
   max-width: 400px;
   padding: 15px 15px 15px 160px;
-  margin: 2rem 0;
   overflow: hidden;
   @include font-size(.8125rem);
   line-height: 1.4;

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export const Ads: FC<AdsProps> = ({ code, location, placement }) => {`
`19`	`19`	`}`
`20`	`20`	`}, [location])`
`21`	`21`
`22`		`- return <div ref={ref} />`
	`22`	`+ return <div className="carbonads-wrapper" ref={ref} />`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`Ads.displayName = 'Ads'`