mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian MarkbågeandGitHub
6eb5d67e9c
We should favor outlining a boundary if it contains Suspensey CSS or
Suspensey Images since then we can load that content separately and not
block the main content. This also allows us to animate the reveal.
For example this should be able to animate the reveal even though the
actual HTML content isn't large in this case it's worth outlining so
that the JS runtime can choose to animate this reveal.
```js
<ViewTransition>
<Suspense>
<img src="..." />
</Suspense>
</ViewTransition>
```
For Suspensey Images, in Fizz, we currently only implement the suspensey
semantics when a View Transition is running. Therefore the outlining
only applies if it appears inside a Suspense boundary which might
animate. Otherwise there's no point in outlining. It is also only if the
Suspense boundary itself might animate its appear and not just any
ViewTransition. So the effect is very conservative.
For CSS it applies even without ViewTransition though, since it can help
unblock the main content faster.
View Transition
A test case for View Transitions.
Setup
To reference a local build of React, first run npm run build at the root
of the React project. Then:
cd fixtures/view-transition
yarn
yarn start
The start command runs a webpack dev server and a server-side rendering server in development mode with hot reloading.
Note: whenever you make changes to React and rebuild it, you need to re-run yarn in this folder:
yarn
If you want to try the production mode instead run:
yarn start:prod
This will pre-build all static resources and then start a server-side rendering HTTP server that hosts the React app and service the static resources (without hot reloading).