[Transition Tracing] onMarkerProgress (#24861)

This PR adds support for `onMarkerProgress` (`onTransitionProgress(transitionName: string, markerName: string, startTime: number, currentTime: number, pending: Array<{name: null | string}>)`)

We call this callback when:
    * When **a child suspense boundary of the marker commits in a fallback state**. Only the suspense boundaries that are triggered and commit in a fallback state when the transition first occurs (and all subsequent suspense boundaries in the initial suspense boundary's subtree) are considered a part of the transition
    * **A child suspense boundary of the marker resolves**
   
When we call `onMarkerProgress`, we call the function with a `pending` array. This array contains the names of the transition's suspense boundaries that are still in a fallback state

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

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

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

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

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

@@ -145,6 +145,7 @@ import {
   addTransitionStartCallbackToPendingTransition,
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
+  addMarkerProgressCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.new';
@@ -1250,20 +1251,29 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
             !pendingBoundaries.has(offscreenInstance)
           ) {
             pendingBoundaries.set(offscreenInstance, {
               name,
             });
-            if (markerInstance.transitions !== null) {
-              markerInstance.transitions.forEach(transition => {
-                addTransitionProgressCallbackToPendingTransition(
-                  transition,
+            if (transitions !== null) {
+              if (markerInstance.name) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerInstance.name,
+                  transitions,
                   pendingBoundaries,
                 );
-              });
+              } else {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
             }
           }
         });
@@ -1275,18 +1285,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
             pendingBoundaries.has(offscreenInstance)
           ) {
             pendingBoundaries.delete(offscreenInstance);
-            if (markerInstance.transitions !== null) {
-              markerInstance.transitions.forEach(transition => {
-                addTransitionProgressCallbackToPendingTransition(
-                  transition,
+            if (transitions !== null) {
+              if (markerInstance.name) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerInstance.name,
+                  transitions,
                   pendingBoundaries,
                 );
-              });
+              } else {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
             }
           }
         });
@@ -3083,19 +3102,18 @@ function commitPassiveMountOnFiber(
         // and add a start transition callback for each of them
         const instance = finishedWork.stateNode;
         if (
-          instance.pendingSuspenseBoundaries === null ||
-          instance.pendingSuspenseBoundaries.size === 0
+          instance.transitions !== null &&
+          (instance.pendingSuspenseBoundaries === null ||
+            instance.pendingSuspenseBoundaries.size === 0)
         ) {
-          if (instance.transitions !== null) {
-            instance.transitions.forEach(transition => {
-              addMarkerCompleteCallbackToPendingTransition({
-                transition,
-                name: finishedWork.memoizedProps.name,
-              });
+          instance.transitions.forEach(transition => {
+            addMarkerCompleteCallbackToPendingTransition({
+              transition,
+              name: finishedWork.memoizedProps.name,
             });
-            instance.transitions = null;
-            instance.pendingSuspenseBoundaries = null;
-          }
+          });
+          instance.transitions = null;
+          instance.pendingSuspenseBoundaries = null;
         }
       }
       break;

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

@@ -145,6 +145,7 @@ import {
   addTransitionStartCallbackToPendingTransition,
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
+  addMarkerProgressCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.old';
@@ -1250,20 +1251,29 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
             !pendingBoundaries.has(offscreenInstance)
           ) {
             pendingBoundaries.set(offscreenInstance, {
               name,
             });
-            if (markerInstance.transitions !== null) {
-              markerInstance.transitions.forEach(transition => {
-                addTransitionProgressCallbackToPendingTransition(
-                  transition,
+            if (transitions !== null) {
+              if (markerInstance.name) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerInstance.name,
+                  transitions,
                   pendingBoundaries,
                 );
-              });
+              } else {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
             }
           }
         });
@@ -1275,18 +1285,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
             pendingBoundaries.has(offscreenInstance)
           ) {
             pendingBoundaries.delete(offscreenInstance);
-            if (markerInstance.transitions !== null) {
-              markerInstance.transitions.forEach(transition => {
-                addTransitionProgressCallbackToPendingTransition(
-                  transition,
+            if (transitions !== null) {
+              if (markerInstance.name) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerInstance.name,
+                  transitions,
                   pendingBoundaries,
                 );
-              });
+              } else {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
             }
           }
         });
@@ -3083,19 +3102,18 @@ function commitPassiveMountOnFiber(
         // and add a start transition callback for each of them
         const instance = finishedWork.stateNode;
         if (
-          instance.pendingSuspenseBoundaries === null ||
-          instance.pendingSuspenseBoundaries.size === 0
+          instance.transitions !== null &&
+          (instance.pendingSuspenseBoundaries === null ||
+            instance.pendingSuspenseBoundaries.size === 0)
         ) {
-          if (instance.transitions !== null) {
-            instance.transitions.forEach(transition => {
-              addMarkerCompleteCallbackToPendingTransition({
-                transition,
-                name: finishedWork.memoizedProps.name,
-              });
+          instance.transitions.forEach(transition => {
+            addMarkerCompleteCallbackToPendingTransition({
+              transition,
+              name: finishedWork.memoizedProps.name,
             });
-            instance.transitions = null;
-            instance.pendingSuspenseBoundaries = null;
-          }
+          });
+          instance.transitions = null;
+          instance.pendingSuspenseBoundaries = null;
         }
       }
       break;

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

@@ -26,6 +26,7 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
   transitionComplete: Array<Transition> | null,
+  markerProgress: Map<string, TracingMarkerInstance> | null,
   markerComplete: Array<MarkerTransition> | null,
 };
 
@@ -43,6 +44,7 @@ export type BatchConfigTransition = {
 export type TracingMarkerInstance = {|
   pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
   transitions: Set<Transition> | null,
+  name?: string,
 |};
 
 export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
@@ -63,6 +65,28 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerProgress = pendingTransitions.markerProgress;
+      const onMarkerProgress = callbacks.onMarkerProgress;
+      if (onMarkerProgress != null && markerProgress !== null) {
+        markerProgress.forEach((markerInstance, markerName) => {
+          if (markerInstance.transitions !== null) {
+            const pending =
+              markerInstance.pendingSuspenseBoundaries !== null
+                ? Array.from(markerInstance.pendingSuspenseBoundaries.values())
+                : [];
+            markerInstance.transitions.forEach(transition => {
+              onMarkerProgress(
+                transition.name,
+                markerName,
+                transition.startTime,
+                endTime,
+                pending,
+              );
+            });
+          }
+        });
+      }
+
       const markerComplete = pendingTransitions.markerComplete;
       if (markerComplete !== null) {
         markerComplete.forEach(marker => {

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

@@ -26,6 +26,7 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
   transitionComplete: Array<Transition> | null,
+  markerProgress: Map<string, TracingMarkerInstance> | null,
   markerComplete: Array<MarkerTransition> | null,
 };
 
@@ -43,6 +44,7 @@ export type BatchConfigTransition = {
 export type TracingMarkerInstance = {|
   pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
   transitions: Set<Transition> | null,
+  name?: string,
 |};
 
 export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
@@ -63,6 +65,28 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerProgress = pendingTransitions.markerProgress;
+      const onMarkerProgress = callbacks.onMarkerProgress;
+      if (onMarkerProgress != null && markerProgress !== null) {
+        markerProgress.forEach((markerInstance, markerName) => {
+          if (markerInstance.transitions !== null) {
+            const pending =
+              markerInstance.pendingSuspenseBoundaries !== null
+                ? Array.from(markerInstance.pendingSuspenseBoundaries.values())
+                : [];
+            markerInstance.transitions.forEach(transition => {
+              onMarkerProgress(
+                transition.name,
+                markerName,
+                transition.startTime,
+                endTime,
+                pending,
+              );
+            });
+          }
+        });
+      }
+
       const markerComplete = pendingTransitions.markerComplete;
       if (markerComplete !== null) {
         markerComplete.forEach(marker => {

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

@@ -342,6 +342,7 @@ export function addTransitionStartCallbackToPendingTransition(
         transitionStart: [],
         transitionProgress: null,
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: null,
       };
     }
@@ -354,6 +355,33 @@ export function addTransitionStartCallbackToPendingTransition(
   }
 }
 
+export function addMarkerProgressCallbackToPendingTransition(
+  markerName: string,
+  transitions: Set<Transition>,
+  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: new Map(),
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerProgress === null) {
+      currentPendingTransitionCallbacks.markerProgress = new Map();
+    }
+
+    currentPendingTransitionCallbacks.markerProgress.set(markerName, {
+      pendingSuspenseBoundaries,
+      transitions,
+    });
+  }
+}
+
 export function addMarkerCompleteCallbackToPendingTransition(
   transition: MarkerTransition,
 ) {
@@ -363,6 +391,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: null,
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: [],
       };
     }
@@ -385,6 +414,7 @@ export function addTransitionProgressCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: new Map(),
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: null,
       };
     }
@@ -409,6 +439,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: null,
         transitionComplete: [],
+        markerProgress: null,
         markerComplete: null,
       };
     }