forked from ddrilling/asb_cloud_front
Добавлено отображение загрузки через скелет
This commit is contained in:
parent
702757f9a4
commit
4df60c8d9d
22
src/components/SkeletonLoader.tsx
Normal file
22
src/components/SkeletonLoader.tsx
Normal file
@ -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
|
@ -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>
|
||||
</>
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user