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 7d3e09fc21..ba0c149ae7 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') })
 
-      setLocaleOnClient(item.value.toString())
+      await 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 f04f8d6cbe..2493e5b5af 100644
--- a/web/app/components/i18n.tsx
+++ b/web/app/components/i18n.tsx
@@ -1,10 +1,11 @@
 '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'
 
 export type II18nProps = {
   locale: Locale
@@ -14,10 +15,17 @@ const I18n: FC<II18nProps> = ({
   locale,
   children,
 }) => {
+  const [loading, setLoading] = useState(true)
+
   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,
diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx
index 0efd30b6cc..c6e3b8a4f7 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={(value) => {
-            setLocaleOnClient(value as Locale)
+          onChange={async (value) => {
+            await 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 1ff1c7d671..ea35900968 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)
-        setLocaleOnClient(language, false)
+        await setLocaleOnClient(language, false)
         router.replace('/apps')
       }
     }
diff --git a/web/context/i18n.ts b/web/context/i18n.ts
index ef53a4b481..dbad9ce792 100644
--- a/web/context/i18n.ts
+++ b/web/context/i18n.ts
@@ -9,13 +9,15 @@ import { noop } from 'lodash-es'
 type II18NContext = {
   locale: Locale
   i18n: Record<string, any>
-  setLocaleOnClient: (_lang: Locale, _reloadPage?: boolean) => void
+  setLocaleOnClient: (_lang: Locale, _reloadPage?: boolean) => Promise<void>
 }
 
 const I18NContext = createContext<II18NContext>({
   locale: 'en-US',
   i18n: {},
-  setLocaleOnClient: noop,
+  setLocaleOnClient: async () => {
+    noop()
+  },
 })
 
 export const useI18N = () => useContext(I18NContext)
diff --git a/web/i18n/index.ts b/web/i18n/index.ts
index eb49759097..27ed3022ad 100644
--- a/web/i18n/index.ts
+++ b/web/i18n/index.ts
@@ -11,9 +11,9 @@ export const i18n = {
 
 export type Locale = typeof i18n['locales'][number]
 
-export const setLocaleOnClient = (locale: Locale, reloadPage = true) => {
+export const setLocaleOnClient = async (locale: Locale, reloadPage = true) => {
   Cookies.set(LOCALE_COOKIE_NAME, locale, { expires: 365 })
-  changeLanguage(locale)
+  await changeLanguage(locale)
   reloadPage && location.reload()
 }