Skip to content

Commit 600760f

Browse files
committed
Log the time from the previous commit to the next render start as animating
If we start a new render on the same track before the previous one finishes we'll start logging new renders on that track but we should first log the time between the two renders as animating.
1 parent 06588e2 commit 600760f

File tree

1 file changed

+52
-15
lines changed

1 file changed

+52
-15
lines changed

packages/react-reconciler/src/ReactFiberWorkLoop.js

Lines changed: 52 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1957,6 +1957,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
19571957
}
19581958
finalizeRender(workInProgressRootRenderLanes, renderStartTime);
19591959
}
1960+
const previousUpdateTask = workInProgressUpdateTask;
19601961

19611962
workInProgressUpdateTask = null;
19621963
if (includesSyncLane(lanes) || includesBlockingLane(lanes)) {
@@ -1969,18 +1970,30 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
19691970
blockingEventTime >= 0 && blockingEventTime < blockingClampTime
19701971
? blockingClampTime
19711972
: blockingEventTime;
1973+
const clampedRenderStartTime = // Clamp the suspended time to the first event/update.
1974+
clampedEventTime >= 0
1975+
? clampedEventTime
1976+
: clampedUpdateTime >= 0
1977+
? clampedUpdateTime
1978+
: renderStartTime;
19721979
if (blockingSuspendedTime >= 0) {
1973-
setCurrentTrackFromLanes(lanes);
1980+
setCurrentTrackFromLanes(SyncLane);
19741981
logSuspendedWithDelayPhase(
19751982
blockingSuspendedTime,
1976-
// Clamp the suspended time to the first event/update.
1977-
clampedEventTime >= 0
1978-
? clampedEventTime
1979-
: clampedUpdateTime >= 0
1980-
? clampedUpdateTime
1981-
: renderStartTime,
1983+
clampedRenderStartTime,
19821984
lanes,
1983-
workInProgressUpdateTask,
1985+
previousUpdateTask,
1986+
);
1987+
} else if (
1988+
includesSyncLane(animatingLanes) ||
1989+
includesBlockingLane(animatingLanes)
1990+
) {
1991+
// If this lane is still animating, log the time from previous render finishing to now as animating.
1992+
setCurrentTrackFromLanes(SyncLane);
1993+
logAnimatingPhase(
1994+
blockingClampTime,
1995+
clampedRenderStartTime,
1996+
previousUpdateTask,
19841997
);
19851998
}
19861999
logBlockingStart(
@@ -2012,19 +2025,29 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
20122025
transitionEventTime >= 0 && transitionEventTime < transitionClampTime
20132026
? transitionClampTime
20142027
: transitionEventTime;
2028+
const clampedRenderStartTime =
2029+
// Clamp the suspended time to the first event/update.
2030+
clampedEventTime >= 0
2031+
? clampedEventTime
2032+
: clampedUpdateTime >= 0
2033+
? clampedUpdateTime
2034+
: renderStartTime;
20152035
if (transitionSuspendedTime >= 0) {
2016-
setCurrentTrackFromLanes(lanes);
2036+
setCurrentTrackFromLanes(SomeTransitionLane);
20172037
logSuspendedWithDelayPhase(
20182038
transitionSuspendedTime,
2019-
// Clamp the suspended time to the first event/update.
2020-
clampedEventTime >= 0
2021-
? clampedEventTime
2022-
: clampedUpdateTime >= 0
2023-
? clampedUpdateTime
2024-
: renderStartTime,
2039+
clampedRenderStartTime,
20252040
lanes,
20262041
workInProgressUpdateTask,
20272042
);
2043+
} else if (includesTransitionLane(animatingLanes)) {
2044+
// If this lane is still animating, log the time from previous render finishing to now as animating.
2045+
setCurrentTrackFromLanes(SomeTransitionLane);
2046+
logAnimatingPhase(
2047+
transitionClampTime,
2048+
clampedRenderStartTime,
2049+
previousUpdateTask,
2050+
);
20282051
}
20292052
logTransitionStart(
20302053
clampedStartTime,
@@ -2040,6 +2063,20 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
20402063
);
20412064
clearTransitionTimers();
20422065
}
2066+
if (includesRetryLane(lanes)) {
2067+
if (includesRetryLane(animatingLanes)) {
2068+
// If this lane is still animating, log the time from previous render finishing to now as animating.
2069+
setCurrentTrackFromLanes(SomeRetryLane);
2070+
logAnimatingPhase(retryClampTime, renderStartTime, previousUpdateTask);
2071+
}
2072+
}
2073+
if (includesIdleGroupLanes(lanes)) {
2074+
if (includesIdleGroupLanes(animatingLanes)) {
2075+
// If this lane is still animating, log the time from previous render finishing to now as animating.
2076+
setCurrentTrackFromLanes(IdleLane);
2077+
logAnimatingPhase(idleClampTime, renderStartTime, previousUpdateTask);
2078+
}
2079+
}
20432080
}
20442081

20452082
const timeoutHandle = root.timeoutHandle;

0 commit comments

Comments
 (0)