Merge pull request Expensify#89149 from TaduJR/fix-Web-Document-title-flickers-when-navigating-away-from-expense-report

fix: Web - Document title flickers when navigating away from expense report

Author: yuwenmemon

src/libs/UnreadIndicatorUpdater/updateUnread/index.ts

@@ -26,32 +26,30 @@ Onyx.connectWithoutView({
  */
 function setPageTitle(title: string) {
     currentPageTitle = title;
-    // Immediately update the document title when page title changes
     updateDocumentTitle();
 }
 
 /**
- * Update the actual document title and favicon
+ * Synchronous on purpose. Deferring (setTimeout/queueMicrotask) loses a race with React Navigation's
+ * createMemoryHistory popstate handler, which captures and re-asserts document.title — re-applying
+ * the stale value if our write hasn't landed yet.
  */
 function updateDocumentTitle() {
+    if (typeof document === 'undefined') {
+        return;
+    }
     const hasUnread = unreadTotalCount !== 0;
-    // This setTimeout is required because due to how react rendering messes with the DOM, the document title can't be modified synchronously, and we must wait until all JS is done
-    // running before setting the title.
-    setTimeout(() => {
-        // There is a Chrome browser bug that causes the title to revert back to the previous when we are navigating back. Setting the title to an empty string
-        // seems to improve this issue.
-        document.title = '';
 
-        // Use page-specific title if available, otherwise use the default SITE_TITLE
-        const baseTitle = currentPageTitle || CONFIG.SITE_TITLE;
-        const titleWithUnread = hasUnread ? `(${unreadTotalCount}) ${baseTitle}` : baseTitle;
-        document.title = shouldShowBranchNameInTitle && __GIT_BRANCH__ ? `[${__GIT_BRANCH__}] ${titleWithUnread}` : titleWithUnread;
+    // Chrome reverts the tab title to the previous entry on back navigation; blanking it first forces a refresh.
+    document.title = '';
+    const baseTitle = currentPageTitle || CONFIG.SITE_TITLE;
+    const titleWithUnread = hasUnread ? `(${unreadTotalCount}) ${baseTitle}` : baseTitle;
+    document.title = shouldShowBranchNameInTitle && __GIT_BRANCH__ ? `[${__GIT_BRANCH__}] ${titleWithUnread}` : titleWithUnread;
 
-        const favicon = document.getElementById('favicon');
-        if (favicon instanceof HTMLLinkElement) {
-            favicon.href = hasUnread ? CONFIG.FAVICON.UNREAD : CONFIG.FAVICON.DEFAULT;
-        }
-    }, 0);
+    const favicon = document.getElementById('favicon');
+    if (favicon instanceof HTMLLinkElement) {
+        favicon.href = hasUnread ? CONFIG.FAVICON.UNREAD : CONFIG.FAVICON.DEFAULT;
+    }
 }
 
 /**