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(({ loading, empty, children, emptyNode = , emptyProps, ...other }) => { + if (loading) + return + + 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 setVisible(true)}>{value ?? 'Выберите месторождение'} setVisible(false)}> Список скважин - + + + )