include renderAds prop in portals component and only convert to placeholders if renderAds is true

Author: cemms1

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

@@ -104,10 +104,12 @@ const debounceUpdateAds = libDebounce(updateAds, 100, { leading: true });
 
 export const AdPortals = ({
 	rightAlignFrom = 'desktop',
+	renderAds,
 }: {
 	// 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;
+	renderAds?: boolean;
 }) => {
 	// Server-rendered placeholder elements for inline ad slots to be inserted into (below desktop breakpoint)
 	const [adPlaceholders, setAdPlaceholders] = useState<Element[]>([]);
@@ -137,7 +139,7 @@ export const AdPortals = ({
 		void getUserClient()
 			.isPremium()
 			.then((isPremium) => {
-				if (!isPremium) {
+				if (!isPremium && renderAds) {
 					setAdPlaceholders(
 						Array.from(
 							document.getElementsByClassName(adPlaceholderClass),
@@ -151,7 +153,7 @@ export const AdPortals = ({
 				}
 			})
 			.catch(() => console.error('Error setting up ads'));
-	}, []);
+	}, [renderAds]);
 
 	/**
 	 * Insert Ads

dotcom-rendering/src/layouts/CommentLayout.tsx

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

dotcom-rendering/src/layouts/ImmersiveLayout.tsx

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

dotcom-rendering/src/layouts/InteractiveLayout.tsx

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

dotcom-rendering/src/layouts/LiveLayout.tsx

@@ -361,9 +361,12 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 						</Section>
 					</Hide>
 				)}
-				{renderAds && isApps && (
+				{isApps && (
 					<Island priority="critical">
-						<AdPortals rightAlignFrom="wide" />
+						<AdPortals
+							rightAlignFrom="wide"
+							renderAds={renderAds}
+						/>
 					</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)}
 			>
-				{renderAds && isApps && (
+				{isApps && (
 					<Island priority="critical">
-						<AdPortals />
+						<AdPortals renderAds={renderAds} />
 					</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)}
 			>
-				{renderAds && isApps && (
+				{isApps && (
 					<Island priority="critical">
-						<AdPortals />
+						<AdPortals renderAds={renderAds} />
 					</Island>
 				)}
 				<Section

dotcom-rendering/src/layouts/StandardLayout.tsx

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