feat: 添加全局loading解决方案

react-ui/src/components/KFSpin/index.less

@@ -0,0 +1,19 @@
+.kf-spin {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.5);
+
+  &__label {
+    margin-top: 20px;
+    color: @text-color;
+    font-size: @font-size-content;
+  }
+}

react-ui/src/components/KFSpin/index.tsx

@@ -0,0 +1,13 @@
+import { Spin, SpinProps } from 'antd';
+import styles from './index.less';
+
+function KFSpin(props: SpinProps) {
+  return (
+    <div className={styles['kf-spin']}>
+      <Spin {...props} />
+      <div className={styles['kf-spin__label']}>加载中</div>
+    </div>
+  );
+}
+
+export default KFSpin;

react-ui/src/pages/Experiment/Comparison/index.tsx

@@ -7,7 +7,7 @@ import {
 import { to } from '@/utils/promise';
 import tableCellRender, { arrayFormatter, dateFormatter } from '@/utils/table';
 import { useSearchParams } from '@umijs/max';
-import { App, Button, Table, /*TablePaginationConfig,*/ TableProps } from 'antd';
+import { App, Button, Table, /* TablePaginationConfig,*/ TableProps } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import ExperimentStatusCell from '../components/ExperimentStatusCell';
@@ -38,6 +38,7 @@ function ExperimentComparison() {
   // const [cacheState, setCacheState] = useCacheState();
   // const [total, setTotal] = useState(0);
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [loading, setLoading] = useState(false);
   const { message } = App.useApp();
   // const [pagination, setPagination] = useState<TablePaginationConfig>(
   //   cacheState?.pagination ?? {
@@ -52,9 +53,11 @@ function ExperimentComparison() {
 
   // 获取对比数据列表
   const getComparisonData = async () => {
+    setLoading(true);
     const request =
       comparisonType === ComparisonType.Train ? getExpTrainInfosReq : getExpEvaluateInfosReq;
     const [res] = await to(request(experimentId));
+    setLoading(false);
     if (res && res.data) {
       // const { content = [], totalElements = 0 } = res.data;
       setTableData(res.data);
@@ -180,6 +183,7 @@ function ExperimentComparison() {
           scroll={{ y: 'calc(100% - 55px)' }}
           pagination={false}
           bordered={true}
+          loading={loading}
           // pagination={{
           //   ...pagination,
           //   total: total,

react-ui/src/utils/loading.tsx

@@ -0,0 +1,66 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-06-26 16:37:39
+ * @Description: 全局网络请求 Loading
+ */
+
+import KFSpin from '@/components/KFSpin';
+import { ConfigProvider, SpinProps } from 'antd';
+import { globalConfig } from 'antd/es/config-provider';
+import zhCN from 'antd/locale/zh_CN';
+import { createRoot } from 'react-dom/client';
+
+export class Loading {
+  static total = 0;
+  static show(props?: SpinProps) {
+    Loading.total += 1;
+    if (Loading.total > 1) {
+      return;
+    }
+    const container = document.createElement('div');
+    container.id = 'loading';
+    const rootContainer = document.getElementsByTagName('main')[0];
+    rootContainer?.appendChild(container);
+    const root = createRoot(container);
+    const global = globalConfig();
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    function render(spinProps: SpinProps) {
+      clearTimeout(timeoutId);
+
+      timeoutId = setTimeout(() => {
+        const rootPrefixCls = global.getPrefixCls();
+        const iconPrefixCls = global.getIconPrefixCls();
+        const theme = global.getTheme();
+        const dom = <KFSpin {...spinProps} />;
+
+        root.render(
+          <ConfigProvider
+            prefixCls={rootPrefixCls}
+            iconPrefixCls={iconPrefixCls}
+            theme={theme}
+            locale={zhCN}
+          >
+            {global.holderRender ? global.holderRender(dom) : dom}
+          </ConfigProvider>,
+        );
+      });
+    }
+
+    render({ size: 'large', ...props, spinning: true });
+  }
+
+  static hide(force: boolean = false) {
+    Loading.total -= 1;
+    if (Loading.total <= 0 || force) {
+      Loading.total = 0;
+      const rootContainer = document.getElementsByTagName('main')[0];
+      const container = document.getElementById('loading');
+      if (container) {
+        rootContainer?.removeChild(container);
+      }
+    }
+  }
+}
+
+export default Loading;