From 8c4a2de9cda46d9de9fed5005ae46113e94449f5 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 12 Jul 2026 23:33:26 +0100
Subject: [PATCH] Add delayed loading state to ObjectSelect component to allow
 the uI to render list before displaying treeview.

---
 .../Dashboard/common/ObjectSelect.jsx         | 89 ++++++++++++-------
 1 file changed, 59 insertions(+), 30 deletions(-)

diff --git a/src/components/Dashboard/common/ObjectSelect.jsx b/src/components/Dashboard/common/ObjectSelect.jsx
index 47e56ed..a202583 100644
--- a/src/components/Dashboard/common/ObjectSelect.jsx
+++ b/src/components/Dashboard/common/ObjectSelect.jsx
@@ -60,6 +60,7 @@ const ObjectSelect = ({
   const [objectList, setObjectList] = useState([])
   const [treeSelectValue, setTreeSelectValue] = useState(null)
   const [initialLoading, setInitialLoading] = useState(true)
+  const [delayedInitialLoading, setDelayedInitalLoading] = useState(true)
   const [expandedKeys, setExpandedKeys] = useState([])
   const [treeVersion, setTreeVersion] = useState(0)
   const [isSearching, setIsSearching] = useState(false)
@@ -420,13 +421,18 @@ const ObjectSelect = ({
 
       e.preventDefault()
       e.stopPropagation()
-      onTreeSelectChange(
-        multiple ? [firstLeaf.value] : firstLeaf.value
-      )
+      onTreeSelectChange(multiple ? [firstLeaf.value] : firstLeaf.value)
       setSearchValue('')
       onSearch('')
     },
-    [treeSelectProps, isSearching, treeData, multiple, onTreeSelectChange, onSearch]
+    [
+      treeSelectProps,
+      isSearching,
+      treeData,
+      multiple,
+      onTreeSelectChange,
+      onSearch
+    ]
   )
   // Update treeData when objectPropertiesTree changes
   useEffect(() => {
@@ -583,6 +589,16 @@ const ObjectSelect = ({
     }
   }, [value, getValueIdentity, type, masterFilter])
 
+  useEffect(() => {
+    if (initialLoading == false) {
+      setTimeout(() => {
+        setDelayedInitalLoading(false)
+      }, 50)
+    } else {
+      setDelayedInitalLoading(true)
+    }
+  }, [initialLoading])
+
   const placeholder = useMemo(
     () =>
       type == 'unknown' || type == undefined
@@ -609,34 +625,47 @@ const ObjectSelect = ({
     )
   }
 
-  if (initialLoading) {
-    return <TreeSelect disabled loading placeholder='Loading...' />
-  }
-
   // --- Main TreeSelect UI ---
   return (
-    <TreeSelect
-      key={treeVersion}
-      treeDataSimpleMode={false}
-      treeDefaultExpandAll={true}
-      treeExpandedKeys={expandedKeys}
-      onTreeExpand={setExpandedKeys}
-      treeData={treeData}
-      showSearch={showSearch}
-      filterTreeNode={() => true}
-      multiple={multiple}
-      loadData={isSearching ? undefined : loadData}
-      showCheckedStrategy={SHOW_CHILD}
-      placeholder={placeholder}
-      {...treeSelectProps}
-      {...rest}
-      value={treeSelectValue}
-      onChange={onTreeSelectChange}
-      onSearch={onSearch}
-      onInputKeyDown={onInputKeyDown}
-      searchValue={searchValue}
-      disabled={disabled || type == 'unknown' || type == undefined}
-    />
+    <div>
+      <TreeSelect
+        key={treeVersion}
+        treeDataSimpleMode={false}
+        treeDefaultExpandAll={true}
+        treeExpandedKeys={expandedKeys}
+        onTreeExpand={setExpandedKeys}
+        treeData={treeData}
+        showSearch={showSearch}
+        filterTreeNode={() => true}
+        multiple={multiple}
+        loadData={isSearching ? undefined : loadData}
+        showCheckedStrategy={SHOW_CHILD}
+        placeholder={placeholder}
+        {...treeSelectProps}
+        {...rest}
+        value={treeSelectValue}
+        onChange={onTreeSelectChange}
+        onSearch={onSearch}
+        onInputKeyDown={onInputKeyDown}
+        searchValue={searchValue}
+        disabled={disabled || type == 'unknown' || type == undefined}
+        style={{ opacity: delayedInitialLoading ? 0 : 1 }}
+      />
+      {delayedInitialLoading && (
+        <TreeSelect
+          disabled
+          loading
+          placeholder='Loading...'
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0
+          }}
+        />
+      )}
+    </div>
   )
 }