docs: fix prerender (#39864)

* docs: fix prerender

* chore: add fallback

* chore: update spin

* chore: code clean

.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}