diff --git a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx index d7d6724def..1c43c5bc9e 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx @@ -9,7 +9,7 @@ import { css } from '@emotion/css'; import { observer, useField, useFieldSchema } from '@formily/react'; -import { Modal, ModalProps } from 'antd'; +import { Modal, ModalProps, Skeleton } from 'antd'; import classNames from 'classnames'; import React, { FC, startTransition, useEffect, useState } from 'react'; import { ErrorBoundary, FallbackProps } from 'react-error-boundary'; @@ -53,7 +53,6 @@ const ActionModalContent: FC<{ footerNodeName: string; field: any; schema: any } if (!deferredVisible) { return null; } - return ( { + if (visible) { + const timer = setTimeout(() => setReady(true), delay); + return () => clearTimeout(timer); + } else { + setReady(false); + } + }, [visible]); + return ready; +} + export const InternalActionModal: React.FC> = observer( (props) => { const { footerNodeName = 'Action.Modal.Footer', width, zIndex: _zIndex, ...others } = props; @@ -90,6 +102,7 @@ export const InternalActionModal: React.FC> = obse } const zIndex = getZIndex('modal', _zIndex || parentZIndex, props.level || 0); + const ready = useDelayedVisible(visible, 200); // 200ms 与 Modal 动画时间一致 return ( @@ -154,7 +167,11 @@ export const InternalActionModal: React.FC> = obse ) } > - + {ready ? ( + + ) : ( + + )}