diff --git a/react/features/base/ui/components/web/DialogTransition.tsx b/react/features/base/ui/components/web/DialogTransition.tsx index 408a0d3a75..4727758993 100644 --- a/react/features/base/ui/components/web/DialogTransition.tsx +++ b/react/features/base/ui/components/web/DialogTransition.tsx @@ -2,18 +2,29 @@ import React, { ReactElement, useEffect, useState } from 'react'; export const DialogTransitionContext = React.createContext({ isUnmounting: false }); +type TimeoutType = ReturnType; + const DialogTransition = ({ children }: { children: ReactElement | null; }) => { const [ childrenToRender, setChildrenToRender ] = useState(children); const [ isUnmounting, setIsUnmounting ] = useState(false); + const [ timeoutID, setTimeoutID ] = useState(undefined); useEffect(() => { if (children === null) { setIsUnmounting(true); - setTimeout(() => { - setChildrenToRender(children); - setIsUnmounting(false); - }, 150); + if (typeof timeoutID === 'undefined') { + setTimeoutID(setTimeout(() => { + setChildrenToRender(children); + setIsUnmounting(false); + setTimeoutID(undefined); + }, 150)); + } } else { + if (typeof timeoutID !== 'undefined') { + clearTimeout(timeoutID); + setTimeoutID(undefined); + setIsUnmounting(false); + } setChildrenToRender(children); } }, [ children ]);