Add component for pausing redux

2 files changed, 29 insertions, 16 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;
   }
diff --git a/gui/src/renderer/components/TransitionContainer.tsx b/gui/src/renderer/components/TransitionContainer.tsx
index e360e6838e..30827bd903 100644
--- a/gui/src/renderer/components/TransitionContainer.tsx
+++ b/gui/src/renderer/components/TransitionContainer.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { ITransitionSpecification } from '../lib/history';
+import { PauseRendering } from '../lib/pause-rendering';
 
 interface ITransitioningViewProps {
   viewId: string;
@@ -155,28 +156,32 @@ export default class TransitionContainer extends React.Component<IProps, IState>
 
   public render() {
     const disableUserInteraction =
-      this.state.itemQueue.length > 0 || this.state.nextItem ? true : false;
+      this.state.itemQueue.length > 0 || this.state.nextItem !== undefined;
 
     return (
       <StyledTransitionContainer disableUserInteraction={disableUserInteraction}>
         {this.state.currentItem && (
-          <StyledTransitionContent
+          <PauseRendering
             key={this.state.currentItem.view.props.viewId}
-            ref={this.currentContentRef}
-            transition={this.state.currentItemStyle}
-            onTransitionEnd={this.onTransitionEnd}>
-            {this.state.currentItem.view}
-          </StyledTransitionContent>
+            pause={disableUserInteraction}>
+            <StyledTransitionContent
+              ref={this.currentContentRef}
+              transition={this.state.currentItemStyle}
+              onTransitionEnd={this.onTransitionEnd}>
+              {this.state.currentItem.view}
+            </StyledTransitionContent>
+          </PauseRendering>
         )}
 
         {this.state.nextItem && (
-          <StyledTransitionContent
-            key={this.state.nextItem.view.props.viewId}
-            ref={this.nextContentRef}
-            transition={this.state.nextItemStyle}
-            onTransitionEnd={this.onTransitionEnd}>
-            {this.state.nextItem.view}
-          </StyledTransitionContent>
+          <PauseRendering key={this.state.nextItem.view.props.viewId}>
+            <StyledTransitionContent
+              ref={this.nextContentRef}
+              transition={this.state.nextItemStyle}
+              onTransitionEnd={this.onTransitionEnd}>
+              {this.state.nextItem.view}
+            </StyledTransitionContent>
+          </PauseRendering>
         )}
       </StyledTransitionContainer>
     );