fix: iframe loading 优化

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>

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;
   }
 }

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,
   });
 }