changing No data available message to a wheel while loading trees#19
changing No data available message to a wheel while loading trees#19omarArm wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a loading-aware empty state to the tree table so users see a spinner while data/columns are still being resolved.
Changes:
- Introduced a
loading?: booleanprop with a default derived fromdataSource/columnDefinitionsbeing undefined. - Replaced the “No data available.” empty state with a spinner when
loadingis true. - Added CSS to theme the Ant Design spinner dots in the empty table state.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| style/tree/tree.css | Styles Ant Design empty-table spinner dots and adjusts a selector formatting. |
| src/tree/browser/tree.tsx | Adds loading prop and renders a spinner in renderEmpty() while loading. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| dataSource?: CDTTreeItem<T>[]; | ||
| /** | ||
| * Whether the tree data is still loading. | ||
| * Defaults to true while the data source or column definitions are undefined. |
| } | ||
|
|
||
| .ant-table .tree-actions > i { | ||
| .ant-table .tree-actions>i { |
| renderEmpty={() => | ||
| loading ? ( | ||
| <div className={'empty-message loading-message'} role='status' aria-label='Loading data'> | ||
| <Spin size='small' /> | ||
| </div> | ||
| ) : ( | ||
| <div className={'empty-message'}>No data available.</div> | ||
| ) | ||
| } |
| const tblRef: Parameters<typeof Table>[0]['ref'] = React.useRef(null); | ||
|
|
||
| const isBackendSearch = props.search?.mode === 'backend'; | ||
| const loading = props.loading ?? (props.dataSource === undefined || props.columnDefinitions === undefined); |
| renderEmpty={() => | ||
| loading ? ( | ||
| <div className={'empty-message loading-message'} role='status' aria-label='Loading data'> | ||
| <Spin size='small' /> | ||
| </div> | ||
| ) : ( | ||
| <div className={'empty-message'}>No data available.</div> | ||
| ) | ||
| } |
jreineckearm
left a comment
There was a problem hiding this comment.
Code changes look reasonable as far as I can judge.
Please have a look at copilot feedback (especially the formatting feedback). I don't fully understand the complaint about loading. At the same time I don't see how you will use in peripheral inspector. That part would help to get the full picture.
Fixes eclipse-cdt-cloud/vscode-peripheral-inspector#65