From 100b3bebb8d852ff0c56d860305b76e6d7d3fd02 Mon Sep 17 00:00:00 2001
From: zhaowei <cp3hnu@gmail.com>
Date: Thu, 11 Sep 2025 15:28:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20iframe=20loading=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react-ui/src/components/IFramePage/index.tsx  | 22 ++++++++++++-------
 react-ui/src/components/KFSpin/index.less     |  6 ++++-
 .../services/developmentEnvironment/index.ts  |  2 ++
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/react-ui/src/components/IFramePage/index.tsx b/react-ui/src/components/IFramePage/index.tsx
index 1982c816..32d0e8bb 100644
--- a/react-ui/src/components/IFramePage/index.tsx
+++ b/react-ui/src/components/IFramePage/index.tsx
@@ -1,11 +1,12 @@
 import FullScreenFrame from '@/components/FullScreenFrame';
 import { getKnowledgeGraphUrl, getLabelStudioUrl } from '@/services/developmentEnvironment';
-import Loading from '@/utils/loading';
 import { to } from '@/utils/promise';
 import SessionStorage from '@/utils/sessionStorage';
+import { LoadingOutlined } from '@ant-design/icons';
 import { FloatButton } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
+import KFSpin from '../KFSpin';
 import './index.less';
 
 export enum IframePageType {
@@ -76,19 +77,21 @@ function IframePage({
   style,
 }: IframePageProps) {
   const [iframeUrl, setIframeUrl] = useState('');
-  // const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const requestIframeUrl = async (type: IframePageType) => {
       if (showLoading) {
-        Loading.show();
+        // Loading.show();
+        setLoading(true);
       }
       const [res] = await to(getRequestAPI(type)());
       if (res && res.data) {
         setIframeUrl(res.data);
       } else {
         if (showLoading) {
-          Loading.hide();
+          // Loading.hide();
+          setLoading(false);
         }
       }
     };
@@ -97,7 +100,8 @@ function IframePage({
       requestIframeUrl(type);
     } else if (url) {
       if (showLoading) {
-        Loading.show();
+        // Loading.show();
+        setLoading(true);
       }
 
       setIframeUrl(url);
@@ -106,20 +110,22 @@ function IframePage({
 
   const handleLoad = () => {
     if (showLoading) {
-      Loading.hide();
+      // Loading.hide();
+      setLoading(false);
     }
   };
 
   const handleError = (error?: React.SyntheticEvent<HTMLIFrameElement, Event>) => {
     console.log('error', error);
     if (showLoading) {
-      Loading.hide();
+      // Loading.hide();
+      setLoading(false);
     }
   };
 
   return (
     <div className={classNames('kf-iframe-page', className)} style={style}>
-      {/* {loading && createPortal(<KFSpin size="large" />, document.body)} */}
+      {loading && <KFSpin size="large" indicator={<LoadingOutlined spin />} />}
       {iframeUrl && <FullScreenFrame url={iframeUrl} onLoad={handleLoad} onError={handleError} />}
       {openInTab && <FloatButton onClick={() => window.open(iframeUrl, '_blank')} />}
     </div>
diff --git a/react-ui/src/components/KFSpin/index.less b/react-ui/src/components/KFSpin/index.less
index 7d532d2d..87593555 100644
--- a/react-ui/src/components/KFSpin/index.less
+++ b/react-ui/src/components/KFSpin/index.less
@@ -11,9 +11,13 @@
   justify-content: center;
   background-color: rgba(255, 255, 255, 0.3);
 
+  .ant-spin-dot-holder {
+    color: @primary-color;
+  }
+
   &__label {
     margin-top: 20px;
-    color: @text-color;
+    color: @primary-color;
     font-size: @font-size-content;
   }
 }
diff --git a/react-ui/src/services/developmentEnvironment/index.ts b/react-ui/src/services/developmentEnvironment/index.ts
index 5e000f1d..6e174f53 100644
--- a/react-ui/src/services/developmentEnvironment/index.ts
+++ b/react-ui/src/services/developmentEnvironment/index.ts
@@ -10,6 +10,7 @@ export function getJupyterUrl() {
 export function getLabelStudioUrl() {
   return request(`/api/mmp/labelStudio/getURL`, {
     method: 'GET',
+    skipLoading: true,
   });
 }
 
@@ -69,5 +70,6 @@ export function createEditorMirrorReq(data: any) {
 export function getKnowledgeGraphUrl() {
   return request(`/api/mmp/knowledgeGraph/getURL`, {
     method: 'GET',
+    skipLoading: true,
   });
 }