Skip to content

Commit 9f8abe3

Browse files
sebmarkbagesebmarkbage
committed
Log Suspended startViewTransition Phase (#34511)
Stacked on #34510. The "Commit" phase for a View Transition starts before the snapshot phase (before mutation) and then stretches into the async gap of `startViewTransition`, encompasses the mutation phase inside of its update callback and finally the layout phase. However, between the mutation phase and the layout phase we may suspend the start of the view transition on fonts and/or images. In that case we now split the Commit phase into first one before we suspend and then we log "Waiting for Images and/or Fonts" and then another Commit phase around the layout effects. <img width="897" height="119" alt="Screenshot 2025-09-16 at 11 37 26 PM" src="https://github.com/user-attachments/assets/0fe21388-bb48-4456-a594-62227d12d9b7" /> DiffTrain build for [ad578aa](ad578aa)
1 parent cf5bcb5 commit 9f8abe3

34 files changed

+1658
-1076
lines changed

‎compiled/facebook-www/REVISION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
581321160fe0d9d9ef461174c7e14cbbed341d28
1+
ad578aa01fcd08488b8378c7538d802e7a1e8b26

‎compiled/facebook-www/REVISION_TRANSFORMS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
581321160fe0d9d9ef461174c7e14cbbed341d28
1+
ad578aa01fcd08488b8378c7538d802e7a1e8b26

‎compiled/facebook-www/React-dev.classic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1419,7 +1419,7 @@ __DEV__ &&
14191419
exports.useTransition = function () {
14201420
return resolveDispatcher().useTransition();
14211421
};
1422-
exports.version = "19.2.0-www-classic-58132116-20250918";
1422+
exports.version = "19.2.0-www-classic-ad578aa0-20250918";
14231423
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
14241424
"function" ===
14251425
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-dev.modern.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1419,7 +1419,7 @@ __DEV__ &&
14191419
exports.useTransition = function () {
14201420
return resolveDispatcher().useTransition();
14211421
};
1422-
exports.version = "19.2.0-www-modern-58132116-20250918";
1422+
exports.version = "19.2.0-www-modern-ad578aa0-20250918";
14231423
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
14241424
"function" ===
14251425
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-prod.classic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -602,4 +602,4 @@ exports.useSyncExternalStore = function (
602602
exports.useTransition = function () {
603603
return ReactSharedInternals.H.useTransition();
604604
};
605-
exports.version = "19.2.0-www-classic-58132116-20250918";
605+
exports.version = "19.2.0-www-classic-ad578aa0-20250918";

‎compiled/facebook-www/React-prod.modern.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -602,4 +602,4 @@ exports.useSyncExternalStore = function (
602602
exports.useTransition = function () {
603603
return ReactSharedInternals.H.useTransition();
604604
};
605-
exports.version = "19.2.0-www-modern-58132116-20250918";
605+
exports.version = "19.2.0-www-modern-ad578aa0-20250918";

‎compiled/facebook-www/React-profiling.classic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -606,7 +606,7 @@ exports.useSyncExternalStore = function (
606606
exports.useTransition = function () {
607607
return ReactSharedInternals.H.useTransition();
608608
};
609-
exports.version = "19.2.0-www-classic-58132116-20250918";
609+
exports.version = "19.2.0-www-classic-ad578aa0-20250918";
610610
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
611611
"function" ===
612612
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-profiling.modern.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -606,7 +606,7 @@ exports.useSyncExternalStore = function (
606606
exports.useTransition = function () {
607607
return ReactSharedInternals.H.useTransition();
608608
};
609-
exports.version = "19.2.0-www-modern-58132116-20250918";
609+
exports.version = "19.2.0-www-modern-ad578aa0-20250918";
610610
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
611611
"function" ===
612612
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/ReactART-dev.classic.js‎

Lines changed: 72 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -16113,6 +16113,7 @@ __DEV__ &&
1611316113
pendingEffectsRenderEndTime = completedRenderEndTime;
1611416114
pendingSuspendedCommitReason = suspendedCommitReason;
1611516115
pendingDelayedCommitReason = IMMEDIATE_COMMIT;
16116+
pendingSuspendedViewTransitionReason = null;
1611616117
enableViewTransition
1611716118
? ((pendingViewTransitionEvents = null),
1611816119
(lanes & 335544064) === lanes
@@ -16211,18 +16212,52 @@ __DEV__ &&
1621116212
function flushLayoutEffects() {
1621216213
if (pendingEffectsStatus === PENDING_LAYOUT_PHASE) {
1621316214
pendingEffectsStatus = NO_PENDING_EFFECTS;
16214-
var root = pendingEffectsRoot,
16215-
finishedWork = pendingFinishedWork,
16216-
lanes = pendingEffectsLanes,
16217-
cleanUpIndicator = root.pendingIndicator;
16218-
if (null !== cleanUpIndicator && 0 === root.indicatorLanes) {
16215+
if (enableComponentPerformanceTrack) {
16216+
var suspendedViewTransitionReason =
16217+
pendingSuspendedViewTransitionReason;
16218+
if (null !== suspendedViewTransitionReason) {
16219+
commitStartTime = now();
16220+
var startTime = commitEndTime,
16221+
endTime = commitStartTime;
16222+
!supportsUserTiming ||
16223+
endTime <= startTime ||
16224+
(workInProgressUpdateTask
16225+
? workInProgressUpdateTask.run(
16226+
console.timeStamp.bind(
16227+
console,
16228+
suspendedViewTransitionReason,
16229+
startTime,
16230+
endTime,
16231+
currentTrack,
16232+
"Scheduler \u269b",
16233+
"secondary-light"
16234+
)
16235+
)
16236+
: console.timeStamp(
16237+
suspendedViewTransitionReason,
16238+
startTime,
16239+
endTime,
16240+
currentTrack,
16241+
"Scheduler \u269b",
16242+
"secondary-light"
16243+
));
16244+
}
16245+
}
16246+
suspendedViewTransitionReason = pendingEffectsRoot;
16247+
startTime = pendingFinishedWork;
16248+
endTime = pendingEffectsLanes;
16249+
var cleanUpIndicator = suspendedViewTransitionReason.pendingIndicator;
16250+
if (
16251+
null !== cleanUpIndicator &&
16252+
0 === suspendedViewTransitionReason.indicatorLanes
16253+
) {
1621916254
var prevTransition = ReactSharedInternals.T;
1622016255
ReactSharedInternals.T = null;
1622116256
var previousPriority = currentUpdatePriority;
1622216257
currentUpdatePriority = DiscreteEventPriority;
1622316258
var prevExecutionContext = executionContext;
1622416259
executionContext |= CommitContext;
16225-
root.pendingIndicator = null;
16260+
suspendedViewTransitionReason.pendingIndicator = null;
1622616261
try {
1622716262
cleanUpIndicator();
1622816263
} catch (x) {
@@ -16233,8 +16268,8 @@ __DEV__ &&
1623316268
(ReactSharedInternals.T = prevTransition);
1623416269
}
1623516270
}
16236-
cleanUpIndicator = 0 !== (finishedWork.flags & 8772);
16237-
if (0 !== (finishedWork.subtreeFlags & 8772) || cleanUpIndicator) {
16271+
cleanUpIndicator = 0 !== (startTime.flags & 8772);
16272+
if (0 !== (startTime.subtreeFlags & 8772) || cleanUpIndicator) {
1623816273
cleanUpIndicator = ReactSharedInternals.T;
1623916274
ReactSharedInternals.T = null;
1624016275
prevTransition = currentUpdatePriority;
@@ -16247,14 +16282,14 @@ __DEV__ &&
1624716282
null !== injectedProfilingHooks &&
1624816283
"function" ===
1624916284
typeof injectedProfilingHooks.markLayoutEffectsStarted &&
16250-
injectedProfilingHooks.markLayoutEffectsStarted(lanes),
16251-
(inProgressLanes = lanes),
16252-
(inProgressRoot = root),
16285+
injectedProfilingHooks.markLayoutEffectsStarted(endTime),
16286+
(inProgressLanes = endTime),
16287+
(inProgressRoot = suspendedViewTransitionReason),
1625316288
resetComponentEffectTimers(),
1625416289
commitLayoutEffectOnFiber(
16255-
root,
16256-
finishedWork.alternate,
16257-
finishedWork
16290+
suspendedViewTransitionReason,
16291+
startTime.alternate,
16292+
startTime
1625816293
),
1625916294
(inProgressRoot = inProgressLanes = null),
1626016295
enableSchedulingProfiler &&
@@ -16269,44 +16304,47 @@ __DEV__ &&
1626916304
(ReactSharedInternals.T = cleanUpIndicator);
1627016305
}
1627116306
}
16272-
root = pendingEffectsRenderEndTime;
16273-
finishedWork = pendingSuspendedCommitReason;
16307+
suspendedViewTransitionReason = pendingEffectsRenderEndTime;
16308+
startTime = pendingSuspendedCommitReason;
1627416309
enableComponentPerformanceTrack &&
1627516310
((commitEndTime = now()),
16276-
(root = finishedWork === IMMEDIATE_COMMIT ? root : commitStartTime),
16277-
(finishedWork = commitEndTime),
16278-
(lanes =
16311+
(suspendedViewTransitionReason =
16312+
startTime === IMMEDIATE_COMMIT
16313+
? suspendedViewTransitionReason
16314+
: commitStartTime),
16315+
(startTime = commitEndTime),
16316+
(endTime =
1627916317
pendingDelayedCommitReason === ABORTED_VIEW_TRANSITION_COMMIT),
1628016318
(cleanUpIndicator = workInProgressUpdateTask),
1628116319
null !== commitErrors
1628216320
? logCommitErrored(
16283-
root,
16284-
finishedWork,
16321+
suspendedViewTransitionReason,
16322+
startTime,
1628516323
commitErrors,
1628616324
!1,
1628716325
cleanUpIndicator
1628816326
)
1628916327
: !supportsUserTiming ||
16290-
finishedWork <= root ||
16328+
startTime <= suspendedViewTransitionReason ||
1629116329
(cleanUpIndicator
1629216330
? cleanUpIndicator.run(
1629316331
console.timeStamp.bind(
1629416332
console,
16295-
lanes ? "Commit Interrupted View Transition" : "Commit",
16296-
root,
16297-
finishedWork,
16333+
endTime ? "Commit Interrupted View Transition" : "Commit",
16334+
suspendedViewTransitionReason,
16335+
startTime,
1629816336
currentTrack,
1629916337
"Scheduler \u269b",
16300-
lanes ? "error" : "secondary-dark"
16338+
endTime ? "error" : "secondary-dark"
1630116339
)
1630216340
)
1630316341
: console.timeStamp(
16304-
lanes ? "Commit Interrupted View Transition" : "Commit",
16305-
root,
16306-
finishedWork,
16342+
endTime ? "Commit Interrupted View Transition" : "Commit",
16343+
suspendedViewTransitionReason,
16344+
startTime,
1630716345
currentTrack,
1630816346
"Scheduler \u269b",
16309-
lanes ? "error" : "secondary-dark"
16347+
endTime ? "error" : "secondary-dark"
1631016348
)));
1631116349
pendingEffectsStatus = PENDING_AFTER_MUTATION_PHASE;
1631216350
}
@@ -19621,6 +19659,7 @@ __DEV__ &&
1962119659
pendingDidIncludeRenderPhaseUpdate = !1,
1962219660
pendingSuspendedCommitReason = IMMEDIATE_COMMIT,
1962319661
pendingDelayedCommitReason = IMMEDIATE_COMMIT,
19662+
pendingSuspendedViewTransitionReason = null,
1962419663
NESTED_UPDATE_LIMIT = 50,
1962519664
nestedUpdateCount = 0,
1962619665
rootWithNestedUpdates = null,
@@ -19860,10 +19899,10 @@ __DEV__ &&
1986019899
(function () {
1986119900
var internals = {
1986219901
bundleType: 1,
19863-
version: "19.2.0-www-classic-58132116-20250918",
19902+
version: "19.2.0-www-classic-ad578aa0-20250918",
1986419903
rendererPackageName: "react-art",
1986519904
currentDispatcherRef: ReactSharedInternals,
19866-
reconcilerVersion: "19.2.0-www-classic-58132116-20250918"
19905+
reconcilerVersion: "19.2.0-www-classic-ad578aa0-20250918"
1986719906
};
1986819907
internals.overrideHookState = overrideHookState;
1986919908
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -19897,7 +19936,7 @@ __DEV__ &&
1989719936
exports.Shape = Shape;
1989819937
exports.Surface = Surface;
1989919938
exports.Text = Text;
19900-
exports.version = "19.2.0-www-classic-58132116-20250918";
19939+
exports.version = "19.2.0-www-classic-ad578aa0-20250918";
1990119940
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1990219941
"function" ===
1990319942
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)