Compare commits

...
Author SHA1 Message Date
hibigandgithub-actions[bot] d0d713f20b chore: bump @gpustack/core-ui to v1.0.38 2026-07-16 04:28:13 +00:00
jialinandjialin eb029a3e2a 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.
2026-07-15 14:05:19 +08:00
hibigandjialin 2dd287bbc1 chore: bump @gpustack/core-ui to v1.0.37 2026-07-15 13:43:46 +08:00
17 changed files with 52 additions and 10 deletions
+1 -1
View File
@@ -17,7 +17,7 @@
"@ant-design/pro-components": "3.1.0-0",
"@antv/g6": "^5.0.51",
"@braintree/sanitize-url": "^7.1.1",
"@gpustack/core-ui": "^1.0.36",
"@gpustack/core-ui": "^1.0.38",
"@huggingface/gguf": "^0.1.7",
"@huggingface/hub": "^0.15.1",
"@huggingface/tasks": "^0.11.6",
+5 -5
View File
@@ -24,8 +24,8 @@ importers:
specifier: ^7.1.1
version: 7.1.2
'@gpustack/core-ui':
specifier: ^1.0.36
version: 1.0.36(czdvzceysqw7iv6pct2ucnb23e)
specifier: ^1.0.38
version: 1.0.38(czdvzceysqw7iv6pct2ucnb23e)
'@huggingface/gguf':
specifier: ^0.1.7
version: 0.1.18
@@ -1481,8 +1481,8 @@ packages:
resolution: {integrity: sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==, tarball: https://registry.npmjs.org/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz}
deprecated: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package
'@gpustack/core-ui@1.0.36':
resolution: {integrity: sha512-gF8ShMZ2SKYo3+skfsI3zo+aBSsXqKGMX+jWaKv81e38bDwJw71C33TR64d+6MyV9iUoFOoSK+ht1GefyvR17g==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.36.tgz}
'@gpustack/core-ui@1.0.38':
resolution: {integrity: sha512-7+38qgsFwubb1HyQreICkG1aWcXHM48MXoLY8D14aO6GYWYaO6G4NSkBrXHgpAnB4y3ReYfObH8l3Naq/0YgZw==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.38.tgz}
peerDependencies:
'@ant-design/icons': ^6.1.0
'@ant-design/pro-components': 3.1.0-0
@@ -10802,7 +10802,7 @@ snapshots:
'@formatjs/intl-utils@2.3.0': {}
'@gpustack/core-ui@1.0.36(czdvzceysqw7iv6pct2ucnb23e)':
'@gpustack/core-ui@1.0.38(czdvzceysqw7iv6pct2ucnb23e)':
dependencies:
'@ant-design/icons': 6.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@ant-design/pro-components': 3.1.0-0(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+31
View File
@@ -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;
}
}
}
}
}
+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}