Mark ping time as update (#31611)

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">

Author: sebmarkbage

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 (

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;