add transition progress callback

packages/react-reconciler/src/ReactFiber.new.js

@@ -771,6 +771,7 @@ export function createFiberFromTracingMarker(
   const tracingMarkerInstance: TracingMarkerInstance = {
     transitions: null,
     pendingSuspenseBoundaries: null,
+    hasUpdate: false,
   };
   fiber.stateNode = tracingMarkerInstance;
   return fiber;

packages/react-reconciler/src/ReactFiberBeginWork.new.js

@@ -978,6 +978,7 @@ function updateTracingMarkerComponent(
       const markerInstance: TracingMarkerInstance = {
         transitions: new Set(currentTransitions),
         pendingSuspenseBoundaries: new Map(),
+        hasUpdate: false,
       };
       workInProgress.stateNode = markerInstance;
     }

packages/react-reconciler/src/ReactFiberCommitWork.new.js

@@ -138,6 +138,7 @@ import {
   enqueuePendingPassiveProfilerEffect,
   restorePendingUpdaters,
   addTransitionStartCallbackToPendingTransition,
+  addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
@@ -1110,20 +1111,32 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // The suspense boundaries was just hidden. Add the boundary
       // to the pending boundary set if it's there
       if (pendingMarkers !== null) {
-        pendingMarkers.forEach(pendingBoundaries => {
-          pendingBoundaries.set(offscreenInstance, {
-            name,
-          });
+        pendingMarkers.forEach(markerInstance => {
+          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          if (
+            pendingBoundaries !== null &&
+            !pendingBoundaries.has(offscreenInstance)
+          ) {
+            pendingBoundaries.set(offscreenInstance, {
+              name,
+            });
+            markerInstance.hasUpdate = true;
+          }
         });
       }
     } else if (wasHidden && !isHidden) {
       // The suspense boundary went from hidden to visible. Remove
       // the boundary from the pending suspense boundaries set
       // if it's there
       if (pendingMarkers !== null) {
-        pendingMarkers.forEach(pendingBoundaries => {
-          if (pendingBoundaries.has(offscreenInstance)) {
+        pendingMarkers.forEach(markerInstance => {
+          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          if (
+            pendingBoundaries !== null &&
+            pendingBoundaries.has(offscreenInstance)
+          ) {
             pendingBoundaries.delete(offscreenInstance);
+            markerInstance.hasUpdate = true;
           }
         });
       }
@@ -2867,17 +2880,20 @@ function commitPassiveMountOnFiber(
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
 
-        incompleteTransitions.forEach(
-          ({pendingSuspenseBoundaries}, transition) => {
-            if (
-              pendingSuspenseBoundaries === null ||
-              pendingSuspenseBoundaries.size === 0
-            ) {
-              addTransitionCompleteCallbackToPendingTransition(transition);
-              incompleteTransitions.delete(transition);
-            }
-          },
-        );
+        incompleteTransitions.forEach((markerInstance, transition) => {
+          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          if (markerInstance.hasUpdate) {
+            addTransitionProgressCallbackToPendingTransition({
+              transition,
+              pending: pendingBoundaries || [],
+            });
+            markerInstance.hasUpdate = false;
+          }
+          if (pendingBoundaries === null || pendingBoundaries.size === 0) {
+            addTransitionCompleteCallbackToPendingTransition(transition);
+            incompleteTransitions.delete(transition);
+          }
+        });
 
         clearTransitionsForLanes(finishedRoot, committedLanes);
       }
@@ -2954,9 +2970,7 @@ function commitPassiveMountOnFiber(
                         instance.pendingMarkers = new Set();
                       }
 
-                      instance.pendingMarkers.add(
-                        markerInstance.pendingSuspenseBoundaries,
-                      );
+                      instance.pendingMarkers.add(markerInstance);
                     }
                   });
                 }

packages/react-reconciler/src/ReactFiberOffscreenComponent.js

@@ -12,7 +12,6 @@ import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
 import type {
   Transition,
-  PendingSuspenseBoundaries,
   TracingMarkerInstance,
 } from './ReactFiberTracingMarkerComponent.new';
 
@@ -45,7 +44,7 @@ export type OffscreenQueue = {|
 
 export type OffscreenInstance = {|
   isHidden: boolean,
-  pendingMarkers: Set<PendingSuspenseBoundaries> | null,
+  pendingMarkers: Set<TracingMarkerInstance> | null,
   transitions: Set<Transition> | null,
   retryCache: WeakSet<Wakeable> | Set<Wakeable> | null,
 |};

packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js

@@ -22,8 +22,14 @@ export type MarkerTransition = {
   name: string,
 };
 
+export type TransitionProgress = {
+  transition: Transition,
+  pending: PendingSuspenseBoundaries,
+};
+
 export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
+  transitionProgress: Array<TransitionProgress> | null,
   transitionComplete: Array<Transition> | null,
   markerComplete: Array<MarkerTransition> | null,
 };
@@ -42,6 +48,7 @@ export type BatchConfigTransition = {
 export type TracingMarkerInstance = {|
   pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
   transitions: Set<Transition> | null,
+  hasUpdate: boolean,
 |};
 
 export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
@@ -76,6 +83,19 @@ export function processTransitionCallbacks(
         });
       }
 
+      const transitionProgress = pendingTransitions.transitionProgress;
+      const onTransitionProgress = callbacks.onTransitionProgress;
+      if (onTransitionProgress != null && transitionProgress !== null) {
+        transitionProgress.forEach(({transition, pending}) => {
+          onTransitionProgress(
+            transition.name,
+            transition.startTime,
+            endTime,
+            Array.from(pending.values()),
+          );
+        });
+      }
+
       const transitionComplete = pendingTransitions.transitionComplete;
       if (transitionComplete !== null) {
         transitionComplete.forEach(transition => {
@@ -117,10 +137,12 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
     if (transitions !== null) {
       transitions.forEach(transition => {
         if (!root.incompleteTransitions.has(transition)) {
-          root.incompleteTransitions.set(transition, {
+          const markerInstance: TracingMarkerInstance = {
             transitions: new Set([transition]),
             pendingSuspenseBoundaries: null,
-          });
+            hasUpdate: true,
+          };
+          root.incompleteTransitions.set(transition, markerInstance);
         }
       });
     }

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

@@ -17,6 +17,7 @@ import type {EventPriority} from './ReactEventPriorities.new';
 import type {
   PendingTransitionCallbacks,
   MarkerTransition,
+  TransitionProgress,
   Transition,
 } from './ReactFiberTracingMarkerComponent.new';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
@@ -339,6 +340,7 @@ export function addTransitionStartCallbackToPendingTransition(
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: [],
+        transitionProgress: null,
         transitionComplete: null,
         markerComplete: null,
       };
@@ -359,6 +361,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: null,
+        transitionProgress: null,
         transitionComplete: null,
         markerComplete: [],
       };
@@ -372,13 +375,35 @@ export function addMarkerCompleteCallbackToPendingTransition(
   }
 }
 
+export function addTransitionProgressCallbackToPendingTransition(
+  transition: TransitionProgress,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: [],
+        transitionComplete: null,
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.transitionProgress === null) {
+      currentPendingTransitionCallbacks.transitionProgress = [];
+    }
+
+    currentPendingTransitionCallbacks.transitionProgress.push(transition);
+  }
+}
+
 export function addTransitionCompleteCallbackToPendingTransition(
   transition: Transition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: null,
+        transitionProgress: null,
         transitionComplete: [],
         markerComplete: null,
       };