Don't flush synchronous work if we're in the middle of a ViewTransition async sequence

Author: sebmarkbage

fixtures/view-transition/src/components/Page.js

@@ -2,6 +2,7 @@ import React, {
   unstable_ViewTransition as ViewTransition,
   unstable_Activity as Activity,
   unstable_useSwipeTransition as useSwipeTransition,
+  useLayoutEffect,
   useEffect,
   useState,
   useId,
@@ -68,6 +69,16 @@ export default function Page({url, navigate}) {
     return () => clearInterval(timer);
   }, []);
 
+  useLayoutEffect(() => {
+    // Calling a default update should not interrupt ViewTransitions but
+    // a flushSync will.
+    // Promise.resolve().then(() => {
+    //   flushSync(() => {
+    setCounter(c => c + 10);
+    //  });
+    // });
+  }, [show]);
+
   const exclamation = (
     <ViewTransition name="exclamation" onShare={onTransition}>
       <span>!</span>

packages/react-reconciler/src/ReactFiberRootScheduler.js

@@ -48,6 +48,7 @@ import {
   hasPendingCommitEffects,
   isWorkLoopSuspendedOnData,
   performWorkOnRoot,
+  isPreparingViewTransition,
 } from './ReactFiberWorkLoop';
 import {LegacyRoot} from './ReactRootTags';
 import {
@@ -310,7 +311,12 @@ function processRootScheduleInMicrotask() {
 
   // At the end of the microtask, flush any pending synchronous work. This has
   // to come at the end, because it does actual rendering work that might throw.
-  flushSyncWorkAcrossRoots_impl(syncTransitionLanes, false);
+  // If we're in the middle of a View Transition async sequence, we don't want to
+  // interrupt that sequence. Instead, we'll flush any remaining work when it
+  // completes.
+  if (!isPreparingViewTransition()) {
+    flushSyncWorkAcrossRoots_impl(syncTransitionLanes, false);
+  }
 }
 
 function scheduleTaskForRootDuringMicrotask(

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -677,6 +677,10 @@ let pendingTransitionTypes: null | TransitionTypes = null;
 let pendingDidIncludeRenderPhaseUpdate: boolean = false;
 let pendingSuspendedCommitReason: SuspendedCommitReason = IMMEDIATE_COMMIT; // Profiling-only
 
+export function isPreparingViewTransition(): boolean {
+  return enableViewTransition && pendingViewTransition !== null;
+}
+
 // Use these to prevent an infinite loop of nested updates
 const NESTED_UPDATE_LIMIT = 50;
 let nestedUpdateCount: number = 0;