diff --git a/.dumi/pages/theme-editor/components/utils.tsx b/.dumi/pages/theme-editor/components/utils.tsx
deleted file mode 100644
index afc5450e5f..0000000000
--- a/.dumi/pages/theme-editor/components/utils.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export function isObject(target: any) {
-  return Object.prototype.toString.call(target) === '[object Object]';
-}
diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx
index c7b1aa8989..ed5c701e6b 100644
--- a/.dumi/pages/theme-editor/index.tsx
+++ b/.dumi/pages/theme-editor/index.tsx
@@ -1,13 +1,17 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, Suspense, useLayoutEffect } from 'react';
 import { enUS, ThemeEditor, zhCN } from 'antd-token-previewer';
-import { Button, ConfigProvider, message, Modal, Typography } from 'antd';
+import { Button, ConfigProvider, message, Modal, Spin, Typography } from 'antd';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
 import { Helmet } from 'dumi';
 import { css } from '@emotion/react';
 import type { JSONContent, TextContent } from 'vanilla-jsoneditor';
 import useLocale from '../../hooks/useLocale';
-import JSONEditor from './components/JSONEditor';
-import { isObject } from './components/utils';
+
+const JSONEditor = React.lazy(() => import('../../theme/common/JSONEditor'));
+
+function isObject(target: any) {
+  return Object.prototype.toString.call(target) === '[object Object]';
+}
 
 const locales = {
   cn: {
@@ -19,6 +23,7 @@ const locales = {
     editJsonContentTypeError: '主题 JSON 格式错误',
     editSuccessfully: '编辑成功',
     saveSuccessfully: '保存成功',
+    initialEditor: '正在初始化编辑器...',
   },
   en: {
     title: 'Theme Editor',
@@ -29,6 +34,7 @@ const locales = {
     editJsonContentTypeError: 'The theme of the JSON format is incorrect',
     editSuccessfully: 'Edited successfully',
     saveSuccessfully: 'Saved successfully',
+    initialEditor: 'Initializing Editor...',
   },
 };
 
@@ -58,7 +64,7 @@ const CustomTheme = () => {
     json: undefined,
   });
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME);
     if (storedConfig) {
       setTheme(() => JSON.parse(storedConfig));
@@ -154,11 +160,19 @@ const CustomTheme = () => {
               onOk={editSave}
               onCancel={editModelClose}
             >
-              <JSONEditor
-                content={themeConfigContent}
-                onChange={handleEditConfigChange}
-                mainMenuBar={false}
-              />
+              <Suspense
+                fallback={
+                  <div style={{ textAlign: 'center', width: '100%', padding: '24px 0' }}>
+                    <Spin tip={locale.initialEditor} />
+                  </div>
+                }
+              >
+                <JSONEditor
+                  content={themeConfigContent}
+                  onChange={handleEditConfigChange}
+                  mainMenuBar={false}
+                />
+              </Suspense>
             </Modal>
             <Button onClick={handleExport} style={{ marginRight: 8 }}>
               {locale.export}
diff --git a/.dumi/pages/theme-editor/components/JSONEditor.tsx b/.dumi/theme/common/JSONEditor/index.tsx
similarity index 100%
rename from .dumi/pages/theme-editor/components/JSONEditor.tsx
rename to .dumi/theme/common/JSONEditor/index.tsx