Add transition when logging out

5 files changed, 35 insertions, 28 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index faaf784aed..a3c5407eaa 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -369,6 +369,7 @@ export default class AppRenderer {
 
   public async logout() {
     try {
+      this.history.reset(RoutePath.login, transitions.dismiss);
       await IpcRendererEventChannel.account.logout();
     } catch (e) {
       const error = e as Error;
@@ -647,7 +648,7 @@ export default class AppRenderer {
             [RoutePath.launch]: transitions.push,
             [RoutePath.main]: transitions.pop,
             [RoutePath.deviceRevoked]: transitions.pop,
-            '*': transitions.none,
+            '*': transitions.dismiss,
           },
           [RoutePath.main]: {
             [RoutePath.launch]: transitions.push,
diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index 046650da42..b5bbfd773c 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -157,7 +157,7 @@ export default class Account extends React.Component<IProps, IState> {
       this.state.logoutDialogStage === 'checking-ports'
         ? []
         : [
-            <AppButton.RedButton key="logout" onClick={this.props.onLogout}>
+            <AppButton.RedButton key="logout" onClick={this.confirmLogout}>
               {
                 // TRANSLATORS: Confirmation button when logging out
                 messages.pgettext('device-management', 'Log out anyway')
@@ -187,11 +187,15 @@ export default class Account extends React.Component<IProps, IState> {
     ) {
       this.setState({ logoutDialogStage: 'confirm' });
     } else {
-      this.props.onLogout();
-      this.onHideLogoutConfirmationDialog();
+      this.confirmLogout();
     }
   };
 
+  private confirmLogout = () => {
+    this.onHideLogoutConfirmationDialog();
+    this.props.onLogout();
+  };
+
   private cancelLogout = () => {
     this.props.cancelLogout();
     this.onHideLogoutConfirmationDialog();
diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index 8d96d47c7b..92e794342e 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { colors } from '../../config.json';
 import log from '../../shared/logging';
-import { usePause } from '../lib/pause-rendering';
+import { useWillExit } from '../lib/will-exit';
 import { tinyText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import ImageView from './ImageView';
@@ -163,19 +163,24 @@ export function ModalAlert(props: IModalAlertProps & { isOpen: boolean }) {
   const [closing, setClosing] = useState(false);
   const prevIsOpen = useRef(isOpen);
 
-  const [paused, runIfNotPaused] = usePause();
+  const willExit = useWillExit();
+
+  // Modal shouldn't prepare for being opened again while view is disappearing.
+  const onTransitionEnd = useCallback(() => {
+    if (!willExit) {
+      setClosing(false);
+    }
+  }, [willExit]);
 
   useEffect(() => {
     setClosing((closing) => closing || (prevIsOpen.current && !isOpen));
 
     // Unmounting the Modal during view transitions result in a visual glitch.
-    runIfNotPaused(() => {
+    if (!willExit) {
       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 30827bd903..6deeac5cd0 100644
--- a/gui/src/renderer/components/TransitionContainer.tsx
+++ b/gui/src/renderer/components/TransitionContainer.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { ITransitionSpecification } from '../lib/history';
-import { PauseRendering } from '../lib/pause-rendering';
+import { WillExit } from '../lib/will-exit';
 
 interface ITransitioningViewProps {
   viewId: string;
@@ -155,33 +155,30 @@ export default class TransitionContainer extends React.Component<IProps, IState>
   }
 
   public render() {
-    const disableUserInteraction =
-      this.state.itemQueue.length > 0 || this.state.nextItem !== undefined;
+    const willExit = this.state.itemQueue.length > 0 || this.state.nextItem !== undefined;
 
     return (
-      <StyledTransitionContainer disableUserInteraction={disableUserInteraction}>
+      <StyledTransitionContainer disableUserInteraction={willExit}>
         {this.state.currentItem && (
-          <PauseRendering
-            key={this.state.currentItem.view.props.viewId}
-            pause={disableUserInteraction}>
+          <WillExit key={this.state.currentItem.view.props.viewId} value={willExit}>
             <StyledTransitionContent
               ref={this.currentContentRef}
               transition={this.state.currentItemStyle}
               onTransitionEnd={this.onTransitionEnd}>
               {this.state.currentItem.view}
             </StyledTransitionContent>
-          </PauseRendering>
+          </WillExit>
         )}
 
         {this.state.nextItem && (
-          <PauseRendering key={this.state.nextItem.view.props.viewId}>
+          <WillExit key={this.state.nextItem.view.props.viewId} value={false}>
             <StyledTransitionContent
               ref={this.nextContentRef}
               transition={this.state.nextItemStyle}
               onTransitionEnd={this.onTransitionEnd}>
               {this.state.nextItem.view}
             </StyledTransitionContent>
-          </PauseRendering>
+          </WillExit>
         )}
       </StyledTransitionContainer>
     );
diff --git a/gui/src/renderer/redux/store.ts b/gui/src/renderer/redux/store.ts
index a8d3a302b6..d0969dbf85 100644
--- a/gui/src/renderer/redux/store.ts
+++ b/gui/src/renderer/redux/store.ts
@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import { useSelector as useReduxSelector } from 'react-redux';
 import { combineReducers, compose, createStore, Dispatch } from 'redux';
 
-import { usePause } from '../lib/pause-rendering';
+import { useWillExit } from '../lib/will-exit';
 import accountActions, { AccountAction } from './account/actions';
 import accountReducer, { IAccountReduxState } from './account/reducers';
 import connectionActions, { ConnectionAction } from './connection/actions';
@@ -66,16 +66,16 @@ function composeEnhancers(): typeof compose {
     : compose();
 }
 
-// This hook adds typing to state to make use simpler. It also prevents the state from update if the
-// ReduxPause context has been told to pause updates caused by new values in the redux state.
+// This hook adds type to state to make use simpler. It also prevents the state from update if the
+// WillExit context value is true.
 export function useSelector<R>(fn: (state: IReduxState) => R): R {
-  const [paused] = usePause();
   const value = useReduxSelector(fn);
-  const valueBeforePause = useRef(value);
+  const valueBeforeExit = useRef(value);
+  const willExit = useWillExit();
 
-  if (!paused) {
-    valueBeforePause.current = value;
+  if (!willExit) {
+    valueBeforeExit.current = value;
   }
 
-  return paused ? valueBeforePause.current : value;
+  return valueBeforeExit.current;
 }