Skip to content

Enable Suspensey Images inside <ViewTransition> subtrees#32820

Merged
sebmarkbage merged 2 commits into
facebook:mainfrom
sebmarkbage:vtsuspenseyimages
Apr 8, 2025
Merged

Enable Suspensey Images inside <ViewTransition> subtrees#32820
sebmarkbage merged 2 commits into
facebook:mainfrom
sebmarkbage:vtsuspenseyimages

Conversation

@sebmarkbage
Copy link
Copy Markdown
Contributor

@sebmarkbage sebmarkbage commented Apr 4, 2025

Even if the enableSuspenseyImages flag is off.

Started View Transitions already wait for Suspensey Fonts and this is another Suspensey feature that is even more important for View Transitions - even though we eventually want it all the time. So this uses <ViewTransition> as an early opt-in for that tree into Suspensey Images, which we can ship in a minor.

If you're doing an update inside a ViewTransition then we're eligible to start a ViewTransition in any Transition that might suspend. Even if that doesn't end up animating after all, we still consider it Suspensey. We could try to suspend inside the startViewTransition but that's not how it would work with enableSuspenseyImages on and we can't do that for startGestureTransition.

Even so we still need some opt-in to trigger the Suspense fallback even before we know whether we'll animate or not. So the simple solution is just that <ViewTransition> opts in the whole subtree into Suspensey Images in general.

In this PR I disable enableSuspenseyImages in experimental so that we can instead test the path that only enables it inside <ViewTransition> tree since that's the path that would next graduate to a minor.

@react-sizebot
Copy link
Copy Markdown

react-sizebot commented Apr 4, 2025

Comparing: ea05b75...6ea3e76

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js +0.27% 516.15 kB 517.53 kB +0.21% 91.87 kB 92.06 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js +0.03% 622.17 kB 622.34 kB +0.03% 110.09 kB 110.13 kB
facebook-www/ReactDOM-prod.classic.js +0.43% 652.45 kB 655.25 kB +0.41% 115.23 kB 115.70 kB
facebook-www/ReactDOM-prod.modern.js +0.44% 642.73 kB 645.53 kB +0.42% 113.67 kB 114.15 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-www/ReactDOM-prod.modern.js +0.44% 642.73 kB 645.53 kB +0.42% 113.67 kB 114.15 kB
facebook-www/ReactDOM-prod.classic.js +0.43% 652.45 kB 655.25 kB +0.41% 115.23 kB 115.70 kB
facebook-www/ReactDOMTesting-prod.modern.js +0.43% 657.13 kB 659.93 kB +0.41% 117.27 kB 117.75 kB
facebook-www/ReactDOMTesting-prod.classic.js +0.42% 666.85 kB 669.65 kB +0.41% 118.90 kB 119.38 kB
facebook-www/ReactDOM-profiling.modern.js +0.38% 716.54 kB 719.30 kB +0.37% 123.96 kB 124.42 kB
facebook-www/ReactDOM-profiling.classic.js +0.38% 724.59 kB 727.34 kB +0.38% 125.28 kB 125.75 kB
facebook-www/ReactDOM-dev.modern.js +0.32% 1,179.41 kB 1,183.19 kB +0.28% 195.69 kB 196.23 kB
facebook-www/ReactDOM-dev.classic.js +0.32% 1,188.55 kB 1,192.33 kB +0.28% 197.46 kB 198.00 kB
facebook-www/ReactDOMTesting-dev.modern.js +0.32% 1,195.95 kB 1,199.72 kB +0.29% 199.50 kB 200.08 kB
facebook-www/ReactDOMTesting-dev.classic.js +0.31% 1,205.09 kB 1,208.86 kB +0.26% 201.25 kB 201.78 kB
oss-stable-semver/react-dom/cjs/react-dom-client.production.js +0.27% 516.03 kB 517.40 kB +0.21% 91.84 kB 92.03 kB
oss-stable/react-dom/cjs/react-dom-client.production.js +0.27% 516.15 kB 517.53 kB +0.21% 91.87 kB 92.06 kB
oss-stable-semver/react-dom/cjs/react-dom-profiling.profiling.js +0.24% 548.74 kB 550.07 kB +0.20% 96.69 kB 96.89 kB
oss-stable/react-dom/cjs/react-dom-profiling.profiling.js +0.24% 548.86 kB 550.19 kB +0.20% 96.72 kB 96.92 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-prod.js +0.24% 539.84 kB 541.10 kB +0.21% 95.75 kB 95.95 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-prod.js +0.23% 545.34 kB 546.61 kB +0.21% 96.83 kB 97.03 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-profiling.js +0.22% 567.04 kB 568.27 kB +0.19% 99.66 kB 99.85 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-profiling.js +0.21% 572.98 kB 574.21 kB +0.19% 100.81 kB 101.01 kB
oss-stable-semver/react-dom/cjs/react-dom-client.development.js +0.21% 955.14 kB 957.13 kB +0.14% 160.94 kB 161.17 kB
oss-stable/react-dom/cjs/react-dom-client.development.js +0.21% 955.27 kB 957.25 kB +0.14% 160.97 kB 161.20 kB
oss-stable-semver/react-dom/cjs/react-dom-profiling.development.js +0.20% 971.58 kB 973.57 kB +0.14% 163.79 kB 164.02 kB
oss-stable/react-dom/cjs/react-dom-profiling.development.js +0.20% 971.71 kB 973.69 kB +0.14% 163.82 kB 164.05 kB

Generated by 🚫 dangerJS against 6ea3e76

Even if the enableSuspenseyImages flag is off and the enableViewTransition
flag is on.
@sebmarkbage sebmarkbage merged commit 8da36d0 into facebook:main Apr 8, 2025
github-actions Bot pushed a commit that referenced this pull request Apr 8, 2025
Even if the `enableSuspenseyImages` flag is off.

Started View Transitions already wait for Suspensey Fonts and this is
another Suspensey feature that is even more important for View
Transitions - even though we eventually want it all the time. So this
uses `<ViewTransition>` as an early opt-in for that tree into Suspensey
Images, which we can ship in a minor.

If you're doing an update inside a ViewTransition then we're eligible to
start a ViewTransition in any Transition that might suspend. Even if
that doesn't end up animating after all, we still consider it Suspensey.
We could try to suspend inside the startViewTransition but that's not
how it would work with `enableSuspenseyImages` on and we can't do that
for startGestureTransition.

Even so we still need some opt-in to trigger the Suspense fallback even
before we know whether we'll animate or not. So the simple solution is
just that `<ViewTransition>` opts in the whole subtree into Suspensey
Images in general.

In this PR I disable `enableSuspenseyImages` in experimental so that we
can instead test the path that only enables it inside `<ViewTransition>`
tree since that's the path that would next graduate to a minor.

DiffTrain build for [8da36d0](8da36d0)
github-actions Bot pushed a commit that referenced this pull request Apr 8, 2025
Even if the `enableSuspenseyImages` flag is off.

Started View Transitions already wait for Suspensey Fonts and this is
another Suspensey feature that is even more important for View
Transitions - even though we eventually want it all the time. So this
uses `<ViewTransition>` as an early opt-in for that tree into Suspensey
Images, which we can ship in a minor.

If you're doing an update inside a ViewTransition then we're eligible to
start a ViewTransition in any Transition that might suspend. Even if
that doesn't end up animating after all, we still consider it Suspensey.
We could try to suspend inside the startViewTransition but that's not
how it would work with `enableSuspenseyImages` on and we can't do that
for startGestureTransition.

Even so we still need some opt-in to trigger the Suspense fallback even
before we know whether we'll animate or not. So the simple solution is
just that `<ViewTransition>` opts in the whole subtree into Suspensey
Images in general.

In this PR I disable `enableSuspenseyImages` in experimental so that we
can instead test the path that only enables it inside `<ViewTransition>`
tree since that's the path that would next graduate to a minor.

DiffTrain build for [8da36d0](8da36d0)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants