From e28fecd2f2ab7b4610cb105f86f7ab7a30beacc5 Mon Sep 17 00:00:00 2001
From: Pete Miller <miller.pete@gmail.com>
Date: Thu, 19 Jan 2023 12:15:25 -0800
Subject: [PATCH] New Tab Page: Wait for prefs to make their way to state
 before deciding whether Brave News should peek or not

Fixes race condition (between first render and prefs being fetched to state) which meant that some NTP page loads would unexpectedly not result in a peek of Brave News content
---
 .../containers/newTab/index.tsx               | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx
index 74329e07e263..d0fe4d3e26c8 100644
--- a/components/brave_new_tab_ui/containers/newTab/index.tsx
+++ b/components/brave_new_tab_ui/containers/newTab/index.tsx
@@ -144,20 +144,6 @@ class NewTabPage extends React.Component<Props, State> {
       this.trackBrandedWallpaperNotificationAutoDismiss()
     }
     this.checkShouldOpenSettings()
-    // Only prompt for brave today if we're not scrolling down.
-    const shouldPromptBraveToday =
-      this.props.newTabData.featureFlagBraveNewsPromptEnabled &&
-      this.props.newTabData.showToday &&
-      !this.props.todayData.articleScrollTo
-    if (shouldPromptBraveToday) {
-      this.braveNewsPromptTimerId = window.setTimeout(() => {
-        if (window.scrollY > 0) {
-          // Don't do anything if user has already scrolled
-          return
-        }
-        this.setState({ isPromptingBraveToday: true })
-      }, 1700)
-    }
     const searchPromotionEnabled = this.props.newTabData.searchPromotionEnabled
     this.setState({
       showSearchPromotion: searchPromotionEnabled,
@@ -174,6 +160,7 @@ class NewTabPage extends React.Component<Props, State> {
   }
 
   componentDidUpdate (prevProps: Props) {
+    this.maybePeekBraveNews()
     const oldImageSource = GetBackgroundImageSrc(prevProps)
     const newImageSource = GetBackgroundImageSrc(this.props)
     this.imageSource = newImageSource
@@ -196,6 +183,30 @@ class NewTabPage extends React.Component<Props, State> {
     }
   }
 
+  maybePeekBraveNews () {
+    const hasPromptedBraveNews = !!this.braveNewsPromptTimerId
+    const shouldPromptBraveNews =
+      !hasPromptedBraveNews && // Don't start a prompt if we already did
+      window.scrollY === 0 && // Don't start a prompt if we are scrolled
+      this.props.newTabData.featureFlagBraveNewsPromptEnabled &&
+      this.props.newTabData.initialDataLoaded && // Wait for accurate showToday
+      this.props.newTabData.showToday &&
+      // Don't prompt if the user has navigated back and we're going to scroll
+      // down to a previous place in the feed.
+      !this.props.todayData.articleScrollTo
+    if (shouldPromptBraveNews) {
+      this.braveNewsPromptTimerId = window.setTimeout(() => {
+        if (window.scrollY > 0) {
+          // If the user happens to start scrolling whilst waiting for the timer,
+          // make sure we cancel the timer otherwise content will shift and provide
+          // a poor UX.
+          return
+        }
+        this.setState({ isPromptingBraveToday: true })
+      }, 1700)
+    }
+  }
+
   shouldOverrideReadabilityColor (newTabData: NewTab.State) {
     return !newTabData.brandedWallpaper && newTabData.backgroundWallpaper?.type === 'color' && !isReadableOnBackground(newTabData.backgroundWallpaper)
   }