Skip to content

Commit bc1d2ec

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 211e64c commit bc1d2ec

24 files changed

+809
-553
lines changed

‎compiled-rn/VERSION_NATIVE_FB‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
19.2.0-native-fb-58132116-20250918
1+
19.2.0-native-fb-ad578aa0-20250918

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-dev.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<8b6d7d96df66aa0450e258cc0af50442>>
10+
* @generated SignedSource<<fd863905bb0966ebf68fa887232115f1>>
1111
*/
1212

1313
"use strict";
@@ -404,5 +404,5 @@ __DEV__ &&
404404
exports.useFormStatus = function () {
405405
return resolveDispatcher().useHostTransitionStatus();
406406
};
407-
exports.version = "19.2.0-native-fb-58132116-20250918";
407+
exports.version = "19.2.0-native-fb-ad578aa0-20250918";
408408
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-prod.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<cdbae6110efccf6d9b752c85fcd9fa0d>>
10+
* @generated SignedSource<<1b03a772181f3d6b040d9c278b4569d1>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.2.0-native-fb-58132116-20250918";
206+
exports.version = "19.2.0-native-fb-ad578aa0-20250918";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-profiling.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<cdbae6110efccf6d9b752c85fcd9fa0d>>
10+
* @generated SignedSource<<1b03a772181f3d6b040d9c278b4569d1>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.2.0-native-fb-58132116-20250918";
206+
exports.version = "19.2.0-native-fb-ad578aa0-20250918";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-dev.js‎

Lines changed: 192 additions & 153 deletions
Large diffs are not rendered by default.

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-prod.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<5ac5638578d86937096c5255f9784767>>
10+
* @generated SignedSource<<6c68a4b50f1f39675980315f546fb550>>
1111
*/
1212

1313
/*
@@ -17525,14 +17525,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1752517525
};
1752617526
var isomorphicReactPackageVersion$jscomp$inline_2072 = React.version;
1752717527
if (
17528-
"19.2.0-native-fb-58132116-20250918" !==
17528+
"19.2.0-native-fb-ad578aa0-20250918" !==
1752917529
isomorphicReactPackageVersion$jscomp$inline_2072
1753017530
)
1753117531
throw Error(
1753217532
formatProdErrorMessage(
1753317533
527,
1753417534
isomorphicReactPackageVersion$jscomp$inline_2072,
17535-
"19.2.0-native-fb-58132116-20250918"
17535+
"19.2.0-native-fb-ad578aa0-20250918"
1753617536
)
1753717537
);
1753817538
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -17554,10 +17554,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1755417554
};
1755517555
var internals$jscomp$inline_2645 = {
1755617556
bundleType: 0,
17557-
version: "19.2.0-native-fb-58132116-20250918",
17557+
version: "19.2.0-native-fb-ad578aa0-20250918",
1755817558
rendererPackageName: "react-dom",
1755917559
currentDispatcherRef: ReactSharedInternals,
17560-
reconcilerVersion: "19.2.0-native-fb-58132116-20250918"
17560+
reconcilerVersion: "19.2.0-native-fb-ad578aa0-20250918"
1756117561
};
1756217562
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1756317563
var hook$jscomp$inline_2646 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17664,4 +17664,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1766417664
listenToAllSupportedEvents(container);
1766517665
return new ReactDOMHydrationRoot(initialChildren);
1766617666
};
17667-
exports.version = "19.2.0-native-fb-58132116-20250918";
17667+
exports.version = "19.2.0-native-fb-ad578aa0-20250918";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-profiling.js‎

Lines changed: 65 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<c2bdd17115f851cb9395dbc112d05098>>
10+
* @generated SignedSource<<e48319f84d7218f1b8bf443004d40b8b>>
1111
*/
1212

1313
/*
@@ -12888,6 +12888,7 @@ var DefaultAsyncDispatcher = {
1288812888
pendingRecoverableErrors = null,
1288912889
pendingSuspendedCommitReason = 0,
1289012890
pendingDelayedCommitReason = 0,
12891+
pendingSuspendedViewTransitionReason = null,
1289112892
nestedUpdateCount = 0,
1289212893
rootWithNestedUpdates = null;
1289312894
function requestUpdateLane(fiber) {
@@ -14178,6 +14179,7 @@ function commitRoot(
1417814179
pendingEffectsRenderEndTime = completedRenderEndTime;
1417914180
pendingSuspendedCommitReason = suspendedCommitReason;
1418014181
pendingDelayedCommitReason = 0;
14182+
pendingSuspendedViewTransitionReason = null;
1418114183
(enableComponentPerformanceTrack && 0 !== finishedWork.actualDuration) ||
1418214184
0 !== (finishedWork.subtreeFlags & 10256) ||
1418314185
0 !== (finishedWork.flags & 10256)
@@ -14367,18 +14369,36 @@ function flushMutationEffects() {
1436714369
function flushLayoutEffects() {
1436814370
if (2 === pendingEffectsStatus) {
1436914371
pendingEffectsStatus = 0;
14370-
var root = pendingEffectsRoot,
14371-
finishedWork = pendingFinishedWork,
14372+
if (enableComponentPerformanceTrack) {
14373+
var suspendedViewTransitionReason = pendingSuspendedViewTransitionReason;
14374+
null !== suspendedViewTransitionReason &&
14375+
((commitStartTime = now()),
14376+
!supportsUserTiming ||
14377+
commitStartTime <= commitEndTime ||
14378+
console.timeStamp(
14379+
suspendedViewTransitionReason,
14380+
commitEndTime,
14381+
commitStartTime,
14382+
currentTrack,
14383+
"Scheduler \u269b",
14384+
"secondary-light"
14385+
));
14386+
}
14387+
suspendedViewTransitionReason = pendingEffectsRoot;
14388+
var finishedWork = pendingFinishedWork,
1437214389
lanes = pendingEffectsLanes,
14373-
cleanUpIndicator = root.pendingIndicator;
14374-
if (null !== cleanUpIndicator && 0 === root.indicatorLanes) {
14390+
cleanUpIndicator = suspendedViewTransitionReason.pendingIndicator;
14391+
if (
14392+
null !== cleanUpIndicator &&
14393+
0 === suspendedViewTransitionReason.indicatorLanes
14394+
) {
1437514395
var prevTransition = ReactSharedInternals.T;
1437614396
ReactSharedInternals.T = null;
1437714397
var previousPriority = ReactDOMSharedInternals.p;
1437814398
ReactDOMSharedInternals.p = 2;
1437914399
var prevExecutionContext = executionContext;
1438014400
executionContext |= 4;
14381-
root.pendingIndicator = null;
14401+
suspendedViewTransitionReason.pendingIndicator = null;
1438214402
try {
1438314403
cleanUpIndicator();
1438414404
} catch (x) {
@@ -14403,9 +14423,13 @@ function flushLayoutEffects() {
1440314423
typeof injectedProfilingHooks.markLayoutEffectsStarted &&
1440414424
injectedProfilingHooks.markLayoutEffectsStarted(lanes),
1440514425
(inProgressLanes = lanes),
14406-
(inProgressRoot = root),
14426+
(inProgressRoot = suspendedViewTransitionReason),
1440714427
resetComponentEffectTimers(),
14408-
commitLayoutEffectOnFiber(root, finishedWork.alternate, finishedWork),
14428+
commitLayoutEffectOnFiber(
14429+
suspendedViewTransitionReason,
14430+
finishedWork.alternate,
14431+
finishedWork
14432+
),
1440914433
(inProgressRoot = inProgressLanes = null),
1441014434
null !== injectedProfilingHooks &&
1441114435
"function" ===
@@ -14417,20 +14441,21 @@ function flushLayoutEffects() {
1441714441
(ReactSharedInternals.T = cleanUpIndicator);
1441814442
}
1441914443
}
14420-
root = pendingEffectsRenderEndTime;
14444+
suspendedViewTransitionReason = pendingEffectsRenderEndTime;
1442114445
finishedWork = pendingSuspendedCommitReason;
1442214446
enableComponentPerformanceTrack &&
1442314447
((commitEndTime = now()),
14424-
(root = 0 === finishedWork ? root : commitStartTime),
14448+
(suspendedViewTransitionReason =
14449+
0 === finishedWork ? suspendedViewTransitionReason : commitStartTime),
1442514450
(finishedWork = commitEndTime),
1442614451
(lanes = 1 === pendingDelayedCommitReason),
1442714452
null !== commitErrors
14428-
? logCommitErrored(root, finishedWork)
14453+
? logCommitErrored(suspendedViewTransitionReason, finishedWork)
1442914454
: !supportsUserTiming ||
14430-
finishedWork <= root ||
14455+
finishedWork <= suspendedViewTransitionReason ||
1443114456
console.timeStamp(
1443214457
lanes ? "Commit Interrupted View Transition" : "Commit",
14433-
root,
14458+
suspendedViewTransitionReason,
1443414459
finishedWork,
1443514460
currentTrack,
1443614461
"Scheduler \u269b",
@@ -15230,20 +15255,20 @@ function debounceScrollEnd(targetInst, nativeEvent, nativeEventTarget) {
1523015255
(nativeEventTarget[internalScrollTimer] = targetInst));
1523115256
}
1523215257
for (
15233-
var i$jscomp$inline_1924 = 0;
15234-
i$jscomp$inline_1924 < simpleEventPluginEvents.length;
15235-
i$jscomp$inline_1924++
15258+
var i$jscomp$inline_1930 = 0;
15259+
i$jscomp$inline_1930 < simpleEventPluginEvents.length;
15260+
i$jscomp$inline_1930++
1523615261
) {
15237-
var eventName$jscomp$inline_1925 =
15238-
simpleEventPluginEvents[i$jscomp$inline_1924],
15239-
domEventName$jscomp$inline_1926 =
15240-
eventName$jscomp$inline_1925.toLowerCase(),
15241-
capitalizedEvent$jscomp$inline_1927 =
15242-
eventName$jscomp$inline_1925[0].toUpperCase() +
15243-
eventName$jscomp$inline_1925.slice(1);
15262+
var eventName$jscomp$inline_1931 =
15263+
simpleEventPluginEvents[i$jscomp$inline_1930],
15264+
domEventName$jscomp$inline_1932 =
15265+
eventName$jscomp$inline_1931.toLowerCase(),
15266+
capitalizedEvent$jscomp$inline_1933 =
15267+
eventName$jscomp$inline_1931[0].toUpperCase() +
15268+
eventName$jscomp$inline_1931.slice(1);
1524415269
registerSimpleEvent(
15245-
domEventName$jscomp$inline_1926,
15246-
"on" + capitalizedEvent$jscomp$inline_1927
15270+
domEventName$jscomp$inline_1932,
15271+
"on" + capitalizedEvent$jscomp$inline_1933
1524715272
);
1524815273
}
1524915274
registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -19584,16 +19609,16 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1958419609
0 === i && attemptExplicitHydrationTarget(target);
1958519610
}
1958619611
};
19587-
var isomorphicReactPackageVersion$jscomp$inline_2335 = React.version;
19612+
var isomorphicReactPackageVersion$jscomp$inline_2341 = React.version;
1958819613
if (
19589-
"19.2.0-native-fb-58132116-20250918" !==
19590-
isomorphicReactPackageVersion$jscomp$inline_2335
19614+
"19.2.0-native-fb-ad578aa0-20250918" !==
19615+
isomorphicReactPackageVersion$jscomp$inline_2341
1959119616
)
1959219617
throw Error(
1959319618
formatProdErrorMessage(
1959419619
527,
19595-
isomorphicReactPackageVersion$jscomp$inline_2335,
19596-
"19.2.0-native-fb-58132116-20250918"
19620+
isomorphicReactPackageVersion$jscomp$inline_2341,
19621+
"19.2.0-native-fb-ad578aa0-20250918"
1959719622
)
1959819623
);
1959919624
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -19613,12 +19638,12 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1961319638
null === componentOrElement ? null : componentOrElement.stateNode;
1961419639
return componentOrElement;
1961519640
};
19616-
var internals$jscomp$inline_2342 = {
19641+
var internals$jscomp$inline_2348 = {
1961719642
bundleType: 0,
19618-
version: "19.2.0-native-fb-58132116-20250918",
19643+
version: "19.2.0-native-fb-ad578aa0-20250918",
1961919644
rendererPackageName: "react-dom",
1962019645
currentDispatcherRef: ReactSharedInternals,
19621-
reconcilerVersion: "19.2.0-native-fb-58132116-20250918",
19646+
reconcilerVersion: "19.2.0-native-fb-ad578aa0-20250918",
1962219647
getLaneLabelMap: function () {
1962319648
for (
1962419649
var map = new Map(), lane = 1, index$324 = 0;
@@ -19636,16 +19661,16 @@ var internals$jscomp$inline_2342 = {
1963619661
}
1963719662
};
1963819663
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
19639-
var hook$jscomp$inline_2913 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
19664+
var hook$jscomp$inline_2919 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
1964019665
if (
19641-
!hook$jscomp$inline_2913.isDisabled &&
19642-
hook$jscomp$inline_2913.supportsFiber
19666+
!hook$jscomp$inline_2919.isDisabled &&
19667+
hook$jscomp$inline_2919.supportsFiber
1964319668
)
1964419669
try {
19645-
(rendererID = hook$jscomp$inline_2913.inject(
19646-
internals$jscomp$inline_2342
19670+
(rendererID = hook$jscomp$inline_2919.inject(
19671+
internals$jscomp$inline_2348
1964719672
)),
19648-
(injectedHook = hook$jscomp$inline_2913);
19673+
(injectedHook = hook$jscomp$inline_2919);
1964919674
} catch (err) {}
1965019675
}
1965119676
exports.createRoot = function (container, options) {
@@ -19741,4 +19766,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1974119766
listenToAllSupportedEvents(container);
1974219767
return new ReactDOMHydrationRoot(initialChildren);
1974319768
};
19744-
exports.version = "19.2.0-native-fb-58132116-20250918";
19769+
exports.version = "19.2.0-native-fb-ad578aa0-20250918";

0 commit comments

Comments
 (0)