Improve logic for figuring out back button icon

1 files changed, 10 insertions, 3 deletions

diff --git a/gui/src/renderer/lib/history.tsx b/gui/src/renderer/lib/history.tsx
index af851a01d4..741c298da6 100644
--- a/gui/src/renderer/lib/history.tsx
+++ b/gui/src/renderer/lib/history.tsx
@@ -139,6 +139,13 @@ export default class History {
     return nextIndex >= 0 && nextIndex < this.entries.length;
   }
 
+  public getPopTransition(steps = 1) {
+    // The back transition should be based on the last view to be popped, i.e. the one with the
+    // lowest index.
+    const transition = this.entries[this.index - steps + 1].state.transition;
+    return oppositeTransition(transition);
+  }
+
   // This returns this object casted as History from the History module. The difference between this
   // one and the one in the history module is that this one has stricter types for the paths.
   // Instead of accepting any string it's limited to the paths we actually support. But this history
@@ -183,13 +190,13 @@ export default class History {
 
   private popImpl(n = 1): ITransitionSpecification | undefined {
     if (this.canGo(-n)) {
+      const transition = this.getPopTransition(n);
+
       this.lastAction = 'POP';
       this.index -= n;
-
-      const transition = this.entries[this.index + 1].state.transition;
       this.entries = this.entries.slice(0, this.index + 1);
 
-      return oppositeTransition(transition);
+      return transition;
     } else {
       return undefined;
     }