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 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 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 = () => { > { > {
{ />
{ />
{ />
{ />
= ({ > { >
{ > = ({ 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 = () => { >
= ({ 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 = ({ 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 = () => { >