Skip to content

Commit c706b43

Browse files
committed
[Fiber] Wait for suspensey image in the viewport before starting an animation (facebook#34500)
Stacked on facebook#34486. If we gave up on loading suspensey images for blocking the commit (e.g. due to facebook#34481), we can still block the view transition from committing to allow an animation to include the image from the start. At this point we have more information about the layout so we can include only the images that are within viewport in the calculation which may end up with a different answer. This only applies when we attempt to run an animation (e.g. something mutated inside a `<ViewTransition>` in a Transition). We could attempt a `startViewTransition` if we gave up on the suspensey images just so that we could block it even if no animation would be running. However, this point the screen is frozen and you can no longer have sync updates interrupt so ideally we would have already blocked the commit from happening in the first place. The reason to have two points where we block is that ideally we leave the UI responsive while blocking, which blocking the commit does. In the simple case of all images or a single image being within the viewport, that's favorable. By combining the techniques we only end up freezing the screen in the special case that we had a lot of images added outside the viewport and started an animation with some image inside the viewport (which presumably is about to finish anyway). DiffTrain build for [348a4e2](facebook@348a4e2)
1 parent d23c0f7 commit c706b43

35 files changed

+3930
-1728
lines changed

compiled/eslint-plugin-react-hooks/index.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32051,6 +32051,20 @@ function defaultModuleTypeProvider(moduleName) {
3205132051
},
3205232052
};
3205332053
}
32054+
case '@tanstack/react-virtual': {
32055+
return {
32056+
kind: 'object',
32057+
properties: {
32058+
useVirtualizer: {
32059+
kind: 'hook',
32060+
positionalParams: [],
32061+
restParam: Effect.Read,
32062+
returnType: { kind: 'type', name: 'Any' },
32063+
knownIncompatible: `TanStack Virtual's \`useVirtualizer()\` API returns functions that cannot be memoized safely`,
32064+
},
32065+
},
32066+
};
32067+
}
3205432068
}
3205532069
return null;
3205632070
}

compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
47664deb8e981ec0425731495be1c5826ce90956
1+
348a4e2d44fed940313d0657ee180083d12ffc04
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
47664deb8e981ec0425731495be1c5826ce90956
1+
348a4e2d44fed940313d0657ee180083d12ffc04

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-47664deb-20250913";
1422+
exports.version = "19.2.0-www-classic-348a4e2d-20250915";
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-47664deb-20250913";
1422+
exports.version = "19.2.0-www-modern-348a4e2d-20250915";
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-47664deb-20250913";
605+
exports.version = "19.2.0-www-classic-348a4e2d-20250915";

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-47664deb-20250913";
605+
exports.version = "19.2.0-www-modern-348a4e2d-20250915";

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-47664deb-20250913";
609+
exports.version = "19.2.0-www-classic-348a4e2d-20250915";
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-47664deb-20250913";
609+
exports.version = "19.2.0-www-modern-348a4e2d-20250915";
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: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14853,6 +14853,7 @@ __DEV__ &&
1485314853
workInProgressRootInterleavedUpdatedLanes,
1485414854
workInProgressSuspendedRetryLanes,
1485514855
startTime,
14856+
null,
1485614857
IMMEDIATE_COMMIT,
1485714858
renderStartTime,
1485814859
forceSync
@@ -14937,13 +14938,19 @@ __DEV__ &&
1493714938
) {
1493814939
root.timeoutHandle = -1;
1493914940
didSkipSuspendedSiblings = finishedWork.subtreeFlags;
14941+
var suspendedState = null;
1494014942
if (
1494114943
(enableViewTransition && (lanes & 335544064) === lanes) ||
1494214944
didSkipSuspendedSiblings & 8192 ||
1494314945
16785408 === (didSkipSuspendedSiblings & 16785408)
1494414946
)
14945-
(appearingViewTransitions = null),
14946-
accumulateSuspenseyCommitOnFiber(finishedWork);
14947+
(appearingViewTransitions = suspendedState = null),
14948+
accumulateSuspenseyCommitOnFiber(finishedWork),
14949+
(lanes & 62914560) === lanes
14950+
? globalMostRecentFallbackTime - now$1()
14951+
: (lanes & 4194048) === lanes
14952+
? globalMostRecentTransitionTime - now$1()
14953+
: 0;
1494714954
commitRoot(
1494814955
root,
1494914956
finishedWork,
@@ -14955,6 +14962,7 @@ __DEV__ &&
1495514962
updatedLanes,
1495614963
suspendedRetryLanes,
1495714964
exitStatus,
14965+
suspendedState,
1495814966
suspendedCommitReason,
1495914967
completedRenderStartTime,
1496014968
completedRenderEndTime
@@ -15989,6 +15997,7 @@ __DEV__ &&
1598915997
updatedLanes,
1599015998
suspendedRetryLanes,
1599115999
exitStatus,
16000+
suspendedState,
1599216001
suspendedCommitReason,
1599316002
completedRenderStartTime,
1599416003
completedRenderEndTime
@@ -17835,6 +17844,7 @@ __DEV__ &&
1783517844
needsIsomorphicIndicator = !1,
1783617845
prevOnStartTransitionFinish = ReactSharedInternals.S;
1783717846
ReactSharedInternals.S = function (transition, returnValue) {
17847+
globalMostRecentTransitionTime = now$1();
1783817848
if (
1783917849
"object" === typeof returnValue &&
1784017850
null !== returnValue &&
@@ -19485,6 +19495,7 @@ __DEV__ &&
1948519495
workInProgressRootDidIncludeRecursiveRenderUpdate = !1,
1948619496
didIncludeCommitPhaseUpdate = !1,
1948719497
globalMostRecentFallbackTime = 0,
19498+
globalMostRecentTransitionTime = 0,
1948819499
FALLBACK_THROTTLE_MS = 300,
1948919500
workInProgressRootRenderTargetTime = Infinity,
1949019501
RENDER_TIMEOUT_MS = 500,
@@ -19754,10 +19765,10 @@ __DEV__ &&
1975419765
(function () {
1975519766
var internals = {
1975619767
bundleType: 1,
19757-
version: "19.2.0-www-classic-47664deb-20250913",
19768+
version: "19.2.0-www-classic-348a4e2d-20250915",
1975819769
rendererPackageName: "react-art",
1975919770
currentDispatcherRef: ReactSharedInternals,
19760-
reconcilerVersion: "19.2.0-www-classic-47664deb-20250913"
19771+
reconcilerVersion: "19.2.0-www-classic-348a4e2d-20250915"
1976119772
};
1976219773
internals.overrideHookState = overrideHookState;
1976319774
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -19791,7 +19802,7 @@ __DEV__ &&
1979119802
exports.Shape = Shape;
1979219803
exports.Surface = Surface;
1979319804
exports.Text = Text;
19794-
exports.version = "19.2.0-www-classic-47664deb-20250913";
19805+
exports.version = "19.2.0-www-classic-348a4e2d-20250915";
1979519806
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1979619807
"function" ===
1979719808
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)