fix: store loadingText as key and localize on render (#12022)

frontend/src/layout/index.vue

@@ -62,6 +62,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { loadMasterProductProFromDB, loadProductProFromDB } from '@/utils/xpack';
 import { useTheme } from '@/global/use-theme';
 import TaskList from '@/components/task-list/index.vue';
+import i18n from '@/lang';
 const { switchTheme } = useTheme();
 
 useResize();
@@ -80,7 +81,9 @@ const globalStore = GlobalStore();
 const tabsStore = TabsStore();
 
 const loading = ref(false);
-const loadingText = ref();
+const loadingText = computed(() =>
+    globalStore.loadingText ? i18n.global.t(`commons.loadingText.${globalStore.loadingText}`) : '',
+);
 
 let timer: NodeJS.Timer | null = null;
 
@@ -140,7 +143,6 @@ const toLogin = () => {
 
 const loadStatus = async () => {
     loading.value = globalStore.isLoading;
-    loadingText.value = globalStore.loadingText;
     if (loading.value) {
         timer = setInterval(async () => {
             await getSystemAvailable()

frontend/src/store/modules/global.ts

@@ -77,7 +77,7 @@ const GlobalStore = defineStore({
             this.isLoading = loading;
         },
         setLoadingText(text: string) {
-            this.loadingText = i18n.global.t('commons.loadingText.' + text);
+            this.loadingText = text;
         },
         setCsrfToken(token: string) {
             this.csrfToken = token;