Wait for fonts before committing the view transition

sebmarkbage · sebmarkbage · commit f6118c9bb79b · 2025-01-08T23:24:43.000-05:00
diff --git a/fixtures/view-transition/src/components/Chrome.js b/fixtures/view-transition/src/components/Chrome.js
@@ -12,6 +12,16 @@ export default class Chrome extends Component {
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <link rel="shortcut icon" href="favicon.ico" />
           <link rel="stylesheet" href={assets['main.css']} />
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link
+            rel="preconnect"
+            href="https://fonts.gstatic.com"
+            crossOrigin=""
+          />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
+            rel="stylesheet"
+          />
           <title>{this.props.title}</title>
         </head>
         <body>
diff --git a/fixtures/view-transition/src/components/Page.css b/fixtures/view-transition/src/components/Page.css
@@ -0,0 +1,8 @@
+.roboto-font {
+  font-family: "Roboto", serif;
+  font-optical-sizing: auto;
+  font-weight: 100;
+  font-style: normal;
+  font-variation-settings:
+    "wdth" 100;
+}
diff --git a/fixtures/view-transition/src/components/Page.js b/fixtures/view-transition/src/components/Page.js
@@ -29,7 +29,7 @@ function Component() {
       className={
         transitions['enter-slide-right'] + ' ' + transitions['exit-slide-left']
       }>
-      <p>Slide In from Left, Slide Out to Right</p>
+      <p className="roboto-font">Slide In from Left, Slide Out to Right</p>
     </ViewTransition>
   );
 }
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -1198,6 +1198,13 @@ export function hasInstanceAffectedParent(
   return oldRect.height !== newRect.height || oldRect.width !== newRect.width;
 }
 
+// How long to wait for new fonts to load before just committing anyway.
+// This freezes the screen. It needs to be short enough that it doesn't cause too much of
+// an issue when it's a new load and slow, yet long enough that you have a chance to load
+// it. Otherwise we wait for no reason. The assumption here is that you likely have
+// either cached the font or preloaded it earlier.
+const SUSPENSEY_FONT_TIMEOUT = 500;
+
 export function startViewTransition(
   rootContainer: Container,
   mutationCallback: () => void,
@@ -1220,8 +1227,30 @@ export function startViewTransition(
         const ownerWindow = ownerDocument.defaultView;
         const pendingNavigation =
           ownerWindow.navigation && ownerWindow.navigation.transition;
+        // $FlowFixMe[prop-missing]
+        const previousFontLoadingStatus = ownerDocument.fonts.status;
         mutationCallback();
-        // TODO: Wait for fonts.
+        if (
+          previousFontLoadingStatus === 'loaded' && // $FlowFixMe[incompatible-use]
+          // Force layout calculation to trigger font loading.
+          (ownerDocument.documentElement.clientHeight,
+          // $FlowFixMe[prop-missing]
+          ownerDocument.fonts.status === 'loading')
+        ) {
+          // The mutation lead to new fonts being loaded. We should wait on them before continuing.
+          // This avoids waiting for potentially unrelated fonts that were already loading before.
+          // Either in an earlier transition or as part of a sync optimistic state. This doesn't
+          // include preloads that happened earlier.
+          const fontsReady = Promise.race([
+            // $FlowFixMe[prop-missing]
+            ownerDocument.fonts.ready,
+            new Promise(resolve => setTimeout(resolve, SUSPENSEY_FONT_TIMEOUT)),
+          ]).then(layoutCallback, layoutCallback);
+          const allReady = pendingNavigation
+            ? Promise.allSettled([pendingNavigation.finished, fontsReady])
+            : fontsReady;
+          return allReady.then(afterMutationCallback, afterMutationCallback);
+        }
         layoutCallback();
         if (pendingNavigation) {
           return pendingNavigation.finished.then(

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ function Component() {`
`29`	`29`	`className={`
`30`	`30`	`transitions['enter-slide-right'] + ' ' + transitions['exit-slide-left']`
`31`	`31`	`}>`
`32`		`- <p>Slide In from Left, Slide Out to Right</p>`
	`32`	`+ <p className="roboto-font">Slide In from Left, Slide Out to Right</p>`
`33`	`33`	`</ViewTransition>`
`34`	`34`	`);`
`35`	`35`	`}`