diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index 18b20816f8f..f4b6fb061d8 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -3053,21 +3053,23 @@ hr { When a [``](/reference/react/ViewTransition) animates a Suspense boundary's reveal, React waits for visible images to load, up to a timeout, so the animation doesn't start with a half-loaded image. This only happens during a `` update. Adding an `onLoad` handler opts a specific image out, even inside a ``. -In the example below, the Suspense boundary is wrapped in a `` and shows a profile skeleton until the portrait has loaded. - -For comparison, the second button performs the same update without React. Nothing waits for the image, so the card appears immediately and the image pops in when it loads: +In this example, [`startTransition`](/reference/react/startTransition) marks both state updates as Transitions. Compare what happens when React renders the image inside and outside a ``: ```js -import { ViewTransition, Suspense, useState, startTransition } from 'react'; +import { + ViewTransition, + Suspense, + useState, + startTransition, +} from 'react'; import { freshImageUrl } from './image.js'; -import VanillaProfile from './VanillaProfile.js'; function Profile({ src }) { return (
- Jack Pope +

Jack Pope

); @@ -3083,47 +3085,39 @@ function ProfilePlaceholder() { } export default function App() { - const [src, setSrc] = useState(null); + const [viewTransitionSrc, setViewTransitionSrc] = useState(null); + const [plainSrc, setPlainSrc] = useState(null); return ( <> - {src && ( + {viewTransitionSrc && ( }> - + )}
- - - ); -} -``` - -```js src/VanillaProfile.js -import { useRef } from 'react'; -import { freshImageUrl } from './image.js'; - -export default function VanillaProfile() { - const ref = useRef(null); - function show() { - ref.current.innerHTML = `
- Jack Pope -

Jack Pope

-
`; - } - return ( - <> - -
+ + {plainSrc && ( + }> + + + )} ); } @@ -3180,6 +3174,8 @@ hr { +Inside ``, React keeps the skeleton visible while it waits for the image, up to a timeout. Outside it, React does not wait for the image before committing the card. + --- ### Coordinating fonts, images, and stylesheets {/*coordinating-fonts-images-and-stylesheets*/} @@ -3202,7 +3198,7 @@ function ProfileCard({ resources }) { <>
- Jack Pope +

Jack Pope

{quote}

@@ -3274,7 +3270,7 @@ export default function VanillaProfileCard() { .bio { margin: 0; font-family: 'Caveat', sans-serif; font-size: 20px; line-height: 26px; }
- Jack Pope +

Jack Pope

${quote}