From c8f09515042e186fa76813452ae636ec52d8fc31 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Tue, 22 Jul 2025 23:28:33 +0800
Subject: [PATCH] refactor: optimize locale setting by removing unnecessary
 async/await and restructuring language resource loading

---
 .../[appId]/overview/tracing/panel.tsx        | 66 ++++++++++------
 .../account-setting/language-page/index.tsx   |  2 +-
 web/app/components/i18n.tsx                   | 12 +--
 .../plugins/base/deprecation-notice.tsx       |  4 +-
 web/app/signin/_header.tsx                    |  4 +-
 web/app/signin/invite-settings/page.tsx       |  2 +-
 web/context/i18n.ts                           |  6 +-
 web/i18n/i18next-config.ts                    | 76 +++++++++++--------
 web/i18n/index.ts                             |  2 +-
 web/utils/format.ts                           |  4 -
 10 files changed, 98 insertions(+), 80 deletions(-)

diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
index 8bf18904be..d082523222 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -83,27 +83,50 @@ const Panel: FC = () => {
   const hasConfiguredTracing = !!(langSmithConfig || langFuseConfig || opikConfig || weaveConfig || arizeConfig || phoenixConfig || aliyunConfig)
 
   const fetchTracingConfig = async () => {
-    const { tracing_config: arizeConfig, has_not_configured: arizeHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.arize })
-    if (!arizeHasNotConfig)
-      setArizeConfig(arizeConfig as ArizeConfig)
-    const { tracing_config: phoenixConfig, has_not_configured: phoenixHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.phoenix })
-    if (!phoenixHasNotConfig)
-      setPhoenixConfig(phoenixConfig as PhoenixConfig)
-    const { tracing_config: langSmithConfig, has_not_configured: langSmithHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.langSmith })
-    if (!langSmithHasNotConfig)
-      setLangSmithConfig(langSmithConfig as LangSmithConfig)
-    const { tracing_config: langFuseConfig, has_not_configured: langFuseHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.langfuse })
-    if (!langFuseHasNotConfig)
-      setLangFuseConfig(langFuseConfig as LangFuseConfig)
-    const { tracing_config: opikConfig, has_not_configured: OpikHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.opik })
-    if (!OpikHasNotConfig)
-      setOpikConfig(opikConfig as OpikConfig)
-    const { tracing_config: weaveConfig, has_not_configured: weaveHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.weave })
-    if (!weaveHasNotConfig)
-      setWeaveConfig(weaveConfig as WeaveConfig)
-    const { tracing_config: aliyunConfig, has_not_configured: aliyunHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.aliyun })
-    if (!aliyunHasNotConfig)
-      setAliyunConfig(aliyunConfig as AliyunConfig)
+    const getArizeConfig = async () => {
+      const { tracing_config: arizeConfig, has_not_configured: arizeHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.arize })
+      if (!arizeHasNotConfig)
+        setArizeConfig(arizeConfig as ArizeConfig)
+    }
+    const getPhoenixConfig = async () => {
+      const { tracing_config: phoenixConfig, has_not_configured: phoenixHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.phoenix })
+      if (!phoenixHasNotConfig)
+        setPhoenixConfig(phoenixConfig as PhoenixConfig)
+    }
+    const getLangSmithConfig = async () => {
+      const { tracing_config: langSmithConfig, has_not_configured: langSmithHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.langSmith })
+      if (!langSmithHasNotConfig)
+        setLangSmithConfig(langSmithConfig as LangSmithConfig)
+    }
+    const getLangFuseConfig = async () => {
+      const { tracing_config: langFuseConfig, has_not_configured: langFuseHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.langfuse })
+      if (!langFuseHasNotConfig)
+        setLangFuseConfig(langFuseConfig as LangFuseConfig)
+    }
+    const getOpikConfig = async () => {
+      const { tracing_config: opikConfig, has_not_configured: OpikHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.opik })
+      if (!OpikHasNotConfig)
+        setOpikConfig(opikConfig as OpikConfig)
+    }
+    const getWeaveConfig = async () => {
+      const { tracing_config: weaveConfig, has_not_configured: weaveHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.weave })
+      if (!weaveHasNotConfig)
+        setWeaveConfig(weaveConfig as WeaveConfig)
+    }
+    const getAliyunConfig = async () => {
+      const { tracing_config: aliyunConfig, has_not_configured: aliyunHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.aliyun })
+      if (!aliyunHasNotConfig)
+        setAliyunConfig(aliyunConfig as AliyunConfig)
+    }
+    Promise.all([
+      getArizeConfig(),
+      getPhoenixConfig(),
+      getLangSmithConfig(),
+      getLangFuseConfig(),
+      getOpikConfig(),
+      getWeaveConfig(),
+      getAliyunConfig(),
+    ])
   }
 
   const handleTracingConfigUpdated = async (provider: TracingProvider) => {
@@ -155,7 +178,6 @@ const Panel: FC = () => {
       await fetchTracingConfig()
       setLoaded()
     })()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const [controlShowPopup, setControlShowPopup] = useState<number>(0)
diff --git a/web/app/components/header/account-setting/language-page/index.tsx b/web/app/components/header/account-setting/language-page/index.tsx
index ba0c149ae7..7d3e09fc21 100644
--- a/web/app/components/header/account-setting/language-page/index.tsx
+++ b/web/app/components/header/account-setting/language-page/index.tsx
@@ -32,7 +32,7 @@ export default function LanguagePage() {
       await updateUserProfile({ url, body: { [bodyKey]: item.value } })
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
 
-      await setLocaleOnClient(item.value.toString())
+      setLocaleOnClient(item.value.toString())
     }
     catch (e) {
       notify({ type: 'error', message: (e as Error).message })
diff --git a/web/app/components/i18n.tsx b/web/app/components/i18n.tsx
index 2493e5b5af..f04f8d6cbe 100644
--- a/web/app/components/i18n.tsx
+++ b/web/app/components/i18n.tsx
@@ -1,11 +1,10 @@
 'use client'
 
 import type { FC } from 'react'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import I18NContext from '@/context/i18n'
 import type { Locale } from '@/i18n'
 import { setLocaleOnClient } from '@/i18n'
-import Loading from './base/loading'
 
 export type II18nProps = {
   locale: Locale
@@ -15,17 +14,10 @@ const I18n: FC<II18nProps> = ({
   locale,
   children,
 }) => {
-  const [loading, setLoading] = useState(true)
-
   useEffect(() => {
-    setLocaleOnClient(locale, false).then(() => {
-      setLoading(false)
-    })
+    setLocaleOnClient(locale, false)
   }, [locale])
 
-  if (loading)
-    return <div className='flex h-screen w-screen items-center justify-center'><Loading type='app' /></div>
-
   return (
     <I18NContext.Provider value={{
       locale,
diff --git a/web/app/components/plugins/base/deprecation-notice.tsx b/web/app/components/plugins/base/deprecation-notice.tsx
index 2366d31bac..380917a986 100644
--- a/web/app/components/plugins/base/deprecation-notice.tsx
+++ b/web/app/components/plugins/base/deprecation-notice.tsx
@@ -4,8 +4,8 @@ import Link from 'next/link'
 import cn from '@/utils/classnames'
 import { RiAlertFill } from '@remixicon/react'
 import { Trans } from 'react-i18next'
-import { snakeCase2CamelCase } from '@/utils/format'
 import { useMixedTranslation } from '../marketplace/hooks'
+import { camelCase } from 'lodash-es'
 
 type DeprecationNoticeProps = {
   status: 'deleted' | 'active'
@@ -36,7 +36,7 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
 
   const deprecatedReasonKey = useMemo(() => {
     if (!deprecatedReason) return ''
-    return snakeCase2CamelCase(deprecatedReason)
+    return camelCase(deprecatedReason)
   }, [deprecatedReason])
 
   // Check if the deprecatedReasonKey exists in i18n
diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx
index c6e3b8a4f7..0efd30b6cc 100644
--- a/web/app/signin/_header.tsx
+++ b/web/app/signin/_header.tsx
@@ -36,8 +36,8 @@ const Header = () => {
         <Select
           value={locale}
           items={languages.filter(item => item.supported)}
-          onChange={async (value) => {
-            await setLocaleOnClient(value as Locale)
+          onChange={(value) => {
+            setLocaleOnClient(value as Locale)
           }}
         />
         <Divider type='vertical' className='mx-0 ml-2 h-4' />
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index ea35900968..1ff1c7d671 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -57,7 +57,7 @@ export default function InviteSettingsPage() {
       if (res.result === 'success') {
         localStorage.setItem('console_token', res.data.access_token)
         localStorage.setItem('refresh_token', res.data.refresh_token)
-        await setLocaleOnClient(language, false)
+        setLocaleOnClient(language, false)
         router.replace('/apps')
       }
     }
diff --git a/web/context/i18n.ts b/web/context/i18n.ts
index dbad9ce792..ef53a4b481 100644
--- a/web/context/i18n.ts
+++ b/web/context/i18n.ts
@@ -9,15 +9,13 @@ import { noop } from 'lodash-es'
 type II18NContext = {
   locale: Locale
   i18n: Record<string, any>
-  setLocaleOnClient: (_lang: Locale, _reloadPage?: boolean) => Promise<void>
+  setLocaleOnClient: (_lang: Locale, _reloadPage?: boolean) => void
 }
 
 const I18NContext = createContext<II18NContext>({
   locale: 'en-US',
   i18n: {},
-  setLocaleOnClient: async () => {
-    noop()
-  },
+  setLocaleOnClient: noop,
 })
 
 export const useI18N = () => useContext(I18NContext)
diff --git a/web/i18n/i18next-config.ts b/web/i18n/i18next-config.ts
index 429082b532..b3962050a2 100644
--- a/web/i18n/i18next-config.ts
+++ b/web/i18n/i18next-config.ts
@@ -1,49 +1,59 @@
 'use client'
 import i18n from 'i18next'
+import { camelCase } from 'lodash-es'
 import { initReactI18next } from 'react-i18next'
 
-const requireSilent = async (lang: string) => {
+const requireSilent = async (lang: string, namespace: string) => {
   let res
   try {
-    res = (await import(`./${lang}/education`)).default
+    res = (await import(`./${lang}/${namespace}`)).default
   }
   catch {
-    res = (await import('./en-US/education')).default
+    res = (await import(`./en-US/${namespace}`)).default
   }
 
   return res
 }
 
-export const loadLangResources = async (lang: string) => ({
-  translation: {
-    common: (await import(`./${lang}/common`)).default,
-    layout: (await import(`./${lang}/layout`)).default,
-    login: (await import(`./${lang}/login`)).default,
-    register: (await import(`./${lang}/register`)).default,
-    app: (await import(`./${lang}/app`)).default,
-    appOverview: (await import(`./${lang}/app-overview`)).default,
-    appDebug: (await import(`./${lang}/app-debug`)).default,
-    appApi: (await import(`./${lang}/app-api`)).default,
-    appLog: (await import(`./${lang}/app-log`)).default,
-    appAnnotation: (await import(`./${lang}/app-annotation`)).default,
-    share: (await import(`./${lang}/share-app`)).default,
-    dataset: (await import(`./${lang}/dataset`)).default,
-    datasetDocuments: (await import(`./${lang}/dataset-documents`)).default,
-    datasetHitTesting: (await import(`./${lang}/dataset-hit-testing`)).default,
-    datasetSettings: (await import(`./${lang}/dataset-settings`)).default,
-    datasetCreation: (await import(`./${lang}/dataset-creation`)).default,
-    explore: (await import(`./${lang}/explore`)).default,
-    billing: (await import(`./${lang}/billing`)).default,
-    custom: (await import(`./${lang}/custom`)).default,
-    tools: (await import(`./${lang}/tools`)).default,
-    workflow: (await import(`./${lang}/workflow`)).default,
-    runLog: (await import(`./${lang}/run-log`)).default,
-    plugin: (await import(`./${lang}/plugin`)).default,
-    pluginTags: (await import(`./${lang}/plugin-tags`)).default,
-    time: (await import(`./${lang}/time`)).default,
-    education: (await requireSilent(lang)).default,
-  },
-})
+const NAMESPACES = [
+  'app-annotation',
+  'app-api',
+  'app-debug',
+  'app-log',
+  'app-overview',
+  'app',
+  'billing',
+  'common',
+  'custom',
+  'dataset-creation',
+  'dataset-documents',
+  'dataset-hit-testing',
+  'dataset-settings',
+  'dataset',
+  'education',
+  'explore',
+  'layout',
+  'login',
+  'plugin-tags',
+  'plugin',
+  'register',
+  'run-log',
+  'share-app',
+  'time',
+  'tools',
+  'workflow',
+]
+
+export const loadLangResources = async (lang: string) => {
+  const modules = await Promise.all(NAMESPACES.map(ns => requireSilent(lang, ns)))
+  const resources = modules.reduce((acc, mod, index) => {
+    acc[camelCase(NAMESPACES[index])] = mod
+    return acc
+  }, {} as Record<string, any>)
+  return {
+    translation: resources,
+  }
+}
 
 i18n.use(initReactI18next)
   .init({
diff --git a/web/i18n/index.ts b/web/i18n/index.ts
index 27ed3022ad..9506e146fa 100644
--- a/web/i18n/index.ts
+++ b/web/i18n/index.ts
@@ -13,7 +13,7 @@ export type Locale = typeof i18n['locales'][number]
 
 export const setLocaleOnClient = async (locale: Locale, reloadPage = true) => {
   Cookies.set(LOCALE_COOKIE_NAME, locale, { expires: 365 })
-  await changeLanguage(locale)
+  changeLanguage(locale)
   reloadPage && location.reload()
 }
 
diff --git a/web/utils/format.ts b/web/utils/format.ts
index 781ec90815..720c8f6762 100644
--- a/web/utils/format.ts
+++ b/web/utils/format.ts
@@ -56,7 +56,3 @@ export const downloadFile = ({ data, fileName }: { data: Blob; fileName: string
   a.remove()
   window.URL.revokeObjectURL(url)
 }
-
-export const snakeCase2CamelCase = (input: string): string => {
-  return input.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())
-}