Stop any running View Transition when we cancel

If we have any scheduled work up until that point, we wait for it to commit
first so that if the new commit is the same as the target we don't snap
back first.

Author: sebmarkbage

packages/react-reconciler/src/ReactFiberGestureScheduler.js

@@ -8,11 +8,17 @@
  */
 
 import type {FiberRoot} from './ReactInternalTypes';
-import type {GestureTimeline} from './ReactFiberConfig';
+import type {
+  GestureTimeline,
+  RunningGestureTransition,
+} from './ReactFiberConfig';
 
-import {GestureLane} from './ReactFiberLane';
+import {GestureLane, NoLanes} from './ReactFiberLane';
 import {ensureRootIsScheduled} from './ReactFiberRootScheduler';
-import {subscribeToGestureDirection} from './ReactFiberConfig';
+import {
+  subscribeToGestureDirection,
+  stopGestureTransition,
+} from './ReactFiberConfig';
 
 // This type keeps track of any scheduled or active gestures.
 export type ScheduledGesture = {
@@ -23,6 +29,7 @@ export type ScheduledGesture = {
   rangeCurrent: number, // The starting offset along the timeline.
   rangeNext: number, // The end along the timeline where the next state is reached.
   cancel: () => void, // Cancel the subscription to direction change.
+  running: null | RunningGestureTransition, // Used to cancel the running transition after we're done.
   prev: null | ScheduledGesture, // The previous scheduled gesture in the queue for this root.
   next: null | ScheduledGesture, // The next scheduled gesture in the queue for this root.
 };
@@ -86,6 +93,7 @@ export function scheduleGesture(
     rangeCurrent: rangeCurrent,
     rangeNext: rangeNext,
     cancel: cancel,
+    running: null,
     prev: prev,
     next: null,
   };
@@ -106,10 +114,30 @@ export function cancelScheduledGesture(
   if (gesture.count === 0) {
     const cancelDirectionSubscription = gesture.cancel;
     cancelDirectionSubscription();
-    // Delete the scheduled gesture from the queue.
+    // Delete the scheduled gesture from the pending queue.
     deleteScheduledGesture(root, gesture);
     // TODO: If we're currently rendering this gesture, we need to restart the render
     // on a different gesture or cancel the render..
+    // TODO: We might want to pause the View Transition at this point since you should
+    // no longer be able to update the position of anything but it might be better to
+    // just commit the gesture state.
+    if (gesture.running !== null) {
+      if (root.pendingLanes === NoLanes) {
+        // There's no work scheduled so we can stop the View Transition right away.
+        stopGestureTransition(gesture.running);
+        gesture.running = null;
+      } else {
+        // Otherwise we schedule the gesture to be stopped at the next commit.
+        // This ensures that we don't snap back to the previous state until we have
+        // had a chance to commit any resulting updates.
+        const existing = root.stoppingGestures;
+        if (existing !== null) {
+          gesture.next = existing;
+          existing.prev = gesture;
+        }
+        root.stoppingGestures = gesture;
+      }
+    }
   }
 }
 
@@ -127,6 +155,10 @@ export function deleteScheduledGesture(
         root.pendingLanes &= ~GestureLane;
       }
     }
+    if (root.stoppingGestures === gesture) {
+      // This should not really happen the way we use it now but just in case we start.
+      root.stoppingGestures = gesture.next;
+    }
   } else {
     gesture.prev.next = gesture.next;
     if (gesture.next !== null) {
@@ -136,3 +168,18 @@ export function deleteScheduledGesture(
     gesture.next = null;
   }
 }
+
+export function stopCompletedGestures(root: FiberRoot) {
+  let gesture = root.stoppingGestures;
+  root.stoppingGestures = null;
+  while (gesture !== null) {
+    if (gesture.running !== null) {
+      stopGestureTransition(gesture.running);
+      gesture.running = null;
+    }
+    const nextGesture = gesture.next;
+    gesture.next = null;
+    gesture.prev = null;
+    gesture = nextGesture;
+  }
+}

packages/react-reconciler/src/ReactFiberRoot.js

@@ -100,6 +100,7 @@ function FiberRootNode(
 
   if (enableSwipeTransition) {
     this.pendingGestures = null;
+    this.stoppingGestures = null;
   }
 
   this.incompleteTransitions = new Map();

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -349,7 +349,10 @@ import {
 import {getMaskedContext, getUnmaskedContext} from './ReactFiberContext';
 import {peekEntangledActionLane} from './ReactFiberAsyncAction';
 import {logUncaughtError} from './ReactFiberErrorLogger';
-import {deleteScheduledGesture} from './ReactFiberGestureScheduler';
+import {
+  deleteScheduledGesture,
+  stopCompletedGestures,
+} from './ReactFiberGestureScheduler';
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
@@ -1451,7 +1454,11 @@ function commitRootWhenReady(
     // components for the purposes of forming pairs.
     accumulateSuspenseyCommit(finishedWork);
     if (isViewTransitionEligible || isGestureTransition) {
-      suspendOnActiveViewTransition(root.containerInfo);
+      // If we're stopping gestures we don't have to wait for any pending
+      // view transition. We'll stop it when we commit.
+      if (!enableSwipeTransition || root.stoppingGestures === null) {
+        suspendOnActiveViewTransition(root.containerInfo);
+      }
     }
     // At the end, ask the renderer if it's ready to commit, or if we should
     // suspend. If it's not ready, it will return a callback to subscribe to
@@ -3472,10 +3479,23 @@ function commitRoot(
       ReactSharedInternals.T = prevTransition;
     }
   }
+
+  let willStartViewTransition = shouldStartViewTransition;
+  if (enableSwipeTransition) {
+    // Stop any gestures that were completed and is now being committed.
+    if (root.stoppingGestures !== null) {
+      stopCompletedGestures(root);
+      // If we are in the process of stopping some gesture we shouldn't start
+      // a View Transition because that would start from the previous state to
+      // the next state.
+      willStartViewTransition = false;
+    }
+  }
+
   pendingEffectsStatus = PENDING_MUTATION_PHASE;
   const startedViewTransition =
     enableViewTransition &&
-    shouldStartViewTransition &&
+    willStartViewTransition &&
     startViewTransition(
       root.containerInfo,
       pendingTransitionTypes,
@@ -3876,18 +3896,12 @@ function commitGestureOnRoot(
   pendingTransitionTypes = null;
   pendingEffectsStatus = PENDING_GESTURE_MUTATION_PHASE;
 
-  if (shouldStartViewTransition) {
-    startGestureTransition(
-      root.containerInfo,
-      pendingTransitionTypes,
-      flushGestureMutations,
-      flushGestureAnimations,
-    );
-  } else {
-    // Flush synchronously just to get through the state.
-    flushGestureMutations();
-    flushGestureAnimations();
-  }
+  finishedGesture.running = startGestureTransition(
+    root.containerInfo,
+    pendingTransitionTypes,
+    flushGestureMutations,
+    flushGestureAnimations,
+  );
 }
 
 function flushGestureMutations(): void {

packages/react-reconciler/src/ReactInternalTypes.js

@@ -285,6 +285,7 @@ type BaseFiberRootProperties = {
 
   // enableSwipeTransition only
   pendingGestures: null | ScheduledGesture,
+  stoppingGestures: null | ScheduledGesture,
 };
 
 // The following attributes are only used by DevTools and are only present in DEV builds.