Merge pull request #25691 from overleaf/ae-project-list-nav

Move isReady out of DefaultNavbar component

GitOrigin-RevId: 66f19620399e405c9ef4d95f7aef3ab918da5aa1

services/web/frontend/js/features/header-footer-react/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client'
 import getMeta from '@/utils/meta'
-import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
+import { DefaultNavbarRoot } from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
 import Footer from '@/features/ui/components/bootstrap-5/footer/footer'
 import { SplitTestProvider } from '@/shared/context/split-test-context'
 
@@ -10,7 +10,7 @@ if (navbarElement) {
   const root = createRoot(navbarElement)
   root.render(
     <SplitTestProvider>
-      <DefaultNavbar {...navbarProps} />
+      <DefaultNavbarRoot {...navbarProps} />
     </SplitTestProvider>
   )
 }

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx

@@ -34,7 +34,6 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
     items,
   } = props
   const { t } = useTranslation()
-  const { isReady } = useWaitForI18n()
   const [expanded, setExpanded] = useState(false)
 
   // The Contact Us modal is rendered at this level rather than inside the nav
@@ -44,10 +43,6 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
       autofillProjectUrl: false,
     })
 
-  if (!isReady) {
-    return null
-  }
-
   return (
     <>
       <Navbar
@@ -142,4 +137,14 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
   )
 }
 
+export const DefaultNavbarRoot = (props: DefaultNavbarMetadata) => {
+  const { isReady } = useWaitForI18n()
+
+  if (!isReady) {
+    return null
+  }
+
+  return <DefaultNavbar {...props} />
+}
+
 export default DefaultNavbar

services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx

@@ -384,7 +384,7 @@ describe('<EmailsSection />', function () {
       department: customDepartment,
     })
 
-    screen.getByText(
+    await screen.findByText(
       `Enter the 6-digit confirmation code sent to ${userEmailData.email}.`
     )