feat: performance optimization (#22810)

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)

web/app/components/i18n.tsx

@@ -1,10 +1,13 @@
 'use client'
 
 import type { FC } from 'react'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import I18NContext from '@/context/i18n'
 import type { Locale } from '@/i18n'
 import { setLocaleOnClient } from '@/i18n'
+import Loading from './base/loading'
+import { usePrefetchQuery } from '@tanstack/react-query'
+import { getSystemFeatures } from '@/service/common'
 
 export type II18nProps = {
   locale: Locale
@@ -14,10 +17,22 @@ const I18n: FC<II18nProps> = ({
   locale,
   children,
 }) => {
+  const [loading, setLoading] = useState(true)
+
+  usePrefetchQuery({
+    queryKey: ['systemFeatures'],
+    queryFn: getSystemFeatures,
+  })
+
   useEffect(() => {
-    setLocaleOnClient(locale, false)
+    setLocaleOnClient(locale, false).then(() => {
+      setLoading(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,

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

web/app/dev-only/i18n-checker/page.tsx

@@ -1,13 +1,19 @@
 'use client'
-import { resources } from '@/i18n/i18next-config'
-import { useEffect, useState } from 'react'
+import { loadLangResources } from '@/i18n/i18next-config'
+import { useCallback, useEffect, useState } from 'react'
 import cn from '@/utils/classnames'
+import { LanguagesSupported } from '@/i18n/language'
 
 export default function I18nTest() {
   const [langs, setLangs] = useState<Lang[]>([])
 
+  const getLangs = useCallback(async () => {
+    const langs = await genLangs()
+    setLangs(langs)
+  }, [])
+
   useEffect(() => {
-    setLangs(genLangs())
+    getLangs()
   }, [])
 
   return (
@@ -107,10 +113,15 @@ export default function I18nTest() {
   )
 }
 
-function genLangs() {
+async function genLangs() {
   const langs_: Lang[] = []
   let en!: Lang
 
+  const resources: Record<string, any> = {}
+  // Initialize empty resource object
+  for (const lang of LanguagesSupported)
+    resources[lang] = await loadLangResources(lang)
+
   for (const [key, value] of Object.entries(resources)) {
     const keys = getNestedKeys(value.translation)
     const lang: Lang = {

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)
-        setLocaleOnClient(language, false)
+        await setLocaleOnClient(language, false)
         router.replace('/apps')
       }
     }