From aabd4923007ae09da061df88ef106b30cae999e8 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Wed, 29 Apr 2026 23:46:27 +0800
Subject: [PATCH] perf: lazy load home image editor

---
 components/home/lovart-home.tsx | 40 ++++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/components/home/lovart-home.tsx b/components/home/lovart-home.tsx
index 5bc1c9957..a77d02ffa 100644
--- a/components/home/lovart-home.tsx
+++ b/components/home/lovart-home.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
 import { signIn, signOut } from "next-auth/react";
 import { useTheme } from "next-themes";
@@ -74,16 +73,7 @@ import {
   type LovartHomeSidebarItemKey,
 } from "@/lib/home/lovart-sidebar-config";
 
-const ImageAnnotator = dynamic(
-  () =>
-    import("@/components/image-annotator").then(
-      (module) => module.ImageAnnotator
-    ),
-  {
-    loading: () => null,
-    ssr: false,
-  }
-);
+type ImageAnnotatorComponent = typeof import("@/components/image-annotator").ImageAnnotator;
 
 type HomeUser = {
   id: string;
@@ -481,6 +471,8 @@ export function LovartHome({
   const [showDingTalkOrgMenu, setShowDingTalkOrgMenu] = useState(false);
   const [showImageEditor, setShowImageEditor] = useState(false);
   const [editorImageUrl, setEditorImageUrl] = useState("");
+  const [ImageAnnotatorLazy, setImageAnnotatorLazy] =
+    useState<ImageAnnotatorComponent | null>(null);
   const [tutorialDialogOpen, setTutorialDialogOpen] = useState(false);
   const [currentTutorialVideo, setCurrentTutorialVideo] = useState<TutorialVideo | null>(null);
   const [contactDialogOpen, setContactDialogOpen] = useState(false);
@@ -945,6 +937,23 @@ export function LovartHome({
     filesRef.current = files;
   }, [files]);
 
+  useEffect(() => {
+    if (!showImageEditor || ImageAnnotatorLazy) {
+      return;
+    }
+
+    let disposed = false;
+    void import("@/components/image-annotator").then((module) => {
+      if (!disposed) {
+        setImageAnnotatorLazy(() => module.ImageAnnotator);
+      }
+    });
+
+    return () => {
+      disposed = true;
+    };
+  }, [ImageAnnotatorLazy, showImageEditor]);
+
   useEffect(() => {
     return () => {
       filesRef.current.forEach((item) => URL.revokeObjectURL(item.previewUrl));
@@ -2374,14 +2383,19 @@ export function LovartHome({
         <ArrowUp className="h-4 w-4" />
       </button>
 
-      {showImageEditor ? (
-        <ImageAnnotator
+      {showImageEditor && ImageAnnotatorLazy ? (
+        <ImageAnnotatorLazy
           imageUrl={editorImageUrl}
           onConfirm={handleImageEditorConfirm}
           submitMode="publish-new-canvas"
           onCancel={handleImageEditorCancel}
           onHomeClick={handleImageEditorCancel}
         />
+      ) : showImageEditor ? (
+        <div className="fixed inset-0 z-[90] flex items-center justify-center bg-black/40 text-white backdrop-blur-sm">
+          <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+          正在加载图片编辑器...
+        </div>
       ) : null}
 
       <Dialog