diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
index 7c835e4d1..cd43f0cd0 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -52,7 +52,7 @@ import { RootFolderListView } from "./RootFolderListView";
 import { fetchFolderElements, updateFolder } from "../../redux/reduxActions/folderActions";
 // import { ModuleView } from "./ModuleView";
 // import { useCreateFolder } from "./useCreateFolder";
-import { trans } from "../../i18n";
+import {initTranslator, trans} from "../../i18n";
 import { foldersSelector } from "../../redux/selectors/folderSelector";
 import Setting from "pages/setting";
 import { Support } from "pages/support";
@@ -67,6 +67,7 @@ import { ReduxActionTypes } from '@lowcoder-ee/constants/reduxActionConstants';
 import AppEditor from "../editor/AppEditor";
 import { set } from "lodash";
 import {MultiIconDisplay} from "@lowcoder-ee/comps/comps/multiIconDisplay";
+import {initTranslator as initTranslatorDesign} from "i18n/design";
 
 const TabLabel = styled.div`
   font-weight: 500;
@@ -147,7 +148,17 @@ const DivStyled = styled.div`
   }
 `;
 
+const initialize = async () => {
+  try {
+    await initTranslatorDesign();
+    await initTranslator();
+  } catch (error) {
+    console.error('Initialization failed:', error);
+  }
+};
+
 export default function ApplicationHome() {
+  const [isInitialized, setIsInitialized] = useState(false);
   const dispatch = useDispatch();
   const [isPreloadCompleted, setIsPreloadCompleted] = useState(false);
   const fetchingUser = useSelector(isFetchingUser);
@@ -163,6 +174,10 @@ export default function ApplicationHome() {
 
   const isOrgAdmin = org?.createdBy == user.id ? true : false;
 
+  useEffect(() => {
+    initialize().then(() => setIsInitialized(true));
+  }, []);
+
   useEffect(() => {
     dispatch(fetchHomeData({}));
     dispatch(fetchSubscriptionsAction());
@@ -197,7 +212,7 @@ export default function ApplicationHome() {
     user.currentOrgId && dispatch(fetchFolderElements({}));
   }, [dispatch, allFoldersCount, user.currentOrgId]);
 
-  if (fetchingUser || !isPreloadCompleted) {
+  if (!isInitialized || fetchingUser || !isPreloadCompleted) {
     return <ProductLoading />;
   }
 
diff --git a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
index f73d3f511..05c0ab428 100644
--- a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
+++ b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
@@ -34,8 +34,10 @@ import Flex from "antd/es/flex";
 import React from "react";
 import dayjs from "dayjs";
 import { currentApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
-import { notificationInstance } from "components/GlobalInstances";
 import { AppState } from "@lowcoder-ee/redux/reducers";
+import { notificationInstance } from "components/GlobalInstances";
+import { initTranslator as initTranslatorDesign } from "i18n/design";
+import { initTranslator } from "@lowcoder-ee/i18n";
 
 const AppSnapshot = lazy(() => {
   return import("pages/editor/appSnapshot")
@@ -47,7 +49,17 @@ const AppEditorInternalView = lazy(
     .then(moduleExports => ({default: moduleExports.AppEditorInternalView}))
 );
 
+const initialize = async () => {
+  try {
+    await initTranslatorDesign();
+    await initTranslator();
+  } catch (error) {
+    console.error('Initialization failed:', error);
+  }
+};
+
 const AppEditor = React.memo(() => {
+  const [isInitialized, setIsInitialized] = useState(false);
   const dispatch = useDispatch();
   const params = useParams<AppPathParams>();
   const isUserViewModeCheck = useUserViewMode();
@@ -202,6 +214,14 @@ const AppEditor = React.memo(() => {
     </Flex>
   ), []);
 
+  useEffect(() => {
+    initialize().then(() => setIsInitialized(true));
+  }, []);
+
+  if (!isInitialized) {
+    return <EditorSkeletonView />;
+  }
+
   if (Boolean(appError)) {
     return (
       <Flex align="center" justify="center" vertical style={{
diff --git a/client/packages/lowcoder/src/pages/editor/right/InsertView.tsx b/client/packages/lowcoder/src/pages/editor/right/InsertView.tsx
index 2340506bf..6969fed99 100644
--- a/client/packages/lowcoder/src/pages/editor/right/InsertView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/InsertView.tsx
@@ -29,17 +29,6 @@ const InsertViewHeader = styled.div`
   }
 `;
 
-const options = [
-  {
-    value: "ui",
-    label: trans("rightPanel.uiComponentTab"),
-  },
-  {
-    value: "extension",
-    label: trans("rightPanel.extensionTab"),
-  },
-];
-
 interface InsertViewProps {
   onCompDrag: (dragCompKey: string) => void;
 }
@@ -49,6 +38,17 @@ export default function InsertView(props: InsertViewProps) {
   const [searchValue, setSearchValue] = useState("");
   const [activeKey, setActiveKey] = useState<OptionValue>("ui");
 
+  const options = [
+    {
+      value: "ui",
+      label: trans("rightPanel.uiComponentTab"),
+    },
+    {
+      value: "extension",
+      label: trans("rightPanel.extensionTab"),
+    },
+  ];
+
   return (
     <Wrapper>
       <InsertViewHeader>