From 001775d6c3df1854a9b96257596d526cc74e8192 Mon Sep 17 00:00:00 2001
From: Shirasawa <764798966@qq.com>
Date: Wed, 17 Sep 2025 07:08:39 +0000
Subject: [PATCH] feat: Dynamically load CodeEditor to improve first-screen
 loading speed

---
 .../admin/Functions/FunctionEditor.svelte     | 31 ++++++++++---------
 .../components/chat/Messages/CodeBlock.svelte | 25 ++++++++-------
 .../workspace/Tools/ToolkitEditor.svelte      | 31 ++++++++++---------
 3 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/src/lib/components/admin/Functions/FunctionEditor.svelte b/src/lib/components/admin/Functions/FunctionEditor.svelte
index 1ef7bddc16..a711df2bfe 100644
--- a/src/lib/components/admin/Functions/FunctionEditor.svelte
+++ b/src/lib/components/admin/Functions/FunctionEditor.svelte
@@ -4,7 +4,6 @@
 
 	const i18n = getContext('i18n');
 
-	import CodeEditor from '$lib/components/common/CodeEditor.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import Badge from '$lib/components/common/Badge.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -367,20 +366,22 @@ class Pipe:
 				</div>
 
 				<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
-					<CodeEditor
-						bind:this={codeEditor}
-						value={content}
-						lang="python"
-						{boilerplate}
-						onChange={(e) => {
-							_content = e;
-						}}
-						onSave={async () => {
-							if (formElement) {
-								formElement.requestSubmit();
-							}
-						}}
-					/>
+					{#await import('$lib/components/common/CodeEditor.svelte') then { default: CodeEditor }}
+						<CodeEditor
+							bind:this={codeEditor}
+							value={content}
+							lang="python"
+							{boilerplate}
+							onChange={(e) => {
+								_content = e;
+							}}
+							onSave={async () => {
+								if (formElement) {
+									formElement.requestSubmit();
+								}
+							}}
+						/>
+					{/await}
 				</div>
 
 				<div class="pb-3 flex justify-between">
diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index c9ff9458ad..01e512eff3 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -7,7 +7,6 @@
 	import 'highlight.js/styles/github-dark.min.css';
 
 	import PyodideWorker from '$lib/workers/pyodide.worker?worker';
-	import CodeEditor from '$lib/components/common/CodeEditor.svelte';
 	import SvgPanZoom from '$lib/components/common/SVGPanZoom.svelte';
 	import { config } from '$lib/stores';
 	import { executeCode } from '$lib/apis/utils';
@@ -481,17 +480,19 @@
 
 				{#if !collapsed}
 					{#if edit}
-						<CodeEditor
-							value={code}
-							{id}
-							{lang}
-							onSave={() => {
-								saveCode();
-							}}
-							onChange={(value) => {
-								_code = value;
-							}}
-						/>
+						{#await import('$lib/components/common/CodeEditor.svelte') then { default: CodeEditor }}
+							<CodeEditor
+								value={code}
+								{id}
+								{lang}
+								onSave={() => {
+									saveCode();
+								}}
+								onChange={(value) => {
+									_code = value;
+								}}
+							/>
+						{/await}
 					{:else}
 						<pre
 							class=" hljs p-4 px-5 overflow-x-auto"
diff --git a/src/lib/components/workspace/Tools/ToolkitEditor.svelte b/src/lib/components/workspace/Tools/ToolkitEditor.svelte
index 71d1b900e9..9bf8b9cf44 100644
--- a/src/lib/components/workspace/Tools/ToolkitEditor.svelte
+++ b/src/lib/components/workspace/Tools/ToolkitEditor.svelte
@@ -3,7 +3,6 @@
 
 	const i18n = getContext('i18n');
 
-	import CodeEditor from '$lib/components/common/CodeEditor.svelte';
 	import { goto } from '$app/navigation';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import Badge from '$lib/components/common/Badge.svelte';
@@ -286,20 +285,22 @@ class Tools:
 				</div>
 
 				<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
-					<CodeEditor
-						bind:this={codeEditor}
-						value={content}
-						lang="python"
-						{boilerplate}
-						onChange={(e) => {
-							_content = e;
-						}}
-						onSave={async () => {
-							if (formElement) {
-								formElement.requestSubmit();
-							}
-						}}
-					/>
+					{#await import('$lib/components/common/CodeEditor.svelte') then { default: CodeEditor }}
+						<CodeEditor
+							bind:this={codeEditor}
+							value={content}
+							lang="python"
+							{boilerplate}
+							onChange={(e) => {
+								_content = e;
+							}}
+							onSave={async () => {
+								if (formElement) {
+									formElement.requestSubmit();
+								}
+							}}
+						/>
+					{/await}
 				</div>
 
 				<div class="pb-3 flex justify-between">