Fix ad initialization race condition, which was causing ads to someti…

…mes not get displayed, especially in 2nd tabs

TODO

@@ -1,9 +1,3 @@
-female
-- update face editor
-- blog and test links
-- add clickable face to blog post
-- make onFaceJS an array or use events or something
-
 make cap space visible above the fold on trade page on mobile https://mail.google.com/mail/u/0/#inbox/FMfcgzGrcXqKVMHkvwNxkzXsrsbWwBKh
 
 jordan not in HoF when starting in 2003 during draft https://discord.com/channels/290013534023057409/290015591216054273/1073981357614706821

src/ui/api/index.ts

@@ -17,20 +17,29 @@ import type {
 	UpdateEvents,
 	GameAttributesLeague,
 } from "../../common/types";
-import { AD_DIVS, GRACE_PERIOD } from "../../common";
+import { AD_DIVS } from "../../common";
 import { updateSkyscraperDisplay } from "../components/Skyscraper";
 
-// Read from goldUntil rather than local because this is called before local is updated
-const initAds = (goldUntil: number | undefined) => {
-	let hideAds = false; // No ads for Gold members
-
-	const currentTimestamp = Math.floor(Date.now() / 1000) - GRACE_PERIOD;
-
-	if (goldUntil === undefined || currentTimestamp < goldUntil) {
-		hideAds = true;
+let accountChecked = false;
+let uiRendered = false;
+const initAds = (type: "accountChecked" | "uiRendered") => {
+	// Prevent race condition by assuring we run this only after the account has been checked and the UI has been rendered, otherwise (especially when opening a 2nd tab) this was sometimes running before the UI was rendered, which resulted in no ads being displayed
+	if (accountChecked && uiRendered) {
+		// Must have already ran somehow?
+		return;
+	}
+	if (type === "accountChecked") {
+		accountChecked = true;
+	} else if (type === "uiRendered") {
+		uiRendered = true;
 	}
+	if (!accountChecked || !uiRendered) {
+		return;
+	}
+
+	const gold = local.getState().gold;
 
-	if (!hideAds) {
+	if (!gold) {
 		// _disabled names are to hide from Blockthrough, so it doesn't leak through for Gold subscribers. Run this regardless of window.freestar, so Blockthrough can still work for some users.
 		const divsAll = [
 			AD_DIVS.mobile,
@@ -165,12 +174,6 @@ const initGold = () => {
 				div.id = `${id}_disabled`;
 			}
 		}
-		console.log(
-			"initGold end",
-			"display",
-			document.getElementById("basketball-gm_mobile_leaderboard")?.style
-				.display,
-		);
 	});
 };
 

src/ui/components/Controller.tsx

@@ -15,6 +15,7 @@ import Skyscraper from "./Skyscraper";
 import TitleBar from "./TitleBar";
 import { useViewData } from "../util/viewManager";
 import { isSport } from "../../common";
+import api from "../api";
 
 const loadFramerMotionFeatures = () =>
 	import("../util/framerMotionFeatures").then(res => res.default);
@@ -66,6 +67,11 @@ const Controller = () => {
 		}
 	}, [popup]);
 
+	useEffect(() => {
+		// Try to show ads on initial render
+		api.initAds("uiRendered");
+	}, []);
+
 	const {
 		Component,
 		data,

src/ui/views/LoginOrRegister/Login.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, useRef, useState } from "react";
-import { ACCOUNT_API_URL, fetchWrapper } from "../../../common";
+import { ACCOUNT_API_URL, fetchWrapper, GRACE_PERIOD } from "../../../common";
 import { ActionButton } from "../../components";
 import {
 	analyticsEvent,
@@ -33,7 +33,7 @@ const Login = ({ ajaxErrorMsg }: { ajaxErrorMsg: string }) => {
 			});
 
 			if (data.success) {
-				const currentTimestamp = Math.floor(Date.now() / 1000);
+				const currentTimestamp = Math.floor(Date.now() / 1000) - GRACE_PERIOD;
 				const gold = currentTimestamp <= data.gold_until;
 				localActions.update({
 					gold,

src/worker/api/index.ts

@@ -12,6 +12,7 @@ import {
 	gameAttributesArrayToObject,
 	DEFAULT_JERSEY,
 	POSITIONS,
+	GRACE_PERIOD,
 } from "../../common";
 import actions from "./actions";
 import leagueFileUpload, {
@@ -2147,27 +2148,24 @@ const init = async (inputEnv: Env, conditions: Conditions) => {
 		(async () => {
 			// Account check needs to complete before initAds, though
 			await checkAccount(conditions);
-			await toUI("initAds", [local.goldUntil], conditions);
+			await toUI("initAds", ["accountChecked"], conditions);
 
 			// This might make another HTTP request, and is less urgent than ads
 			await checkChanges(conditions);
 		})();
 	} else {
 		// No need to run checkAccount and make another HTTP request
-		const currentTimestamp = Math.floor(Date.now() / 1000);
+		const currentTimestamp = Math.floor(Date.now() / 1000) - GRACE_PERIOD;
 		await toUI("updateLocal", [
 			{
 				gold: local.goldUntil < Infinity && currentTimestamp <= local.goldUntil,
 				username: local.username,
 			},
 		]);
 
-		// Even if it's not the first host tab, show ads (still async). Why
-		// setTimeout? Cause horrible race condition with actually rendering the
-		// ad divs. Need to move them more fully into React to solve this.
-		setTimeout(() => {
-			toUI("initAds", [local.goldUntil], conditions);
-		}, 0);
+		(async () => {
+			await toUI("initAds", ["accountChecked"], conditions);
+		})();
 	}
 
 	// Send options to all new tabs

src/worker/util/checkAccount.ts

@@ -1,4 +1,4 @@
-import { ACCOUNT_API_URL, fetchWrapper } from "../../common";
+import { ACCOUNT_API_URL, fetchWrapper, GRACE_PERIOD } from "../../common";
 import { idb } from "../db";
 import achievement from "./achievement";
 import local from "./local";
@@ -26,7 +26,7 @@ const checkAccount = async (
 		local.goldUntil = data.gold_until;
 		local.mailingList = !!data.mailing_list;
 		local.username = data.username === "" ? undefined : data.username;
-		const currentTimestamp = Math.floor(Date.now() / 1000);
+		const currentTimestamp = Math.floor(Date.now() / 1000) - GRACE_PERIOD;
 		await toUI("updateLocal", [
 			{
 				gold: currentTimestamp <= data.gold_until,