[Fiber] Suspend the commit while we wait for the previous View Transi…

…tion to finish (#32002)

Stacked on #31975.

View Transitions cannot handle interruptions in that if you start a new
one before the previous one has finished, it just stops and then
restarts. It doesn't seamlessly transition into the new transition.

This is generally considered a bad thing but I actually think it's quite
good for fire-and-forget animations (gestures is another story). There
are too many examples of bad animations in fast interactions because the
scenario wasn't predicted. Like overlapping toasts or stacked layers
that look bad. The only case interrupts tend to work well is when you do
a strict reversal of an animation like returning to the page you just
left or exiting a modal just being opened. However, we're limited by the
platform even in that regard.

I think one reason interruptions have traditionally been seen as good is
because it's hard if you have a synchronous framework to not interrupt
since your application state has already moved on. We don't have that
limitation since we can suspend commits. We can do all the work to
prepare for the next commit by rendering while the animation is going
but then delay the commit until the previous one finishes.

Another technical limitation earlier animation libraries suffered from
is only have the option to either interrupt or sequence animations since
it's modeling just one change set. Like showing one toast at a time.
That's bad. We don't have that limitation because we can interrupt a
previously suspended commit and start working on a new one instead.
That's what we do for suspended transitions in general. The net effect
is that we batch the commits.

Therefore if you get multiple toasts flying in fast, they can animate as
a batch in together all at once instead of overlapping slightly or being
staggered. Interruptions (often) bad. Staggered animations bad. Batched
animations good.

This PR stashes the currently active View Transition with an expando on
the container that's animating (currently always document). This is
similar to what we do with event handlers etc. We reason we do this with
an expando is that if you have multiple Reacts on the same page they
need to wait for each other. However, one of those might also be the SSR
runtime. So this lets us wait for the SSR runtime's animations to finish
before starting client ones. This could really be a more generic name
since this should ideally be shared across frameworks. It's kind of
strange that this property doesn't already exist in the DOM given that
there can only be one. It would be useful to be able to coordinate this
across libraries.

packages/react-art/src/ReactFiberConfigART.js

@@ -542,6 +542,8 @@ export function startSuspendingCommit() {}
 
 export function suspendInstance(type, props) {}
 
+export function suspendOnActiveViewTransition(container) {}
+
 export function waitForCommitToBeReady() {
   return null;
 }

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -1219,8 +1219,14 @@ export function startViewTransition(
       },
       types: null, // TODO: Provide types.
     });
+    // $FlowFixMe[prop-missing]
+    ownerDocument.__reactViewTransition = transition;
     transition.ready.then(layoutCallback, layoutCallback);
-    transition.finished.then(passiveCallback);
+    transition.finished.then(() => {
+      // $FlowFixMe[prop-missing]
+      ownerDocument.__reactViewTransition = null;
+      passiveCallback();
+    });
     return true;
   } catch (x) {
     // We use the error as feature detection.
@@ -3706,6 +3712,27 @@ export function suspendResource(
   }
 }
 
+export function suspendOnActiveViewTransition(rootContainer: Container): void {
+  if (suspendedState === null) {
+    throw new Error(
+      'Internal React Error: suspendedState null when it was expected to exists. Please report this as a React bug.',
+    );
+  }
+  const state = suspendedState;
+  const ownerDocument =
+    rootContainer.nodeType === DOCUMENT_NODE
+      ? rootContainer
+      : rootContainer.ownerDocument;
+  // $FlowFixMe[prop-missing]
+  const activeViewTransition = ownerDocument.__reactViewTransition;
+  if (activeViewTransition == null) {
+    return;
+  }
+  state.count++;
+  const ping = onUnsuspend.bind(state);
+  activeViewTransition.finished.then(ping, ping);
+}
+
 export function waitForCommitToBeReady(): null | ((() => void) => () => void) {
   if (suspendedState === null) {
     throw new Error(

packages/react-native-renderer/src/ReactFiberConfigFabric.js

@@ -551,6 +551,8 @@ export function startSuspendingCommit(): void {}
 
 export function suspendInstance(type: Type, props: Props): void {}
 
+export function suspendOnActiveViewTransition(container: Container): void {}
+
 export function waitForCommitToBeReady(): null {
   return null;
 }

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -637,6 +637,8 @@ export function startSuspendingCommit(): void {}
 
 export function suspendInstance(type: Type, props: Props): void {}
 
+export function suspendOnActiveViewTransition(container: Container): void {}
+
 export function waitForCommitToBeReady(): null {
   return null;
 }

packages/react-noop-renderer/src/createReactNoop.js

@@ -643,6 +643,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       );
     },
 
+    suspendOnActiveViewTransition(container: Container): void {
+      // Not implemented
+    },
+
     waitForCommitToBeReady,
 
     NotPendingTransition: (null: TransitionStatus),

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -85,6 +85,7 @@ import {
   noTimeout,
   afterActiveInstanceBlur,
   startSuspendingCommit,
+  suspendOnActiveViewTransition,
   waitForCommitToBeReady,
   preloadInstance,
   preloadResource,
@@ -1393,19 +1394,26 @@ function commitRootWhenReady(
   // one after the other.
   const BothVisibilityAndMaySuspendCommit = Visibility | MaySuspendCommit;
   const subtreeFlags = finishedWork.subtreeFlags;
-  if (
+  const isViewTransitionEligible =
+    enableViewTransition && includesOnlyViewTransitionEligibleLanes(lanes); // TODO: Use a subtreeFlag to optimize.
+  const maySuspendCommit =
     subtreeFlags & ShouldSuspendCommit ||
     (subtreeFlags & BothVisibilityAndMaySuspendCommit) ===
-      BothVisibilityAndMaySuspendCommit
-  ) {
+      BothVisibilityAndMaySuspendCommit;
+  if (isViewTransitionEligible || maySuspendCommit) {
     // Before committing, ask the renderer whether the host tree is ready.
     // If it's not, we'll wait until it notifies us.
     startSuspendingCommit();
     // This will walk the completed fiber tree and attach listeners to all
     // the suspensey resources. The renderer is responsible for accumulating
     // all the load events. This all happens in a single synchronous
     // transaction, so it track state in its own module scope.
-    accumulateSuspenseyCommit(finishedWork);
+    if (maySuspendCommit) {
+      accumulateSuspenseyCommit(finishedWork);
+    }
+    if (isViewTransitionEligible) {
+      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
     // a ready event.

packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js

@@ -102,6 +102,7 @@ describe('ReactFiberHostContext', () => {
       },
       startSuspendingCommit() {},
       suspendInstance(type, props) {},
+      suspendOnActiveViewTransition(container) {},
       waitForCommitToBeReady() {
         return null;
       },

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -85,6 +85,8 @@ export const maySuspendCommit = $$$config.maySuspendCommit;
 export const preloadInstance = $$$config.preloadInstance;
 export const startSuspendingCommit = $$$config.startSuspendingCommit;
 export const suspendInstance = $$$config.suspendInstance;
+export const suspendOnActiveViewTransition =
+  $$$config.suspendOnActiveViewTransition;
 export const waitForCommitToBeReady = $$$config.waitForCommitToBeReady;
 export const NotPendingTransition = $$$config.NotPendingTransition;
 export const HostTransitionContext = $$$config.HostTransitionContext;

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -425,6 +425,8 @@ export function startSuspendingCommit(): void {}
 
 export function suspendInstance(type: Type, props: Props): void {}
 
+export function suspendOnActiveViewTransition(container: Container): void {}
+
 export function waitForCommitToBeReady(): null {
   return null;
 }