Merge pull request #7761 from overleaf/ta-settings-loading-screen

Delay Settings Page Content Until Translations Are Ready

GitOrigin-RevId: 0537367f672bd2e88c95248d15c5638887ff3aee

services/web/frontend/js/features/settings/components/root.tsx

@@ -11,20 +11,32 @@ import LeaveSection from './leave-section'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import { UserProvider } from '../../../shared/context/user-context'
 import { SSOProvider } from '../context/sso-context'
+import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
 
 function SettingsPageRoot() {
-  const { t } = useTranslation()
-  const ssoError = getMeta('ol-ssoError') as string
+  const { isReady } = useWaitForI18n()
 
   useEffect(() => {
     eventTracking.sendMB('settings-view')
   }, [])
 
   return (
-    <UserProvider>
     <div className="container">
       <div className="row">
         <div className="col-md-12 col-lg-10 col-lg-offset-1">
+          {isReady ? <SettingsPageContent /> : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SettingsPageContent() {
+  const { t } = useTranslation()
+  const ssoError = getMeta('ol-ssoError') as string
+
+  return (
+    <UserProvider>
       {ssoError ? (
         <Alert bsStyle="danger">
           {t('sso_link_error')}: {t(ssoError)}
@@ -53,9 +65,6 @@ function SettingsPageRoot() {
           <LeaveSection />
         </div>
       </div>
-          </div>
-        </div>
-      </div>
     </UserProvider>
   )
 }

services/web/frontend/js/shared/hooks/use-wait-for-i18n.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react'
+import i18n from '../../../js/i18n'
+import { useTranslation } from 'react-i18next'
+
+function useWaitForI18n() {
+  const { ready: isHookReady } = useTranslation()
+  const [isLocaleDataLoaded, setIsLocaleDataLoaded] = useState(false)
+
+  useEffect(() => {
+    i18n.then(() => {
+      setIsLocaleDataLoaded(true)
+    })
+  }, [])
+
+  return {
+    isReady: isHookReady && isLocaleDataLoaded,
+  }
+}
+
+export default useWaitForI18n

services/web/test/frontend/features/settings/components/root.test.tsx

@@ -1,5 +1,5 @@
 import sinon from 'sinon'
-import { screen, render } from '@testing-library/react'
+import { screen, render, waitFor } from '@testing-library/react'
 import * as eventTracking from '../../../../../frontend/js/infrastructure/event-tracking'
 import SettingsPageRoot from '../../../../../frontend/js/features/settings/components/root'
 
@@ -34,6 +34,10 @@ describe('<SettingsPageRoot />', function () {
   it('displays page', async function () {
     render(<SettingsPageRoot />)
 
+    await waitFor(() => {
+      screen.getByText('Account Settings')
+    })
+
     screen.getByRole('button', {
       name: 'Delete your account',
     })