Add component for pausing redux

1 files changed, 10 insertions, 2 deletions

diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index f6fa9f25b4..8d96d47c7b 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { colors } from '../../config.json';
 import log from '../../shared/logging';
+import { usePause } from '../lib/pause-rendering';
 import { tinyText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import ImageView from './ImageView';
@@ -162,12 +163,19 @@ export function ModalAlert(props: IModalAlertProps & { isOpen: boolean }) {
   const [closing, setClosing] = useState(false);
   const prevIsOpen = useRef(isOpen);
 
-  const onTransitionEnd = useCallback(() => setClosing(false), []);
+  const [paused, runIfNotPaused] = usePause();
+
   useEffect(() => {
     setClosing((closing) => closing || (prevIsOpen.current && !isOpen));
-    prevIsOpen.current = isOpen;
+
+    // Unmounting the Modal during view transitions result in a visual glitch.
+    runIfNotPaused(() => {
+      prevIsOpen.current = isOpen;
+    });
   }, [isOpen]);
 
+  const onTransitionEnd = useCallback(() => runIfNotPaused(() => setClosing(false)), [paused]);
+
   if (!prevIsOpen.current && !isOpen && !closing) {
     return null;
   }