From 841af03393c4c4212153e460e02af255fb2cbee0 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Fri, 25 Apr 2025 08:09:06 -0400
Subject: [PATCH] fix: load ND_DEFAULTLANGUAGE on app startup

Added  in  to apply  on initial mount, ensuring the locale is set even when the login page is skipped by reverse-proxy authentication. Removed the redundant language-init effect from . Fixes #3605.
---
 ui/src/App.jsx          | 24 ++++++++++++++++++++++--
 ui/src/layout/Login.jsx | 24 +-----------------------
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/ui/src/App.jsx b/ui/src/App.jsx
index a3a34a5f3..6c7ea3bb5 100644
--- a/ui/src/App.jsx
+++ b/ui/src/App.jsx
@@ -1,7 +1,7 @@
 import ReactGA from 'react-ga'
 import { Provider } from 'react-redux'
 import { createHashHistory } from 'history'
-import { Admin as RAAdmin, Resource } from 'react-admin'
+import { Admin as RAAdmin, Resource, useSetLocale, useRefresh } from 'react-admin'
 import { HotKeys } from 'react-hotkeys'
 import dataProvider from './dataProvider'
 import authProvider from './authProvider'
@@ -31,7 +31,7 @@ import {
   shareDialogReducer,
 } from './reducers'
 import createAdminStore from './store/createAdminStore'
-import { i18nProvider } from './i18n'
+import { i18nProvider, retrieveTranslation } from './i18n'
 import config, { shareInfo } from './config'
 import { keyMap } from './hotkeys'
 import useChangeThemeColor from './useChangeThemeColor'
@@ -39,6 +39,7 @@ import SharePlayer from './share/SharePlayer'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import { DndProvider } from 'react-dnd'
 import missing from './missing/index.js'
+import { useEffect } from 'react'
 
 const history = createHashHistory()
 
@@ -143,6 +144,25 @@ const Admin = (props) => {
 }
 
 const AppWithHotkeys = () => {
+  // Initialize default language on app mount
+  const setLocale = useSetLocale()
+  const refresh = useRefresh()
+  useEffect(() => {
+    if (config.defaultLanguage !== '' && !localStorage.getItem('locale')) {
+      retrieveTranslation(config.defaultLanguage)
+        .then(() => {
+          setLocale(config.defaultLanguage).then(() => {
+            localStorage.setItem('locale', config.defaultLanguage)
+          })
+          refresh(true)
+        })
+        .catch((e) => {
+          throw new Error(
+            'Cannot load language "' + config.defaultLanguage + '": ' + e
+          )
+        })
+    }
+  }, [setLocale, refresh])
   let language = localStorage.getItem('locale') || 'en'
   document.documentElement.lang = language
   if (config.enableSharing && shareInfo) {
diff --git a/ui/src/layout/Login.jsx b/ui/src/layout/Login.jsx
index 2244f4dfd..7b1c752bf 100644
--- a/ui/src/layout/Login.jsx
+++ b/ui/src/layout/Login.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react'
+import React, { useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { Field, Form } from 'react-final-form'
 import { useDispatch } from 'react-redux'
@@ -13,8 +13,6 @@ import {
   createMuiTheme,
   useLogin,
   useNotify,
-  useRefresh,
-  useSetLocale,
   useTranslate,
   useVersion,
 } from 'react-admin'
@@ -24,7 +22,6 @@ import Notification from './Notification'
 import useCurrentTheme from '../themes/useCurrentTheme'
 import config from '../config'
 import { clearQueue } from '../actions'
-import { retrieveTranslation } from '../i18n'
 import { INSIGHTS_DOC_URL } from '../consts.js'
 
 const useStyles = makeStyles(
@@ -400,27 +397,8 @@ Login.propTypes = {
 // the right theme
 const LoginWithTheme = (props) => {
   const theme = useCurrentTheme()
-  const setLocale = useSetLocale()
-  const refresh = useRefresh()
   const version = useVersion()
 
-  useEffect(() => {
-    if (config.defaultLanguage !== '' && !localStorage.getItem('locale')) {
-      retrieveTranslation(config.defaultLanguage)
-        .then(() => {
-          setLocale(config.defaultLanguage).then(() => {
-            localStorage.setItem('locale', config.defaultLanguage)
-          })
-          refresh(true)
-        })
-        .catch((e) => {
-          throw new Error(
-            'Cannot load language "' + config.defaultLanguage + '": ' + e,
-          )
-        })
-    }
-  }, [refresh, setLocale])
-
   return (
     <ThemeProvider theme={createMuiTheme(theme)}>
       <Login key={version} {...props} />