优化图片标注和加载组件

components/gemini-image-loading.tsx

@@ -119,7 +119,7 @@ export const GeminiImageLoading = memo(() => {
           
           {/* 提示文字 */}
           <span className="text-xs text-muted-foreground">
-            Gemini 正在创作 2 张图片，请稍候...
+            NanoBananaPro 正在创作 2 张图片，请稍候...
           </span>
         </div>
       </div>

components/image-annotator.tsx

@@ -55,13 +55,19 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
   const [textPosition, setTextPosition] = useState<{ x: number; y: number } | null>(null);
   const [scale, setScale] = useState(1);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [isLoading, setIsLoading] = useState(true);
 
   // 加载图片
   useEffect(() => {
+    setIsLoading(true);
     const img = new window.Image();
     img.crossOrigin = "anonymous";
     img.onload = () => {
       setImage(img);
+      setIsLoading(false);
+    };
+    img.onerror = () => {
+      setIsLoading(false);
     };
     img.src = imageUrl;
   }, [imageUrl]);
@@ -428,17 +434,38 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
 
         {/* 画布区域 */}
         <div ref={containerRef} className="flex flex-1 items-center justify-center overflow-hidden bg-muted/30 p-4">
-          <canvas
+          {isLoading ? (
-            ref={canvasRef}
+            /* 加载动画 */
-            className="cursor-crosshair rounded-lg shadow-lg"
+            <div className="flex flex-col items-center justify-center gap-3">
-            onMouseDown={handleStart}
+              <div className="flex items-center gap-1">
-            onMouseMove={handleMove}
+                <span 
-            onMouseUp={handleEnd}
+                  className="h-2 w-2 rounded-full bg-primary animate-bounce"
-            onMouseLeave={handleEnd}
+                  style={{ animationDelay: "0ms" }}
-            onTouchStart={handleStart}
+                />
-            onTouchMove={handleMove}
+                <span 
-            onTouchEnd={handleEnd}
+                  className="h-2 w-2 rounded-full bg-primary animate-bounce"
-          />
+                  style={{ animationDelay: "150ms" }}
+                />
+                <span 
+                  className="h-2 w-2 rounded-full bg-primary animate-bounce"
+                  style={{ animationDelay: "300ms" }}
+                />
+              </div>
+              <span className="text-sm text-muted-foreground">正在加载图片...</span>
+            </div>
+          ) : (
+            <canvas
+              ref={canvasRef}
+              className="cursor-crosshair rounded-lg shadow-lg"
+              onMouseDown={handleStart}
+              onMouseMove={handleMove}
+              onMouseUp={handleEnd}
+              onMouseLeave={handleEnd}
+              onTouchStart={handleStart}
+              onTouchMove={handleMove}
+              onTouchEnd={handleEnd}
+            />
+          )}
         </div>
       </div>