Skip to content

Commit d745718

Browse files
pull[bot]pull[bot]
committed
[Fiber] Suspend the commit while we wait for the previous View Transition to finish (facebook#32002)
Stacked on facebook#31975. View Transitions cannot handle interruptions in that if you start a new one before the previous one has finished, it just stops and then restarts. It doesn't seamlessly transition into the new transition. This is generally considered a bad thing but I actually think it's quite good for fire-and-forget animations (gestures is another story). There are too many examples of bad animations in fast interactions because the scenario wasn't predicted. Like overlapping toasts or stacked layers that look bad. The only case interrupts tend to work well is when you do a strict reversal of an animation like returning to the page you just left or exiting a modal just being opened. However, we're limited by the platform even in that regard. I think one reason interruptions have traditionally been seen as good is because it's hard if you have a synchronous framework to not interrupt since your application state has already moved on. We don't have that limitation since we can suspend commits. We can do all the work to prepare for the next commit by rendering while the animation is going but then delay the commit until the previous one finishes. Another technical limitation earlier animation libraries suffered from is only have the option to either interrupt or sequence animations since it's modeling just one change set. Like showing one toast at a time. That's bad. We don't have that limitation because we can interrupt a previously suspended commit and start working on a new one instead. That's what we do for suspended transitions in general. The net effect is that we batch the commits. Therefore if you get multiple toasts flying in fast, they can animate as a batch in together all at once instead of overlapping slightly or being staggered. Interruptions (often) bad. Staggered animations bad. Batched animations good. This PR stashes the currently active View Transition with an expando on the container that's animating (currently always document). This is similar to what we do with event handlers etc. We reason we do this with an expando is that if you have multiple Reacts on the same page they need to wait for each other. However, one of those might also be the SSR runtime. So this lets us wait for the SSR runtime's animations to finish before starting client ones. This could really be a more generic name since this should ideally be shared across frameworks. It's kind of strange that this property doesn't already exist in the DOM given that there can only be one. It would be useful to be able to coordinate this across libraries. DiffTrain build for [98418e8](facebook@98418e8)
1 parent b47223f commit d745718

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+13828
-13658
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ __DEV__ &&
5353
return "Suspense";
5454
case REACT_SUSPENSE_LIST_TYPE:
5555
return "SuspenseList";
56+
case REACT_VIEW_TRANSITION_TYPE:
5657
case REACT_TRACING_MARKER_TYPE:
5758
if (enableTransitionTracing) return "TracingMarker";
5859
}
@@ -724,6 +725,7 @@ __DEV__ &&
724725
REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
725726
REACT_LEGACY_HIDDEN_TYPE = Symbol.for("react.legacy_hidden"),
726727
REACT_TRACING_MARKER_TYPE = Symbol.for("react.tracing_marker"),
728+
REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"),
727729
MAYBE_ITERATOR_SYMBOL = Symbol.iterator,
728730
warningWWW = require("warning"),
729731
REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference"),

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ __DEV__ &&
5353
return "Suspense";
5454
case REACT_SUSPENSE_LIST_TYPE:
5555
return "SuspenseList";
56+
case REACT_VIEW_TRANSITION_TYPE:
5657
case REACT_TRACING_MARKER_TYPE:
5758
if (enableTransitionTracing) return "TracingMarker";
5859
}
@@ -724,6 +725,7 @@ __DEV__ &&
724725
REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
725726
REACT_LEGACY_HIDDEN_TYPE = Symbol.for("react.legacy_hidden"),
726727
REACT_TRACING_MARKER_TYPE = Symbol.for("react.tracing_marker"),
728+
REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"),
727729
MAYBE_ITERATOR_SYMBOL = Symbol.iterator,
728730
warningWWW = require("warning"),
729731
REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference"),

‎compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
defffdbba43f89b95d9f67a4fb0fa146c1211734
1+
98418e8902d6045e5138a2e765e026ce2e4de82d

‎compiled/facebook-www/REVISION_TRANSFORMS

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
defffdbba43f89b95d9f67a4fb0fa146c1211734
1+
98418e8902d6045e5138a2e765e026ce2e4de82d

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ __DEV__ &&
137137
return "Suspense";
138138
case REACT_SUSPENSE_LIST_TYPE:
139139
return "SuspenseList";
140+
case REACT_VIEW_TRANSITION_TYPE:
140141
case REACT_TRACING_MARKER_TYPE:
141142
if (enableTransitionTracing) return "TracingMarker";
142143
}
@@ -1136,6 +1137,7 @@ __DEV__ &&
11361137
REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
11371138
REACT_LEGACY_HIDDEN_TYPE = Symbol.for("react.legacy_hidden"),
11381139
REACT_TRACING_MARKER_TYPE = Symbol.for("react.tracing_marker"),
1140+
REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"),
11391141
MAYBE_ITERATOR_SYMBOL = Symbol.iterator,
11401142
warningWWW = require("warning"),
11411143
didWarnStateUpdateForUnmountedComponent = {},
@@ -1942,7 +1944,7 @@ __DEV__ &&
19421944
exports.useTransition = function () {
19431945
return resolveDispatcher().useTransition();
19441946
};
1945-
exports.version = "19.1.0-www-classic-defffdbb-20250106";
1947+
exports.version = "19.1.0-www-classic-98418e89-20250108";
19461948
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
19471949
"function" ===
19481950
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ __DEV__ &&
137137
return "Suspense";
138138
case REACT_SUSPENSE_LIST_TYPE:
139139
return "SuspenseList";
140+
case REACT_VIEW_TRANSITION_TYPE:
140141
case REACT_TRACING_MARKER_TYPE:
141142
if (enableTransitionTracing) return "TracingMarker";
142143
}
@@ -1136,6 +1137,7 @@ __DEV__ &&
11361137
REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
11371138
REACT_LEGACY_HIDDEN_TYPE = Symbol.for("react.legacy_hidden"),
11381139
REACT_TRACING_MARKER_TYPE = Symbol.for("react.tracing_marker"),
1140+
REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"),
11391141
MAYBE_ITERATOR_SYMBOL = Symbol.iterator,
11401142
warningWWW = require("warning"),
11411143
didWarnStateUpdateForUnmountedComponent = {},
@@ -1942,7 +1944,7 @@ __DEV__ &&
19421944
exports.useTransition = function () {
19431945
return resolveDispatcher().useTransition();
19441946
};
1945-
exports.version = "19.1.0-www-modern-defffdbb-20250106";
1947+
exports.version = "19.1.0-www-modern-98418e89-20250108";
19461948
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
19471949
"function" ===
19481950
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
@@ -630,4 +630,4 @@ exports.useSyncExternalStore = function (
630630
exports.useTransition = function () {
631631
return ReactSharedInternals.H.useTransition();
632632
};
633-
exports.version = "19.1.0-www-classic-defffdbb-20250106";
633+
exports.version = "19.1.0-www-classic-98418e89-20250108";

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -630,4 +630,4 @@ exports.useSyncExternalStore = function (
630630
exports.useTransition = function () {
631631
return ReactSharedInternals.H.useTransition();
632632
};
633-
exports.version = "19.1.0-www-modern-defffdbb-20250106";
633+
exports.version = "19.1.0-www-modern-98418e89-20250108";

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -634,7 +634,7 @@ exports.useSyncExternalStore = function (
634634
exports.useTransition = function () {
635635
return ReactSharedInternals.H.useTransition();
636636
};
637-
exports.version = "19.1.0-www-classic-defffdbb-20250106";
637+
exports.version = "19.1.0-www-classic-98418e89-20250108";
638638
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
639639
"function" ===
640640
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
@@ -634,7 +634,7 @@ exports.useSyncExternalStore = function (
634634
exports.useTransition = function () {
635635
return ReactSharedInternals.H.useTransition();
636636
};
637-
exports.version = "19.1.0-www-modern-defffdbb-20250106";
637+
exports.version = "19.1.0-www-modern-98418e89-20250108";
638638
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
639639
"function" ===
640640
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)