farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Add delayed loading state to ObjectSelect component to allow the uI to render list before displaying treeview.

Browse Source
This commit is contained in:
Tom Butcher 2026-07-12 23:33:26 +01:00
parent 45894f1a3a
commit 8c4a2de9cd
1 changed files with 59 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/Dashboard/common/ObjectSelect.jsx
View File

@ -60,6 +60,7 @@ const ObjectSelect = ({
const [objectList, setObjectList] = useState([]) const [objectList, setObjectList] = useState([])
const [treeSelectValue, setTreeSelectValue] = useState(null) const [treeSelectValue, setTreeSelectValue] = useState(null)
const [initialLoading, setInitialLoading] = useState(true) const [initialLoading, setInitialLoading] = useState(true)
const [delayedInitialLoading, setDelayedInitalLoading] = useState(true)
const [expandedKeys, setExpandedKeys] = useState([]) const [expandedKeys, setExpandedKeys] = useState([])
const [treeVersion, setTreeVersion] = useState(0) const [treeVersion, setTreeVersion] = useState(0)
const [isSearching, setIsSearching] = useState(false) const [isSearching, setIsSearching] = useState(false)
@ -420,13 +421,18 @@ const ObjectSelect = ({
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
onTreeSelectChange( onTreeSelectChange(multiple ? [firstLeaf.value] : firstLeaf.value)
multiple ? [firstLeaf.value] : firstLeaf.value
)
setSearchValue('') setSearchValue('')
onSearch('') onSearch('')
}, },
[treeSelectProps, isSearching, treeData, multiple, onTreeSelectChange, onSearch] [
treeSelectProps,
isSearching,
treeData,
multiple,
onTreeSelectChange,
onSearch
]
) )
// Update treeData when objectPropertiesTree changes // Update treeData when objectPropertiesTree changes
useEffect(() => { useEffect(() => {
@ -583,6 +589,16 @@ const ObjectSelect = ({
} }
}, [value, getValueIdentity, type, masterFilter]) }, [value, getValueIdentity, type, masterFilter])
useEffect(() => {
if (initialLoading == false) {
setTimeout(() => {
setDelayedInitalLoading(false)
}, 50)
} else {
setDelayedInitalLoading(true)
}
}, [initialLoading])
const placeholder = useMemo( const placeholder = useMemo(
() => () =>
type == 'unknown' || type == undefined type == 'unknown' || type == undefined
@ -609,34 +625,47 @@ const ObjectSelect = ({
) )
} }
if (initialLoading) {
return <TreeSelect disabled loading placeholder='Loading...' />
}
// --- Main TreeSelect UI --- // --- Main TreeSelect UI ---
return ( return (
<TreeSelect <div>
key={treeVersion} <TreeSelect
treeDataSimpleMode={false} key={treeVersion}
treeDefaultExpandAll={true} treeDataSimpleMode={false}
treeExpandedKeys={expandedKeys} treeDefaultExpandAll={true}
onTreeExpand={setExpandedKeys} treeExpandedKeys={expandedKeys}
treeData={treeData} onTreeExpand={setExpandedKeys}
showSearch={showSearch} treeData={treeData}
filterTreeNode={() => true} showSearch={showSearch}
multiple={multiple} filterTreeNode={() => true}
loadData={isSearching ? undefined : loadData} multiple={multiple}
showCheckedStrategy={SHOW_CHILD} loadData={isSearching ? undefined : loadData}
placeholder={placeholder} showCheckedStrategy={SHOW_CHILD}
{...treeSelectProps} placeholder={placeholder}
{...rest} {...treeSelectProps}
value={treeSelectValue} {...rest}
onChange={onTreeSelectChange} value={treeSelectValue}
onSearch={onSearch} onChange={onTreeSelectChange}
onInputKeyDown={onInputKeyDown} onSearch={onSearch}
searchValue={searchValue} onInputKeyDown={onInputKeyDown}
disabled={disabled || type == 'unknown' || type == undefined} 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>
) )
} }