From eb029a3e2a77583b25e77ffe4760689b1a9b70cb Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 15 Jul 2026 13:45:06 +0800
Subject: [PATCH] fix(table): smooth list empty/loading transitions, no layout
 jump on entry

Reserve a stable block for the empty/loading state (matching the NoResult
height) and fade the empty state in, so entering a list page no longer jumps
between spinner, empty result, and rows. Apply scroll-table to the antd main
lists and pass emptyMinHeight to the SealTable-based lists.
---
 src/assets/styles/table.less                  | 31 +++++++++++++++++++
 src/pages/api-keys/index.tsx                  |  1 +
 src/pages/cluster-management/clusters.tsx     |  1 +
 src/pages/cluster-management/credentials.tsx  |  1 +
 src/pages/gpu-service/instances/index.tsx     |  1 +
 src/pages/gpu-service/public-keys/index.tsx   |  1 +
 src/pages/gpu-service/storage-types/index.tsx |  1 +
 src/pages/gpu-service/storage/index.tsx       |  1 +
 src/pages/llmodels/components/table-list.tsx  |  1 +
 src/pages/maas-provider/index.tsx             |  1 +
 src/pages/model-routes/index.tsx              |  1 +
 src/pages/resources/components/gpus.tsx       |  4 +--
 .../resources/components/model-files.tsx      |  1 +
 src/pages/resources/components/workers.tsx    |  3 +-
 src/pages/users/index.tsx                     |  1 +
 15 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/assets/styles/table.less b/src/assets/styles/table.less
index d45ac932..fe9fad8b 100644
--- a/src/assets/styles/table.less
+++ b/src/assets/styles/table.less
@@ -9,6 +9,15 @@
   }
 }
 
+@keyframes tableEmptyFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .scroll-table {
   .ant-table {
     .ant-table-container {
@@ -18,5 +27,27 @@
         scrollbar-color: var(--color-scrollbar-thumb) transparent;
       }
     }
+
+    // Reserve a stable block for the empty/loading state so the first-load
+    // spinner and the empty result occupy the same height as eventual data —
+    // this removes the layout jump when entering the page. Scoped to
+    // `.ant-table-content` so it only targets x-scroll tables (whose empty
+    // row lives here) and leaves fixed-height `scroll.y` tables untouched.
+    // Height must match the `minHeight` passed to <NoResult> in
+    // use-no-resource-result.
+    .ant-table-content {
+      .ant-table-placeholder {
+        > .ant-table-cell {
+          height: calc(100vh - 300px);
+        }
+
+        // NoResult renders nothing while loading and mounts an <Empty> only
+        // once the request settles, so this fires exactly when the empty
+        // state appears — a seamless fade-in instead of a hard pop.
+        .ant-empty {
+          animation: tableEmptyFadeIn 0.3s ease-in-out;
+        }
+      }
+    }
   }
 }
diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx
index 81668f79..6ec21efc 100644
--- a/src/pages/api-keys/index.tsx
+++ b/src/pages/api-keys/index.tsx
@@ -232,6 +232,7 @@ const APIKeys: React.FC = () => {
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            className={'scroll-table'}
             columns={columns}
             dataSource={dataSource.dataList}
             rowSelection={rowSelection}
diff --git a/src/pages/cluster-management/clusters.tsx b/src/pages/cluster-management/clusters.tsx
index 763dd9fd..01772a99 100644
--- a/src/pages/cluster-management/clusters.tsx
+++ b/src/pages/cluster-management/clusters.tsx
@@ -395,6 +395,7 @@ const Clusters: React.FC = () => {
         >
           <SealTable
             rowKey="id"
+            emptyMinHeight="calc(100vh - 300px)"
             loadChildren={getWorkerPoolList}
             sortDirections={TABLE_SORT_DIRECTIONS}
             expandedRowKeys={expandedRowKeys}
diff --git a/src/pages/cluster-management/credentials.tsx b/src/pages/cluster-management/credentials.tsx
index a2706d92..2c6b607b 100644
--- a/src/pages/cluster-management/credentials.tsx
+++ b/src/pages/cluster-management/credentials.tsx
@@ -200,6 +200,7 @@ const Credentials: React.FC = () => {
 
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            className={'scroll-table'}
             tableLayout="fixed"
             columns={columns}
             dataSource={dataSource.dataList}
diff --git a/src/pages/gpu-service/instances/index.tsx b/src/pages/gpu-service/instances/index.tsx
index 46f12112..51fcf583 100644
--- a/src/pages/gpu-service/instances/index.tsx
+++ b/src/pages/gpu-service/instances/index.tsx
@@ -362,6 +362,7 @@ const GPUService: React.FC = () => {
         />
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            className={'scroll-table'}
             columns={columns}
             dataSource={dataSource.dataList}
             rowSelection={rowSelection}
diff --git a/src/pages/gpu-service/public-keys/index.tsx b/src/pages/gpu-service/public-keys/index.tsx
index d5ca0b16..6d7ab4c1 100644
--- a/src/pages/gpu-service/public-keys/index.tsx
+++ b/src/pages/gpu-service/public-keys/index.tsx
@@ -154,6 +154,7 @@ const GPUServicePublicKeys: React.FC = () => {
         />
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            className={'scroll-table'}
             columns={columns}
             dataSource={dataSource.dataList}
             rowSelection={rowSelection}
diff --git a/src/pages/gpu-service/storage-types/index.tsx b/src/pages/gpu-service/storage-types/index.tsx
index ab6f4cf4..0fe10a5a 100644
--- a/src/pages/gpu-service/storage-types/index.tsx
+++ b/src/pages/gpu-service/storage-types/index.tsx
@@ -150,6 +150,7 @@ const GPUServiceStorageTypes: React.FC = () => {
         />
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            className={'scroll-table'}
             columns={columns}
             dataSource={dataSource.dataList}
             rowSelection={rowSelection}
diff --git a/src/pages/gpu-service/storage/index.tsx b/src/pages/gpu-service/storage/index.tsx
index e9fa249b..aaa1ec03 100644
--- a/src/pages/gpu-service/storage/index.tsx
+++ b/src/pages/gpu-service/storage/index.tsx
@@ -151,6 +151,7 @@ const GPUServiceStorage: React.FC = () => {
         />
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            className={'scroll-table'}
             columns={columns}
             dataSource={dataSource.dataList}
             rowSelection={rowSelection}
diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx
index 0969c40e..4e978fb4 100644
--- a/src/pages/llmodels/components/table-list.tsx
+++ b/src/pages/llmodels/components/table-list.tsx
@@ -613,6 +613,7 @@ const Models: React.FC<ModelsProps> = ({
         ></PageTools>
         <SealTable
           columns={columns}
+          emptyMinHeight="calc(100vh - 300px)"
           sortDirections={TABLE_SORT_DIRECTIONS}
           dataSource={dataSource}
           rowSelection={rowSelection}
diff --git a/src/pages/maas-provider/index.tsx b/src/pages/maas-provider/index.tsx
index c75e6d52..079205d1 100644
--- a/src/pages/maas-provider/index.tsx
+++ b/src/pages/maas-provider/index.tsx
@@ -159,6 +159,7 @@ const MaasProvider: React.FC = () => {
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            className={'scroll-table'}
             rowKey="id"
             tableLayout="fixed"
             sortDirections={TABLE_SORT_DIRECTIONS}
diff --git a/src/pages/model-routes/index.tsx b/src/pages/model-routes/index.tsx
index 5ca6788f..7ee5f73e 100644
--- a/src/pages/model-routes/index.tsx
+++ b/src/pages/model-routes/index.tsx
@@ -364,6 +364,7 @@ const ModelRoutes: React.FC = () => {
         >
           <SealTable
             rowKey="id"
+            emptyMinHeight="calc(100vh - 300px)"
             loadChildren={loadChildrenData}
             sortDirections={TABLE_SORT_DIRECTIONS}
             expandedRowKeys={expandedRowKeys}
diff --git a/src/pages/resources/components/gpus.tsx b/src/pages/resources/components/gpus.tsx
index 507bd05c..701a6156 100644
--- a/src/pages/resources/components/gpus.tsx
+++ b/src/pages/resources/components/gpus.tsx
@@ -123,14 +123,14 @@ const GPUList: React.FC<GPUListProps> = ({ clusterId, source }) => {
             columns={columns}
             sortDirections={TABLE_SORT_DIRECTIONS}
             showSorterTooltip={false}
-            tableLayout={'auto'}
+            scroll={{ x: 'max-content' }}
+            className={'scroll-table'}
             dataSource={dataSource.dataList}
             loading={{
               spinning: dataSource.loading,
               size: 'middle'
             }}
             rowKey="id"
-            scroll={{ x: 900 }}
             onChange={handleTableChange}
             pagination={{
               showSizeChanger: true,
diff --git a/src/pages/resources/components/model-files.tsx b/src/pages/resources/components/model-files.tsx
index 9529e1e4..aa0c5855 100644
--- a/src/pages/resources/components/model-files.tsx
+++ b/src/pages/resources/components/model-files.tsx
@@ -340,6 +340,7 @@ const ModelFiles = () => {
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            className={'scroll-table'}
             rowKey="id"
             tableLayout="fixed"
             sortDirections={TABLE_SORT_DIRECTIONS}
diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx
index 1231b1f0..b6c43217 100644
--- a/src/pages/resources/components/workers.tsx
+++ b/src/pages/resources/components/workers.tsx
@@ -303,7 +303,7 @@ const Workers: React.FC<WorkersProps> = ({ clusterId, source }) => {
             columns={columns}
             sortDirections={TABLE_SORT_DIRECTIONS}
             showSorterTooltip={false}
-            tableLayout={'auto'}
+            scroll={{ x: 'max-content' }}
             className={'scroll-table'}
             dataSource={dataSource.dataList}
             loading={{
@@ -311,7 +311,6 @@ const Workers: React.FC<WorkersProps> = ({ clusterId, source }) => {
               size: 'middle'
             }}
             rowKey="id"
-            scroll={{ x: 900 }}
             onChange={handleTableChange}
             rowSelection={source === 'clusterDetail' ? undefined : rowSelection}
             pagination={{
diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx
index 727076f1..0b5b26d3 100644
--- a/src/pages/users/index.tsx
+++ b/src/pages/users/index.tsx
@@ -186,6 +186,7 @@ const Users: React.FC = () => {
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            className={'scroll-table'}
             columns={columns}
             dataSource={dataList}
             rowSelection={rowSelection}