Merge branch 'fix-animation-on-escape'

9 files changed, 28 insertions, 27 deletions

diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index 10ee3f209d..492fcc3fc9 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { messages, relayLocations } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { useAppContext } from '../context';
-import { useHistory } from '../lib/history';
+import { transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { IRelayLocationRedux, RelaySettingsRedux } from '../redux/settings/reducers';
 import { useSelector } from '../redux/store';
@@ -133,8 +133,8 @@ export default function Connect() {
   }, [mapCenter, showMarkerOrSpinner, markerStyle, zoomLevel]);
 
   const onSelectLocation = useCallback(() => {
-    history.show(RoutePath.selectLocation);
-  }, [history.show]);
+    history.push(RoutePath.selectLocation, { transition: transitions.show });
+  }, [history.push]);
 
   const selectedRelayName = useMemo(() => getRelayName(relaySettings, relayLocations), [
     relaySettings,
diff --git a/gui/src/renderer/components/ExpiredAccountAddTime.tsx b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
index 54d27f75d8..57a3856dce 100644
--- a/gui/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -280,7 +280,7 @@ function useFinishedCallback() {
       accountSetupFinished();
     }
 
-    history.reset(RoutePath.main, transitions.push);
+    history.reset(RoutePath.main, { transition: transitions.push });
   }, [isNewAccount, accountSetupFinished, history]);
 
   return callback;
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 8a9ea40a9d..3cf96df6fc 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { TunnelState } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
-import { useHistory } from '../lib/history';
+import { transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { IReduxState } from '../redux/store';
 import { FocusFallback } from './Focus';
@@ -101,7 +101,7 @@ export function HeaderBarSettingsButton(props: IHeaderBarSettingsButtonProps) {
 
   const openSettings = useCallback(() => {
     if (!props.disabled) {
-      history.show(RoutePath.settings);
+      history.push(RoutePath.settings, { transition: transitions.show });
     }
   }, [history, props.disabled]);
 
diff --git a/gui/src/renderer/components/KeyboardNavigation.tsx b/gui/src/renderer/components/KeyboardNavigation.tsx
index 9f657fb54b..8e8bae5faf 100644
--- a/gui/src/renderer/components/KeyboardNavigation.tsx
+++ b/gui/src/renderer/components/KeyboardNavigation.tsx
@@ -20,14 +20,14 @@ export default function KeyboardNavigation(props: IKeyboardNavigationProps) {
         const path = location.pathname as RoutePath;
         if (!disableDismissForRoutes.includes(path)) {
           if (event.shiftKey) {
-            history.dismiss(true);
+            history.pop(true);
           } else {
             backAction?.action();
           }
         }
       }
     },
-    [history.dismiss, backAction, location.pathname],
+    [history.pop, backAction, location.pathname],
   );
 
   useEffect(() => {
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index 14b0fb44d5..76b4d6b4fd 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -38,7 +38,7 @@ export default function Support() {
   const showSubSettings = loginState.type === 'ok' && connectedToDaemon;
 
   return (
-    <BackAction icon="close" action={history.dismiss}>
+    <BackAction icon="close" action={history.pop}>
       <Layout>
         <SettingsContainer>
           <NavigationContainer>
diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index b23fe3f2df..23ff399edb 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -93,11 +93,11 @@ export default function TooManyDevices() {
 
   const continueLogin = useCallback(() => {
     void login(accountToken);
-    history.reset(RoutePath.login, transitions.pop);
+    history.reset(RoutePath.login, { transition: transitions.pop });
   }, [login, accountToken]);
   const cancel = useCallback(() => {
     cancelLogin();
-    history.reset(RoutePath.login, transitions.pop);
+    history.reset(RoutePath.login, { transition: transitions.pop });
   }, [history.reset, cancelLogin]);
 
   const iconSource = getIconSource(devices);
diff --git a/gui/src/renderer/components/TransitionContainer.tsx b/gui/src/renderer/components/TransitionContainer.tsx
index 5fbfe61a55..1587cce024 100644
--- a/gui/src/renderer/components/TransitionContainer.tsx
+++ b/gui/src/renderer/components/TransitionContainer.tsx
@@ -91,6 +91,8 @@ export default class TransitionContainer extends React.Component<IProps, IState>
 
   private currentContentRef = React.createRef<HTMLDivElement>();
   private nextContentRef = React.createRef<HTMLDivElement>();
+  // The item that should trigger the cycle to finish in onTransitionEnd
+  private transitioningItemRef?: React.RefObject<HTMLDivElement>;
 
   public static getDerivedStateFromProps(props: IProps, state: IState) {
     const candidate = props.children;
@@ -187,12 +189,11 @@ export default class TransitionContainer extends React.Component<IProps, IState>
   }
 
   private onTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {
-    if (
-      this.isCycling &&
-      (event.target === this.currentContentRef.current ||
-        event.target === this.nextContentRef.current)
-    ) {
-      this.continueCycling();
+    if (this.isCycling && event.target === this.transitioningItemRef?.current) {
+      this.transitioningItemRef = undefined;
+      this.makeNextItemCurrent(() => {
+        this.onFinishCycle();
+      });
     }
   };
 
@@ -203,15 +204,11 @@ export default class TransitionContainer extends React.Component<IProps, IState>
     }
   }
 
-  private finishCycling() {
-    this.isCycling = false;
+  private onFinishCycle() {
     this.props.onTransitionEnd();
+    this.cycleUnguarded();
   }
 
-  private continueCycling = () => {
-    this.makeNextItemCurrent(this.cycleUnguarded);
-  };
-
   private cycleUnguarded = () => {
     const itemQueue = this.state.itemQueue;
 
@@ -237,11 +234,11 @@ export default class TransitionContainer extends React.Component<IProps, IState>
           break;
 
         default:
-          this.replace(this.cycleUnguarded);
+          this.replace(() => this.onFinishCycle);
           break;
       }
     } else {
-      this.finishCycling();
+      this.isCycling = false;
     }
   };
 
@@ -270,6 +267,7 @@ export default class TransitionContainer extends React.Component<IProps, IState>
   }
 
   private slideUp(duration: number) {
+    this.transitioningItemRef = this.nextContentRef;
     this.setState((state) => ({
       nextItem: state.itemQueue[0],
       itemQueue: state.itemQueue.slice(1),
@@ -281,6 +279,7 @@ export default class TransitionContainer extends React.Component<IProps, IState>
   }
 
   private slideDown(duration: number) {
+    this.transitioningItemRef = this.currentContentRef;
     this.setState((state) => ({
       nextItem: state.itemQueue[0],
       itemQueue: state.itemQueue.slice(1),
@@ -292,6 +291,7 @@ export default class TransitionContainer extends React.Component<IProps, IState>
   }
 
   private push(duration: number) {
+    this.transitioningItemRef = this.nextContentRef;
     this.setState((state) => ({
       nextItem: state.itemQueue[0],
       itemQueue: state.itemQueue.slice(1),
@@ -303,6 +303,7 @@ export default class TransitionContainer extends React.Component<IProps, IState>
   }
 
   private pop(duration: number) {
+    this.transitioningItemRef = this.currentContentRef;
     this.setState((state) => ({
       nextItem: state.itemQueue[0],
       itemQueue: state.itemQueue.slice(1),
diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index c26dacdd33..9e9c60b7a5 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -71,7 +71,7 @@ export default function SelectLocation() {
 
   const [searchValue, setSearchValue] = useState('');
 
-  const onClose = useCallback(() => history.dismiss(), [history]);
+  const onClose = useCallback(() => history.pop(), [history]);
   const onViewFilter = useCallback(() => history.push(RoutePath.filter), [history]);
 
   const tunnelProtocol = relaySettings?.tunnelProtocol ?? 'any';
diff --git a/gui/src/renderer/components/select-location/select-location-hooks.ts b/gui/src/renderer/components/select-location/select-location-hooks.ts
index a1d54b435d..0cefdecb4f 100644
--- a/gui/src/renderer/components/select-location/select-location-hooks.ts
+++ b/gui/src/renderer/components/select-location/select-location-hooks.ts
@@ -27,7 +27,7 @@ export function useOnSelectExitLocation() {
         throw new Error('relayLocation should never be undefiend');
       }
 
-      history.dismiss();
+      history.pop();
       const relayUpdate = RelaySettingsBuilder.normal()
         .location.fromRaw(relayLocation.value)
         .build();