Load mobile sticky ads only when the reader revenue banner is not present

Author: dskamiotis

bundle/src/insert/mobile-sticky.ts

@@ -1,3 +1,4 @@
+import { log } from '@guardian/libs';
 import { createAdSlot } from '../lib/create-ad-slot';
 import fastdom from '../lib/fastdom-promise';
 import { shouldIncludeMobileSticky } from '../lib/header-bidding/utils';
@@ -33,15 +34,17 @@ const createAdWrapper = () => {
  */
 export const init = (): Promise<void> => {
 	if (shouldIncludeMobileSticky()) {
-		const mobileStickyWrapper = createAdWrapper();
-		return fastdom
-			.mutate(() => {
-				// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Is body really always defined?
-				if (document.body && mobileStickyWrapper) {
-					document.body.appendChild(mobileStickyWrapper);
-				}
-			})
-			.then(() => {
+		document.addEventListener('banner:close', () => {
+			void (async () => {
+				log('commercial', '🪵 Supporter revenue banner closed');
+				const mobileStickyWrapper = createAdWrapper();
+
+				await fastdom.mutate(() => {
+					// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Is body really always defined?
+					if (document.body && mobileStickyWrapper) {
+						document.body.appendChild(mobileStickyWrapper);
+					}
+				});
 				if (mobileStickyWrapper) {
 					const mobileStickyAdSlot =
 						mobileStickyWrapper.querySelector<HTMLElement>(
@@ -51,7 +54,8 @@ export const init = (): Promise<void> => {
 						void fillDynamicAdSlot(mobileStickyAdSlot, true);
 					}
 				}
-			});
+			})();
+		});
 	}
 
 	return Promise.resolve();