feat: performance optimization (#22810)

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