Mark ping time as update (#31611)

sebmarkbage · web-flow · commit 91061073d577 · 2024-11-21T19:36:38.000-05:00
This ensures that we mark the time from ping until we render as "Blocked". We intentionally don't want to show the event time even if it's something like "load" because it draws attention away from interactions etc. <img width="577" alt="Screenshot 2024-11-21 at 7 22 39 PM" src="https://github.com/user-attachments/assets/70cca2e8-bd5e-489f-98f0-b4dfee5940af">
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -269,6 +269,7 @@ import {
   startYieldTimer,
   yieldStartTime,
   yieldReason,
+  startPingTimerByLanes,
 } from './ReactProfilerTimer';
 import {setCurrentTrackFromLanes} from './ReactFiberPerformanceTrack';
 
@@ -3961,6 +3962,10 @@ function pingSuspendedRoot(
 
   markRootPinged(root, pingedLanes);
 
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    startPingTimerByLanes(pingedLanes);
+  }
+
   warnIfSuspenseResolutionNotWrappedWithActDEV(root);
 
   if (
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.js b/packages/react-reconciler/src/ReactProfilerTimer.js
@@ -108,6 +108,24 @@ export function startUpdateTimerByLane(lane: Lane): void {
   }
 }
 
+export function startPingTimerByLanes(lanes: Lanes): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  // Mark the update time and clamp anything before it because we don't want
+  // to show the event time for pings but we also don't want to clear it
+  // because we still need to track if this was a repeat.
+  if (includesSyncLane(lanes) || includesBlockingLane(lanes)) {
+    if (blockingUpdateTime < 0) {
+      blockingClampTime = blockingUpdateTime = now();
+    }
+  } else if (includesTransitionLane(lanes)) {
+    if (transitionUpdateTime < 0) {
+      transitionClampTime = transitionUpdateTime = now();
+    }
+  }
+}
+
 export function trackSuspendedTime(lanes: Lanes, renderEndTime: number) {
   if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
     return;
