Log the gap before the passive effects as animating

Author: sebmarkbage

packages/react-reconciler/src/ReactFiberPerformanceTrack.js

@@ -1435,6 +1435,41 @@ export function logStartViewTransitionYieldPhase(
   }
 }
 
+export function logAnimatingPhase(
+  startTime: number,
+  endTime: number,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          'Animating',
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'secondary',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        'Animating',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        'secondary',
+      );
+    }
+  }
+}
+
 export function logPassiveCommitPhase(
   startTime: number,
   endTime: number,

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -84,6 +84,7 @@ import {
   logCommitPhase,
   logPaintYieldPhase,
   logStartViewTransitionYieldPhase,
+  logAnimatingPhase,
   logPassiveCommitPhase,
   logYieldTime,
   logActionYieldTime,
@@ -3787,7 +3788,7 @@ function flushSpawnedWork(): void {
         pendingDelayedCommitReason === ABORTED_VIEW_TRANSITION_COMMIT,
         workInProgressUpdateTask, // TODO: Use a ViewTransition Task.
       );
-      if (pendingDelayedCommitReason === IMMEDIATE_COMMIT) {
+      if (pendingDelayedCommitReason !== ABORTED_VIEW_TRANSITION_COMMIT) {
         pendingDelayedCommitReason = ANIMATION_STARTED_COMMIT;
       }
     }
@@ -4283,12 +4284,21 @@ function flushPassiveEffectsImpl() {
   if (enableProfilerTimer && enableComponentPerformanceTrack) {
     resetCommitErrors();
     passiveEffectStartTime = now();
-    logPaintYieldPhase(
-      commitEndTime,
-      passiveEffectStartTime,
-      pendingDelayedCommitReason === DELAYED_PASSIVE_COMMIT,
-      workInProgressUpdateTask,
-    );
+    if (pendingDelayedCommitReason === ANIMATION_STARTED_COMMIT) {
+      // The animation was started, so we've been animating since that happened.
+      logAnimatingPhase(
+        commitEndTime,
+        passiveEffectStartTime,
+        workInProgressUpdateTask, // TODO: Use a ViewTransition Task
+      );
+    } else {
+      logPaintYieldPhase(
+        commitEndTime,
+        passiveEffectStartTime,
+        pendingDelayedCommitReason === DELAYED_PASSIVE_COMMIT,
+        workInProgressUpdateTask,
+      );
+    }
   }
 
   if (enableSchedulingProfiler) {