From 81095f11df86c7736781d0ff518e92a0a0d8c94e Mon Sep 17 00:00:00 2001
From: shiyu <im@shiyu.dev>
Date: Mon, 22 Sep 2025 19:11:45 +0800
Subject: [PATCH] feat(TextEditor): lazy load Monaco and Markdown editors with
 suspense fallback

---
 web/src/apps/TextEditor/TextEditor.tsx | 49 ++++++++++++++------------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/web/src/apps/TextEditor/TextEditor.tsx b/web/src/apps/TextEditor/TextEditor.tsx
index fa1448d..97cb3f0 100644
--- a/web/src/apps/TextEditor/TextEditor.tsx
+++ b/web/src/apps/TextEditor/TextEditor.tsx
@@ -1,11 +1,12 @@
-import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo, Suspense } from 'react';
 import { Layout, Spin, Button, Space, message } from 'antd';
-import MDEditor from '@uiw/react-md-editor';
-import Editor from '@monaco-editor/react';
 import type { AppComponentProps } from '../types';
 import { vfsApi } from '../../api/vfs';
 import request from '../../api/client';
 
+const MonacoEditor = React.lazy(() => import('@monaco-editor/react'));
+const MarkdownEditor = React.lazy(() => import('@uiw/react-md-editor'));
+
 const { Header, Content } = Layout;
 
 export const TextEditorApp: React.FC<AppComponentProps> = ({ filePath, entry, onRequestClose }) => {
@@ -143,26 +144,30 @@ export const TextEditorApp: React.FC<AppComponentProps> = ({ filePath, entry, on
           </div>
         ) : (
           isMarkdown ? (
-            <MDEditor
-              value={content}
-              onChange={(val) => setContent(val || '')}
-              height="100%"
-              preview={truncated ? 'preview' : 'live'}
-            />
+            <Suspense fallback={<Spin style={{ marginTop: 24 }} />}>
+              <MarkdownEditor
+                value={content}
+                onChange={(val) => setContent(val || '')}
+                height="100%"
+                preview={truncated ? 'preview' : 'live'}
+              />
+            </Suspense>
           ) : (
-            <Editor
-              value={content}
-              onChange={(val) => setContent(val || '')}
-              height="100%"
-              language={monacoLanguage}
-              options={{
-                readOnly: truncated,
-                minimap: { enabled: false },
-                scrollBeyondLastLine: false,
-                wordWrap: 'on',
-                fontSize: 13,
-              }}
-            />
+            <Suspense fallback={<Spin style={{ marginTop: 24 }} />}>
+              <MonacoEditor
+                value={content}
+                onChange={(val) => setContent(val || '')}
+                height="100%"
+                language={monacoLanguage}
+                options={{
+                  readOnly: truncated,
+                  minimap: { enabled: false },
+                  scrollBeyondLastLine: false,
+                  wordWrap: 'on',
+                  fontSize: 13,
+                }}
+              />
+            </Suspense>
           )
         )}
       </Content>