fix: Modal is blinking when opening (#16035)

superset-frontend/src/common/components/index.tsx

@@ -42,7 +42,6 @@ export {
   Dropdown,
   Form,
   Empty,
-  Modal,
   Typography,
   Tree,
   Popover,
@@ -58,6 +57,7 @@ export {
   Input as AntdInput,
 } from 'antd';
 export { Card as AntdCard } from 'antd';
+export { default as Modal, ModalProps } from 'antd/lib/modal';
 export { FormInstance } from 'antd/lib/form';
 export { RadioChangeEvent } from 'antd/lib/radio';
 export { TreeProps } from 'antd/lib/tree';

superset-frontend/src/components/Modal/Modal.tsx

@@ -20,7 +20,10 @@ import React from 'react';
 import { isNil } from 'lodash';
 import { styled, t } from '@superset-ui/core';
 import { css } from '@emotion/react';
-import { Modal as BaseModal } from 'src/common/components';
+import {
+  Modal as AntdModal,
+  ModalProps as AntdModalProps,
+} from 'src/common/components';
 import Button from 'src/components/Button';
 
 export interface ModalProps {
@@ -52,6 +55,12 @@ interface StyledModalProps {
   hideFooter?: boolean;
 }
 
+const BaseModal = (props: AntdModalProps) => (
+  // Removes mask animation. Fixed in 4.6.0.
+  // https://github.com/ant-design/ant-design/issues/27192
+  <AntdModal {...props} maskTransitionName="" />
+);
+
 export const StyledModal = styled(BaseModal)<StyledModalProps>`
   ${({ theme, responsive, maxWidth }) =>
     responsive &&
@@ -188,10 +197,10 @@ CustomModal.displayName = 'Modal';
 // and demote it as the default export.
 // We should start using AntD component interfaces going forward.
 const Modal = Object.assign(CustomModal, {
-  error: BaseModal.error,
-  warning: BaseModal.warning,
-  confirm: BaseModal.confirm,
-  useModal: BaseModal.useModal,
+  error: AntdModal.error,
+  warning: AntdModal.warning,
+  confirm: AntdModal.confirm,
+  useModal: AntdModal.useModal,
 });
 
 export default Modal;