Добавлено отображение загрузки через скелет

src/components/SkeletonLoader.tsx

@@ -0,0 +1,22 @@
+import { Empty, EmptyProps, Skeleton, SkeletonProps } from 'antd'
+import { cloneElement, memo } from 'react'
+
+export type SkeletonLoaderProps = SkeletonProps & {
+    empty?: boolean
+    loading?: boolean
+    children: JSX.Element
+    emptyNode?: JSX.Element
+    emptyProps?: EmptyProps
+}
+
+export const SkeletonLoader = memo<SkeletonLoaderProps>(({ loading, empty, children, emptyNode = <Empty />, emptyProps, ...other }) => {
+    if (loading)
+        return <Skeleton active {...other} />
+
+    if (empty)
+        return cloneElement(emptyNode, emptyProps)
+    
+    return children
+})
+
+export default SkeletonLoader

src/components/selectors/WellTreeSelector.tsx

@@ -3,6 +3,7 @@ import { DefaultValueType } from 'rc-tree-select/lib/interface'
 import { useState, useEffect, ReactNode, useCallback, memo, Key } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 
+import SkeletonLoader from '@components/SkeletonLoader'
 import { WellIcon, WellIconState } from '@components/icons'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DepositService, DepositDto, WellDto } from '@api'
@@ -164,15 +165,17 @@ export const WellTreeSelector = memo(({ show, ...other }: TreeProps<TreeNodeData
             <Button loading={showLoader} onClick={() => setVisible(true)}>{value ?? 'Выберите месторождение'}</Button>
             <Drawer visible={visible} mask={false} onClose={() => setVisible(false)}>
                 <Typography.Title level={3}>Список скважин</Typography.Title>
-                <Tree
+                <SkeletonLoader loading={showLoader} empty={!wellsTree || wellsTree.length <= 0}>
-                    {...other}
+                    <Tree
-                    showIcon
+                        {...other}
-                    selectedKeys={selected}
+                        showIcon
-                    treeData={wellsTree}
+                        selectedKeys={selected}
-                    onSelect={onSelect}
+                        treeData={wellsTree}
-                    onExpand={setExpanded}
+                        onSelect={onSelect}
-                    expandedKeys={expanded}
+                        onExpand={setExpanded}
-                />
+                        expandedKeys={expanded}
+                    />
+                </SkeletonLoader>
             </Drawer>
         </>
     )