Conversation
…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.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a stable height and a fade-in animation for empty/loading states in tables across various pages to prevent layout jumps. This is achieved by adding a .scroll-table class in table.less with a height of calc(100vh - 300px) and applying it to several Table and SealTable components. Feedback suggests using a CSS custom property with a fallback instead of hardcoding the height in the CSS class to improve flexibility for tables rendered in smaller containers or modals.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| > .ant-table-cell { | ||
| height: calc(100vh - 300px); | ||
| } |
There was a problem hiding this comment.
Hardcoding calc(100vh - 300px) directly in the generic .scroll-table class makes it inflexible if a table is ever rendered inside a smaller container, modal, drawer, or split-pane layout where 100vh would cause overflow or layout issues.
Using a CSS custom property (variable) with a fallback allows specific tables or parent containers to easily override this height when needed (e.g., by setting --table-empty-height: 400px; in their local styles).
> .ant-table-cell {
height: var(--table-empty-height, calc(100vh - 300px));
}
There was a problem hiding this comment.
Pull request overview
This PR aims to eliminate “layout jumps” when list pages transition between first-load/loading and empty states by standardizing table styling for horizontally scrollable tables and reserving consistent placeholder height.
Changes:
- Add a shared
scroll-tableclass to many<Table>instances to apply consistent scrollbar + empty/loading placeholder styling. - Update GPU/Worker tables to use
scroll={{ x: 'max-content' }}and align with the sharedscroll-tablebehavior. - Set
emptyMinHeight="calc(100vh - 300px)"onSealTableinstances to keep empty/loading height consistent with the eventual table content area.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/pages/users/index.tsx | Apply scroll-table class to standardize empty/loading placeholder behavior. |
| src/pages/resources/components/workers.tsx | Switch horizontal scroll behavior to max-content and apply scroll-table. |
| src/pages/resources/components/model-files.tsx | Apply scroll-table class for consistent empty/loading rendering. |
| src/pages/resources/components/gpus.tsx | Switch horizontal scroll behavior to max-content and apply scroll-table. |
| src/pages/model-routes/index.tsx | Add emptyMinHeight to SealTable to stabilize empty/loading height. |
| src/pages/maas-provider/index.tsx | Apply scroll-table class for consistent empty/loading rendering. |
| src/pages/llmodels/components/table-list.tsx | Add emptyMinHeight to SealTable to stabilize empty/loading height. |
| src/pages/gpu-service/storage/index.tsx | Apply scroll-table class for consistent empty/loading rendering. |
| src/pages/gpu-service/storage-types/index.tsx | Apply scroll-table class for consistent empty/loading rendering. |
| src/pages/gpu-service/public-keys/index.tsx | Apply scroll-table class for consistent empty/loading rendering. |
| src/pages/gpu-service/instances/index.tsx | Apply scroll-table class for consistent empty/loading rendering. |
| src/pages/cluster-management/credentials.tsx | Apply scroll-table class for consistent empty/loading rendering. |
| src/pages/cluster-management/clusters.tsx | Add emptyMinHeight to SealTable to stabilize empty/loading height. |
| src/pages/api-keys/index.tsx | Apply scroll-table class for consistent empty/loading rendering. |
| src/assets/styles/table.less | Add reserved placeholder height + empty fade-in animation for scroll-table tables. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .ant-empty { | ||
| animation: tableEmptyFadeIn 0.3s ease-in-out; | ||
| } |
No description provided.