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.
This commit is contained in:
jialin
2026-07-15 14:05:19 +08:00
committed by jialin
parent 2dd287bbc1
commit eb029a3e2a
15 changed files with 46 additions and 4 deletions
+1
View File
@@ -232,6 +232,7 @@ const APIKeys: React.FC = () => {
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
className={'scroll-table'}
columns={columns}
dataSource={dataSource.dataList}
rowSelection={rowSelection}
@@ -395,6 +395,7 @@ const Clusters: React.FC = () => {
>
<SealTable
rowKey="id"
emptyMinHeight="calc(100vh - 300px)"
loadChildren={getWorkerPoolList}
sortDirections={TABLE_SORT_DIRECTIONS}
expandedRowKeys={expandedRowKeys}
@@ -200,6 +200,7 @@ const Credentials: React.FC = () => {
<ConfigProvider renderEmpty={renderEmpty}>
<Table
className={'scroll-table'}
tableLayout="fixed"
columns={columns}
dataSource={dataSource.dataList}
@@ -362,6 +362,7 @@ const GPUService: React.FC = () => {
/>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
className={'scroll-table'}
columns={columns}
dataSource={dataSource.dataList}
rowSelection={rowSelection}
@@ -154,6 +154,7 @@ const GPUServicePublicKeys: React.FC = () => {
/>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
className={'scroll-table'}
columns={columns}
dataSource={dataSource.dataList}
rowSelection={rowSelection}
@@ -150,6 +150,7 @@ const GPUServiceStorageTypes: React.FC = () => {
/>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
className={'scroll-table'}
columns={columns}
dataSource={dataSource.dataList}
rowSelection={rowSelection}
+1
View File
@@ -151,6 +151,7 @@ const GPUServiceStorage: React.FC = () => {
/>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
className={'scroll-table'}
columns={columns}
dataSource={dataSource.dataList}
rowSelection={rowSelection}
@@ -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}
+1
View File
@@ -159,6 +159,7 @@ const MaasProvider: React.FC = () => {
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
className={'scroll-table'}
rowKey="id"
tableLayout="fixed"
sortDirections={TABLE_SORT_DIRECTIONS}
+1
View File
@@ -364,6 +364,7 @@ const ModelRoutes: React.FC = () => {
>
<SealTable
rowKey="id"
emptyMinHeight="calc(100vh - 300px)"
loadChildren={loadChildrenData}
sortDirections={TABLE_SORT_DIRECTIONS}
expandedRowKeys={expandedRowKeys}
+2 -2
View File
@@ -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,
@@ -340,6 +340,7 @@ const ModelFiles = () => {
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
className={'scroll-table'}
rowKey="id"
tableLayout="fixed"
sortDirections={TABLE_SORT_DIRECTIONS}
+1 -2
View File
@@ -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={{
+1
View File
@@ -186,6 +186,7 @@ const Users: React.FC = () => {
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
className={'scroll-table'}
columns={columns}
dataSource={dataList}
rowSelection={rowSelection}