Fix premature banner:none event causing mobile sticky race condition - wait for pickMessage to complete first before dispatching banner:none

Author: dskamiotis

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

@@ -275,6 +275,8 @@ export const StickyBottomBanner = ({
 	);
 
 	const [SelectedBanner, setSelectedBanner] = useState<MaybeFC | null>(null);
+	const [hasPickMessageCompleted, setHasPickMessageCompleted] =
+		useState<boolean>(false);
 	const [asyncArticleCounts, setAsyncArticleCounts] =
 		useState<Promise<ArticleCounts | undefined>>();
 
@@ -365,9 +367,10 @@ export const StickyBottomBanner = ({
 		};
 
 		pickMessage(bannerConfig, renderingTarget)
-			.then((PickedBanner: () => MaybeFC) =>
-				setSelectedBanner(PickedBanner),
-			)
+			.then((PickedBanner: () => MaybeFC) => {
+				setSelectedBanner(PickedBanner);
+				setHasPickMessageCompleted(true);
+			})
 			.catch((e) => {
 				// Report error to Sentry
 				const msg = `StickyBottomBanner pickMessage - error: ${String(
@@ -377,6 +380,7 @@ export const StickyBottomBanner = ({
 					new Error(msg),
 					'sticky-bottom-banner',
 				);
+				setHasPickMessageCompleted(true);
 			});
 	}, [
 		isSignedIn,
@@ -403,14 +407,14 @@ export const StickyBottomBanner = ({
 	]);
 
 	useEffect(() => {
-		if (SelectedBanner == null) {
+		if (hasPickMessageCompleted && SelectedBanner == null) {
 			document.dispatchEvent(
 				new CustomEvent('banner:none', {
 					detail: { readerRevenue: false },
 				}),
 			);
 		}
-	}, [SelectedBanner]);
+	}, [SelectedBanner, hasPickMessageCompleted]);
 	if (SelectedBanner) {
 		return <SelectedBanner />;
 	}