Skip to content

Commit 19f7053

Browse files
committed
[Fiber] Wait for suspensey image in the viewport before starting an animation (#34500)
Stacked on #34486. If we gave up on loading suspensey images for blocking the commit (e.g. due to #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](348a4e2)
1 parent 10fb97e commit 19f7053

34 files changed

+736
-326
lines changed

compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
5d49b2b7f42b6aebe749914fbd06640ded63c001
1+
348a4e2d44fed940313d0657ee180083d12ffc04
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
5d49b2b7f42b6aebe749914fbd06640ded63c001
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-5d49b2b7-20250915";
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-5d49b2b7-20250915";
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-5d49b2b7-20250915";
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-5d49b2b7-20250915";
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-5d49b2b7-20250915";
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-5d49b2b7-20250915";
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: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19765,10 +19765,10 @@ __DEV__ &&
1976519765
(function () {
1976619766
var internals = {
1976719767
bundleType: 1,
19768-
version: "19.2.0-www-classic-5d49b2b7-20250915",
19768+
version: "19.2.0-www-classic-348a4e2d-20250915",
1976919769
rendererPackageName: "react-art",
1977019770
currentDispatcherRef: ReactSharedInternals,
19771-
reconcilerVersion: "19.2.0-www-classic-5d49b2b7-20250915"
19771+
reconcilerVersion: "19.2.0-www-classic-348a4e2d-20250915"
1977219772
};
1977319773
internals.overrideHookState = overrideHookState;
1977419774
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -19802,7 +19802,7 @@ __DEV__ &&
1980219802
exports.Shape = Shape;
1980319803
exports.Surface = Surface;
1980419804
exports.Text = Text;
19805-
exports.version = "19.2.0-www-classic-5d49b2b7-20250915";
19805+
exports.version = "19.2.0-www-classic-348a4e2d-20250915";
1980619806
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1980719807
"function" ===
1980819808
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.modern.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19536,10 +19536,10 @@ __DEV__ &&
1953619536
(function () {
1953719537
var internals = {
1953819538
bundleType: 1,
19539-
version: "19.2.0-www-modern-5d49b2b7-20250915",
19539+
version: "19.2.0-www-modern-348a4e2d-20250915",
1954019540
rendererPackageName: "react-art",
1954119541
currentDispatcherRef: ReactSharedInternals,
19542-
reconcilerVersion: "19.2.0-www-modern-5d49b2b7-20250915"
19542+
reconcilerVersion: "19.2.0-www-modern-348a4e2d-20250915"
1954319543
};
1954419544
internals.overrideHookState = overrideHookState;
1954519545
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -19573,7 +19573,7 @@ __DEV__ &&
1957319573
exports.Shape = Shape;
1957419574
exports.Surface = Surface;
1957519575
exports.Text = Text;
19576-
exports.version = "19.2.0-www-modern-5d49b2b7-20250915";
19576+
exports.version = "19.2.0-www-modern-348a4e2d-20250915";
1957719577
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1957819578
"function" ===
1957919579
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)