only render adportals component if is false

Author: cemms1

dotcom-rendering/src/components/AdPortals.importable.tsx

@@ -104,16 +104,11 @@ const debounceUpdateAds = libDebounce(updateAds, 100, { leading: true });
 
 export const AdPortals = ({
 	rightAlignFrom = 'desktop',
-	shouldHideAds,
 }: {
 	/** In most cases, we want to try to display ads in the right column from desktop upwards.
 	 * For blogs, we want right aligned from wide upwards.
 	 */
 	rightAlignFrom?: Breakpoint;
-	/**
-	 * If the page data has been set to hide ads, we should respect that in not rendering placeholders
-	 */
-	shouldHideAds?: boolean;
 }) => {
 	// Server-rendered placeholder elements for inline ad slots to be inserted into (below desktop breakpoint)
 	const [adPlaceholders, setAdPlaceholders] = useState<Element[]>([]);
@@ -143,7 +138,7 @@ export const AdPortals = ({
 		void getUserClient()
 			.isPremium()
 			.then((isPremium) => {
-				if (!isPremium && !shouldHideAds) {
+				if (!isPremium) {
 					setAdPlaceholders(
 						Array.from(
 							document.getElementsByClassName(adPlaceholderClass),
@@ -157,7 +152,7 @@ export const AdPortals = ({
 				}
 			})
 			.catch(() => console.error('Error setting up ads'));
-	}, [shouldHideAds]);
+	}, []);
 
 	/**
 	 * Insert Ads

dotcom-rendering/src/layouts/CommentLayout.tsx

@@ -347,9 +347,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 			)}
 
 			<main data-layout="CommentLayout">
-				{isApps && (
+				{isApps && !article.shouldHideAds && (
 					<Island priority="critical">
-						<AdPortals shouldHideAds={article.shouldHideAds} />
+						<AdPortals />
 					</Island>
 				)}
 				<Section

dotcom-rendering/src/layouts/ImmersiveLayout.tsx

@@ -437,9 +437,9 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 			)}
 
 			<main data-layout="ImmersiveLayout">
-				{isApps && (
+				{isApps && !article.shouldHideAds && (
 					<Island priority="critical">
-						<AdPortals shouldHideAds={article.shouldHideAds} />
+						<AdPortals />
 					</Island>
 				)}
 				<Section

dotcom-rendering/src/layouts/InteractiveLayout.tsx

@@ -324,9 +324,9 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 				</>
 			)}
 			<main data-layout="InteractiveLayout">
-				{isApps && (
+				{isApps && !article.shouldHideAds && (
 					<Island priority="critical">
-						<AdPortals shouldHideAds={article.shouldHideAds} />
+						<AdPortals />
 					</Island>
 				)}
 				<Section

dotcom-rendering/src/layouts/LiveLayout.tsx

@@ -361,12 +361,9 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 						</Section>
 					</Hide>
 				)}
-				{isApps && (
+				{isApps && !article.shouldHideAds && (
 					<Island priority="critical">
-						<AdPortals
-							rightAlignFrom="wide"
-							shouldHideAds={article.shouldHideAds}
-						/>
+						<AdPortals rightAlignFrom="wide" />
 					</Island>
 				)}
 				{footballMatchUrl ? (

dotcom-rendering/src/layouts/PictureLayout.tsx

@@ -330,9 +330,9 @@ export const PictureLayout = (props: WebProps | AppsProps) => {
 				lang={decideLanguage(article.lang)}
 				dir={decideLanguageDirection(article.isRightToLeftLang)}
 			>
-				{isApps && (
+				{isApps && !article.shouldHideAds && (
 					<Island priority="critical">
-						<AdPortals shouldHideAds={article.shouldHideAds} />
+						<AdPortals />
 					</Island>
 				)}
 				<Section

dotcom-rendering/src/layouts/ShowcaseLayout.tsx

@@ -371,9 +371,9 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 				lang={decideLanguage(article.lang)}
 				dir={decideLanguageDirection(article.isRightToLeftLang)}
 			>
-				{isApps && (
+				{isApps && !article.shouldHideAds && (
 					<Island priority="critical">
-						<AdPortals shouldHideAds={article.shouldHideAds} />
+						<AdPortals />
 					</Island>
 				)}
 				<Section

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -453,9 +453,9 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 			)}
 
 			<main data-layout="StandardLayout">
-				{isApps && (
+				{isApps && !article.shouldHideAds && (
 					<Island priority="critical">
-						<AdPortals shouldHideAds={article.shouldHideAds} />
+						<AdPortals />
 					</Island>
 				)}
 				<Section