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:
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -159,6 +159,7 @@ const MaasProvider: React.FC = () => {
|
||||
></FilterBar>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
className={'scroll-table'}
|
||||
rowKey="id"
|
||||
tableLayout="fixed"
|
||||
sortDirections={TABLE_SORT_DIRECTIONS}
|
||||
|
||||
@@ -364,6 +364,7 @@ const ModelRoutes: React.FC = () => {
|
||||
>
|
||||
<SealTable
|
||||
rowKey="id"
|
||||
emptyMinHeight="calc(100vh - 300px)"
|
||||
loadChildren={loadChildrenData}
|
||||
sortDirections={TABLE_SORT_DIRECTIONS}
|
||||
expandedRowKeys={expandedRowKeys}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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={{
|
||||
|
||||
@@ -186,6 +186,7 @@ const Users: React.FC = () => {
|
||||
></FilterBar>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
className={'scroll-table'}
|
||||
columns={columns}
|
||||
dataSource={dataList}
|
||||
rowSelection={rowSelection}
|
||||
|
||||
Reference in New Issue
Block a user