Log "Starting Animation" and "Animating" for Gesture Track

Author: sebmarkbage

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

@@ -2320,6 +2320,9 @@ export function startViewTransition(
     mutationCallback();
     layoutCallback();
     // Skip afterMutationCallback(). We don't need it since we're not animating.
+    if (enableProfilerTimer) {
+      finishedAnimation();
+    }
     spawnedWorkCallback();
     // Skip passiveCallback(). Spawned work will schedule a task.
     return null;
@@ -2509,6 +2512,7 @@ export function startGestureTransition(
   mutationCallback: () => void,
   animateCallback: () => void,
   errorCallback: mixed => void,
+  finishedAnimation: () => void, // Profiling-only
 ): null | RunningViewTransition {
   const ownerDocument: Document =
     rootContainer.nodeType === DOCUMENT_NODE
@@ -2723,6 +2727,12 @@ export function startGestureTransition(
         // $FlowFixMe[prop-missing]
         ownerDocument.__reactViewTransition = null;
       }
+      if (enableProfilerTimer) {
+        // Signal that the Transition was unable to continue. We do that here
+        // instead of when we stop the running View Transition to ensure that
+        // we cover cases when something else stops it early.
+        finishedAnimation();
+      }
     });
     return transition;
   } catch (x) {
@@ -2735,6 +2745,9 @@ export function startGestureTransition(
     // Run through the sequence to put state back into a consistent state.
     mutationCallback();
     animateCallback();
+    if (enableProfilerTimer) {
+      finishedAnimation();
+    }
     return null;
   }
 }

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

@@ -35,6 +35,8 @@ import {
 } from 'react-reconciler/src/ReactEventPriorities';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
+import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
+
 import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import type {ReactContext} from 'shared/ReactTypes';
 
@@ -680,6 +682,9 @@ export function startViewTransition(
   layoutCallback();
   // Skip afterMutationCallback(). We don't need it since we're not animating.
   spawnedWorkCallback();
+  if (enableProfilerTimer) {
+    finishedAnimation();
+  }
   // Skip passiveCallback(). Spawned work will schedule a task.
   return null;
 }
@@ -696,9 +701,13 @@ export function startGestureTransition(
   mutationCallback: () => void,
   animateCallback: () => void,
   errorCallback: mixed => void,
+  finishedAnimation: () => void, // Profiling-only
 ): null | RunningViewTransition {
   mutationCallback();
   animateCallback();
+  if (enableProfilerTimer) {
+    finishedAnimation();
+  }
   return null;
 }
 

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -4268,6 +4268,9 @@ function commitGestureOnRoot(
   pendingTransitionTypes = finishedGesture.types;
   pendingEffectsStatus = PENDING_GESTURE_MUTATION_PHASE;
 
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    startAnimating(pendingEffectsLanes);
+  }
   pendingViewTransition = finishedGesture.running = startGestureTransition(
     suspendedState,
     root.containerInfo,
@@ -4278,6 +4281,10 @@ function commitGestureOnRoot(
     flushGestureMutations,
     flushGestureAnimations,
     reportViewTransitionError,
+    enableProfilerTimer
+      ? // This callback fires after "pendingEffects" so we need to snapshot the arguments.
+        finishedViewTransition.bind(null, pendingEffectsLanes)
+      : (null: any),
   );
 }
 
@@ -4320,6 +4327,23 @@ function flushGestureAnimations(): void {
   if (pendingEffectsStatus !== PENDING_GESTURE_ANIMATION_PHASE) {
     return;
   }
+
+  const lanes = pendingEffectsLanes;
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    // Update the new commitEndTime to when we started the animation.
+    recordCommitEndTime();
+    logStartViewTransitionYieldPhase(
+      pendingEffectsRenderEndTime,
+      commitEndTime,
+      pendingDelayedCommitReason === ABORTED_VIEW_TRANSITION_COMMIT,
+      animatingTask,
+    );
+    if (pendingDelayedCommitReason !== ABORTED_VIEW_TRANSITION_COMMIT) {
+      pendingDelayedCommitReason = ANIMATION_STARTED_COMMIT;
+    }
+  }
+
   pendingEffectsStatus = NO_PENDING_EFFECTS;
   const root = pendingEffectsRoot;
   const finishedWork = pendingFinishedWork;
@@ -4344,6 +4368,10 @@ function flushGestureAnimations(): void {
     ReactSharedInternals.T = prevTransition;
   }
 
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    finalizeRender(lanes, commitEndTime);
+  }
+
   // Now that we've rendered this lane. Start working on the next lane.
   ensureRootIsScheduled(root);
 }

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

@@ -17,6 +17,7 @@ import {
   NoEventPriority,
   type EventPriority,
 } from 'react-reconciler/src/ReactEventPriorities';
+import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
 
 export {default as rendererVersion} from 'shared/ReactVersion'; // TODO: Consider exporting the react-native version.
 export const rendererPackageName = 'react-test-renderer';
@@ -446,9 +447,13 @@ export function startGestureTransition(
   mutationCallback: () => void,
   animateCallback: () => void,
   errorCallback: mixed => void,
+  finishedAnimation: () => void, // Profiling-only
 ): null | RunningViewTransition {
   mutationCallback();
   animateCallback();
+  if (enableProfilerTimer) {
+    finishedAnimation();
+  }
   return null;
 }