From 95f728e04eecdb622ba40cf81eec3bfc2f01c062 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <michael.s.molina@gmail.com>
Date: Mon, 2 Aug 2021 15:26:18 -0300
Subject: [PATCH] fix: Modal is blinking when opening

---
 .../src/common/components/index.tsx           |  2 +-
 .../src/components/Modal/Modal.tsx            | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
index a8db8513a8888..af2d5cf0c09db 100644
--- a/superset-frontend/src/common/components/index.tsx
+++ b/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';
diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx
index 661d216ce4f86..a23f40a5360f9 100644
--- a/superset-frontend/src/components/Modal/Modal.tsx
+++ b/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;