From 86722a09a7cb5892bd6f1402aedc9f866ba200f2 Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Fri, 3 Apr 2026 11:26:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(artifact)=EF=BC=9AArtifact=20=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=20iframe=20=E5=A2=9E=E5=8A=A0=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E4=B8=AD=E8=BD=AC=E5=9C=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../artifacts/artifact-file-detail.tsx        | 74 ++++++++++++++-----
 1 file changed, 55 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
index b6b52ac8..cfd4e5db 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -9,6 +9,7 @@ import {
   useEffect,
   useMemo,
   useState,
+  type ComponentProps,
   type HTMLAttributes,
 } from "react";
 import { toast } from "sonner";
@@ -477,7 +478,7 @@ export function ArtifactFileDetail({
 
           )}
         {isCodeFile && viewMode === "code" && (
-          <div className="min-h-full mb-[180px]  rounded-b-[10px] bg-white p-0 mb-0">
+          <div className="min-h-full mb-[207px]  rounded-b-[10px] bg-white p-0 mb-0">
             <CodeEditor
               className="size-full resize-none rounded-none border-none py-[20px]"
               value={displayContent ?? ""}
@@ -487,14 +488,13 @@ export function ArtifactFileDetail({
           </div>
         )}
         {!isCodeFile && (
-          <div className="h-full mb-[180px]">
-            <iframe
-              className="size-full border-0"
-              srcDoc={artifactViewerSrcDoc}
-              sandbox="allow-same-origin allow-scripts allow-downloads"
-              title={`Artifact preview: ${fileName}`}
-            />
-          </div>
+          <PreviewIframe
+            className="size-full border-0"
+            containerClassName="h-full mb-[207px]"
+            srcDoc={artifactViewerSrcDoc}
+            sandbox="allow-same-origin allow-scripts allow-downloads"
+            title={`Artifact preview: ${fileName}`}
+          />
         )}
       </ArtifactContent>
     </Artifact>
@@ -515,7 +515,7 @@ export function ArtifactFilePreview({
   if (language === "markdown") {
     return (
       <div
-        className={cn("w-full bg-white mb-[207px] p-[20px]")}
+        className={cn("w-full bg-white  mb-[207px] p-[20px]")}
         style={{ "--zoom-scale": zoomScale } as React.CSSProperties}
       >
         <Streamdown
@@ -531,21 +531,57 @@ export function ArtifactFilePreview({
   }
   if (language === "html") {
     return (
-      <div className="h-full mb-[180px]">
-        <iframe
-          className="size-full"
-          title="Artifact preview"
-          srcDoc={content}
-          sandbox="allow-scripts allow-forms"
-          style={{ zoom: zoomScale }}
-        />
-      </div>
+      <PreviewIframe
+        className="size-full"
+        containerClassName="h-full mb-[207px]"
+        title="Artifact preview"
+        srcDoc={content}
+        sandbox="allow-scripts allow-forms"
+        style={{ zoom: zoomScale }}
+      />
 
     );
   }
   return null;
 }
 
+function PreviewIframe({
+  className,
+  containerClassName,
+  onLoad,
+  src,
+  srcDoc,
+  ...props
+}: ComponentProps<"iframe"> & {
+  containerClassName?: string;
+}) {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setIsLoading(true);
+  }, [src, srcDoc]);
+
+  return (
+    <div className={cn("relative", containerClassName)}>
+      <iframe
+        className={className}
+        src={src}
+        srcDoc={srcDoc}
+        onLoad={(event) => {
+          setIsLoading(false);
+          onLoad?.(event);
+        }}
+        {...props}
+      />
+      {isLoading && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/85">
+          <LoaderIcon className="text-muted-foreground size-5 animate-spin" />
+        </div>
+      )}
+    </div>
+  );
+}
+
 type ArtifactPreviewKind =
   | "html"
   | "image"