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

This commit is contained in:
goodmice 2022-08-02 14:29:59 +05:00
parent 702757f9a4
commit 4df60c8d9d
2 changed files with 34 additions and 9 deletions

View 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

View File

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