From 4df60c8d9d5fe032c6fb5a2207c617cb4412ae00 Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Tue, 2 Aug 2022 14:29:59 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D1=87=D0=B5=D1=80=D0=B5=D0=B7=20=D1=81=D0=BA=D0=B5?=
 =?UTF-8?q?=D0=BB=D0=B5=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SkeletonLoader.tsx             | 22 +++++++++++++++++++
 src/components/selectors/WellTreeSelector.tsx | 21 ++++++++++--------
 2 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 src/components/SkeletonLoader.tsx

diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx
new file mode 100644
index 0000000..e8a78f9
--- /dev/null
+++ b/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
diff --git a/src/components/selectors/WellTreeSelector.tsx b/src/components/selectors/WellTreeSelector.tsx
index 1cb8add..7378aed 100755
--- a/src/components/selectors/WellTreeSelector.tsx
+++ b/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
-                    {...other}
-                    showIcon
-                    selectedKeys={selected}
-                    treeData={wellsTree}
-                    onSelect={onSelect}
-                    onExpand={setExpanded}
-                    expandedKeys={expanded}
-                />
+                <SkeletonLoader loading={showLoader} empty={!wellsTree || wellsTree.length <= 0}>
+                    <Tree
+                        {...other}
+                        showIcon
+                        selectedKeys={selected}
+                        treeData={wellsTree}
+                        onSelect={onSelect}
+                        onExpand={setExpanded}
+                        expandedKeys={expanded}
+                    />
+                </SkeletonLoader>
             </Drawer>
         </>
     )