fix(router-outlet): improve reliability of swipe back gesture when quickly swiping back

core/src/components/router-outlet/route-outlet.tsx

@@ -19,7 +19,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
   private waitPromise?: Promise<void>;
   private gesture?: Gesture;
   private ani?: Animation;
-  private animationEnabled = true;
+  private gestureOrAnimationInProgress = false;
 
   @Element() el!: HTMLElement;
 
@@ -61,17 +61,22 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
   @Event({ bubbles: false }) ionNavDidChange!: EventEmitter<void>;
 
   async connectedCallback() {
+    const onStart = () => {
+      this.gestureOrAnimationInProgress = true;
+      if (this.swipeHandler) {
+        this.swipeHandler.onStart();
+      }
+    }
+
     this.gesture = (await import('../../utils/gesture/swipe-back')).createSwipeBackGesture(
       this.el,
-      () => !!this.swipeHandler && this.swipeHandler.canStart() && this.animationEnabled,
-      () => this.swipeHandler && this.swipeHandler.onStart(),
+      () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(),
+      () => onStart(),
       step => this.ani && this.ani.progressStep(step),
       (shouldComplete, step, dur) => {
         if (this.ani) {
-          this.animationEnabled = false;
-
           this.ani.onFinish(() => {
-            this.animationEnabled = true;
+            this.gestureOrAnimationInProgress = false;
 
             if (this.swipeHandler) {
               this.swipeHandler.onEnd(shouldComplete);
@@ -97,7 +102,8 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
           }
 
           this.ani.progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
-
+        } else {
+          this.gestureOrAnimationInProgress = false;
         }
       }
     );
@@ -191,7 +197,34 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
       leavingEl,
       baseEl: el,
       progressCallback: (opts.progressAnimation
-        ? ani => this.ani = ani
+        ? ani => {
+          /**
+           * Because this progress callback is called asynchronously
+           * it is possible for the gesture to start and end before
+           * the animation is ever set. In that scenario, we should
+           * immediately call progressEnd so that the transition promise
+           * resolves and the gesture does not get locked up.
+           */
+          if (ani !== undefined && !this.gestureOrAnimationInProgress) {
+            this.gestureOrAnimationInProgress = true;
+            ani.onFinish(() => {
+              this.gestureOrAnimationInProgress = false;
+              if (this.swipeHandler) {
+                this.swipeHandler.onEnd(false);
+              }
+            }, { oneTimeCallback: true });
+
+            /**
+             * Playing animation to beginning
+             * with a duration of 0 prevents
+             * any flickering when the animation
+             * is later cleaned up.
+             */
+            ani.progressEnd(0, 0, 0);
+          } else {
+            this.ani = ani;
+          }
+        }
         : undefined
       ),
       ...opts,

packages/react-router/test-app/cypress/integration/swipe-to-go-back.js

@@ -10,6 +10,7 @@ describe('Swipe To Go Back', () => {
     cy.ionPageVisible('main');
     cy.ionNav('ion-item', 'Details');
     cy.ionPageVisible('details');
+    cy.ionPageHidden('main');
     cy.ionSwipeToGoBack(true);
     cy.ionPageVisible('main');
   });