From 29b5c70b1c750ab1696f996d59b38eb4fe786b84 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Tue, 12 Nov 2024 20:50:37 -0500
Subject: [PATCH 1/2] Log passive commit phase when it wasn't delayed

We're support to not log "Waiting for Paint" if the passive effect phase
was forced since we weren't really waiting until the paint.

This check was in the wrong place.
---
 packages/react-reconciler/src/ReactFiberWorkLoop.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index bffedf498bc28..24b5173efe34e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -3550,7 +3550,9 @@ function flushPassiveEffectsImpl(wasDelayedCommit: void | boolean) {
   let passiveEffectStartTime = 0;
   if (enableProfilerTimer && enableComponentPerformanceTrack) {
     passiveEffectStartTime = now();
-    logPaintYieldPhase(commitEndTime, passiveEffectStartTime);
+    if (wasDelayedCommit) {
+      logPaintYieldPhase(commitEndTime, passiveEffectStartTime);
+    }
   }
 
   if (enableSchedulingProfiler) {
@@ -3587,9 +3589,7 @@ function flushPassiveEffectsImpl(wasDelayedCommit: void | boolean) {
 
   if (enableProfilerTimer && enableComponentPerformanceTrack) {
     const passiveEffectsEndTime = now();
-    if (wasDelayedCommit) {
-      logPassiveCommitPhase(passiveEffectStartTime, passiveEffectsEndTime);
-    }
+    logPassiveCommitPhase(passiveEffectStartTime, passiveEffectsEndTime);
     finalizeRender(lanes, passiveEffectsEndTime);
   }
 

From c98b3ea65da065f320a079160fd53d9b9bd6f3f9 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Tue, 12 Nov 2024 22:36:39 -0500
Subject: [PATCH 2/2] Always log the delay between commit and passive effects

Even if it's forced. This ensures the phases are connected.
We use an empty string for this phase.
---
 .../src/ReactFiberPerformanceTrack.js                 | 11 +++++++++--
 packages/react-reconciler/src/ReactFiberWorkLoop.js   |  8 +++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js
index b80635423ab5f..e1d75149b2425 100644
--- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js
+++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js
@@ -221,12 +221,19 @@ export function logCommitPhase(startTime: number, endTime: number): void {
   }
 }
 
-export function logPaintYieldPhase(startTime: number, endTime: number): void {
+export function logPaintYieldPhase(
+  startTime: number,
+  endTime: number,
+  delayedUntilPaint: boolean,
+): void {
   if (supportsUserTiming) {
     reusableLaneDevToolDetails.color = 'secondary-light';
     reusableLaneOptions.start = startTime;
     reusableLaneOptions.end = endTime;
-    performance.measure('Waiting for Paint', reusableLaneOptions);
+    performance.measure(
+      delayedUntilPaint ? 'Waiting for Paint' : '',
+      reusableLaneOptions,
+    );
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index 24b5173efe34e..6d2ec2d0c8e61 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -3550,9 +3550,11 @@ function flushPassiveEffectsImpl(wasDelayedCommit: void | boolean) {
   let passiveEffectStartTime = 0;
   if (enableProfilerTimer && enableComponentPerformanceTrack) {
     passiveEffectStartTime = now();
-    if (wasDelayedCommit) {
-      logPaintYieldPhase(commitEndTime, passiveEffectStartTime);
-    }
+    logPaintYieldPhase(
+      commitEndTime,
+      passiveEffectStartTime,
+      !!wasDelayedCommit,
+    );
   }
 
   if (enableSchedulingProfiler) {