feat(mis-web): 集群和分区信息数据异步请求页面优化 (#1143)

**优化前** ![修改前中文](https://github.com/PKUHPC/SCOW/assets/43978285/86827e31-9735-4a15-97a9-844d4f4c7f4c) **优化后** ![用户可见分区数据加载中](https://github.com/PKUHPC/SCOW/assets/43978285/23104249-771b-400c-b1b4-7ef574a3d58d) 国际化 <img width="941" alt="87ec4a3e70e08fd8a3d9606731426e1" src="https://github.com/PKUHPC/SCOW/assets/43978285/3a51188b-b2c3-439e-be6c-185b668f2d95">
PKUHPC · Feb 27, 2024 · a970dc7 · a970dc7
1 parent c422651
commit a970dc7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/.changeset/eight-forks-sneeze.md b/.changeset/eight-forks-sneeze.md
@@ -0,0 +1,5 @@
+---
+"@scow/mis-web": patch
+---
+
+优化管理系统用户可见分区页面 Loading 样式
diff --git a/apps/mis-web/src/i18n/en.ts b/apps/mis-web/src/i18n/en.ts
@@ -747,6 +747,7 @@ export default {
         getBillingTableErrorMessage: "Failed to retrieve cluster and partition information. "
         + "Please contact the administrator.",
         partitionInfo: "Partition Information",
+        loading: "Loading partitions...",
       },
       operationLogs: {
         userOperationLog: "User Operation Log",

diff --git a/apps/mis-web/src/i18n/zh_cn.ts b/apps/mis-web/src/i18n/zh_cn.ts
@@ -747,6 +747,7 @@ export default {
         getBillingTableErrorMessage: "集群和分区信息获取失败，请联系管理员。",
 
         partitionInfo: "分区信息",
+        loading: "数据加载中...",
       },
       operationLogs: {
         userOperationLog: "本用户操作日志",

diff --git a/apps/mis-web/src/pages/user/partitions.tsx b/apps/mis-web/src/pages/user/partitions.tsx
@@ -12,7 +12,7 @@
 
 import { ClusterTextsConfigSchema } from "@scow/config/build/clusterTexts";
 import { getI18nConfigCurrentText } from "@scow/lib-web/build/utils/systemLanguage";
-import { Collapse, Divider, Spin, Typography } from "antd";
+import { Collapse, Divider, Space, Spin, Typography } from "antd";
 import { GetServerSideProps, NextPage } from "next";
 import { useCallback, useState } from "react";
 import { useAsync } from "react-async";
@@ -84,9 +84,22 @@ export const PartitionsPage: NextPage<Props> = requireAuth(() => true)((props: P
     <div>
       <Head title={t(p("partitionInfo"))} />
       <PageTitle titleText={t(p("partitionInfo"))} />
-
-      <div style={{ marginBottom: "32px" }}>
-        <Spin spinning={completedRequestCount < clusters.length}>
+      <div>
+        {
+          completedRequestCount < clusters.length ? (
+            <Spin
+              spinning={completedRequestCount < clusters.length}
+              tip={t(p("loading"))}
+            >
+              <></>
+            </Spin>
+          ) : null
+        }
+      </div>
+      <div style={completedRequestCount < clusters.length
+        ? { marginBottom: "32px", marginTop: "48px" } : { marginBottom: "32px" }}
+      >
+        <Space direction="vertical" style={{ width: "100%" }}>
           {clusters.map((cluster) => {
             const data = renderData[cluster.id];
             return (
@@ -105,7 +118,7 @@ export const PartitionsPage: NextPage<Props> = requireAuth(() => true)((props: P
               ) : null
             );
           })}
-        </Spin>
+        </Space>
       </div>
 
       <div>