From 7c4b8069609a6553774008937e83177881d9e7a2 Mon Sep 17 00:00:00 2001
From: Omar Elkhouly <omar.elkhouly@arm.com>
Date: Wed, 20 May 2026 15:50:33 +0200
Subject: [PATCH] changing No data available message to a wheel

---
 src/tree/browser/tree.tsx | 18 ++++++++++++++++--
 style/tree/tree.css       |  8 ++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/tree/browser/tree.tsx b/src/tree/browser/tree.tsx
index 3bd441c..745f418 100644
--- a/src/tree/browser/tree.tsx
+++ b/src/tree/browser/tree.tsx
@@ -8,7 +8,7 @@
 import '../../../style/tree/tree-common.css';
 import '../../../style/tree/tree.css';
 
-import { ConfigProvider, Table } from 'antd';
+import { ConfigProvider, Spin, Table } from 'antd';
 import { ColumnType, ExpandableConfig } from 'antd/es/table/interface';
 import classNames from 'classnames';
 import { Resizable } from 're-resizable';
@@ -56,6 +56,11 @@ export type CDTTreeProps<T extends CDTTreeItemResource = CDTTreeItemResource> =
      * Data source to be rendered.
      */
     dataSource?: CDTTreeItem<T>[];
+    /**
+     * Whether the tree data is still loading.
+        * Defaults to true while the data source or column definitions are undefined.
+     */
+    loading?: boolean;
     /**
      * Function to sort the data source.
      */
@@ -230,6 +235,7 @@ export const CDTTree = <T extends CDTTreeItemResource>(props: CDTTreeProps<T>) =
     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);
 
     // ==== Data ====
 
@@ -661,7 +667,15 @@ export const CDTTree = <T extends CDTTreeItemResource>(props: CDTTreeProps<T>) =
                     cssVar: true,
                     hashed: false
                 }}
-                renderEmpty={() => <div className={'empty-message'}>No data available.</div>}
+                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>
+                    )
+                }
             >
                 <div ref={ref} tabIndex={-1} style={{ outline: 'none' }} onKeyDown={onTableKeyDown}>
                     <Table<CDTTreeItem<T>>
diff --git a/style/tree/tree.css b/style/tree/tree.css
index afd4ff7..ae5f547 100644
--- a/style/tree/tree.css
+++ b/style/tree/tree.css
@@ -93,7 +93,7 @@
     padding-right: 8px;
 }
 
-.ant-table .tree-actions > i {
+.ant-table .tree-actions>i {
     cursor: pointer;
 }
 
@@ -108,6 +108,10 @@
     color: var(--vscode-editor-foreground);
 }
 
+.ant-table-empty .loading-message .ant-spin-dot-item {
+    background-color: var(--vscode-progressBar-background, var(--vscode-editor-foreground));
+}
+
 .ant-table-empty .ant-table-body {
     overflow: hidden !important;
 }
@@ -128,4 +132,4 @@
 
 .ant-table .ant-table-row.ant-table-row-resizing .tree-actions {
     display: none;
-}
+}
\ No newline at end of file