Suspensey Fonts for View Transition

[sebmarkbage]

Fonts flickering in while loading can be disturbing to any transition but especially View Transitions. Even if they don't cause layout thrash - the paint thrash is bad enough. We might add Suspensey fonts to all Transitions in the future but it's especially a no-brainer for View Transitions.

We need to apply mutations to the DOM first to know whether that will trigger new fonts to load. For general Suspensey fonts, we'd have to revert the commit by applying mutations in reverse to return to the previous state. For View Transitions, since a snapshot is already frozen, we can freeze the screen while we're waiting for the font at no extra cost. It does mean that the page isn't responsive during this time but we should only block this for a short period anyway.

The timeout 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 - or you're on an extremely fast connection. This case is for optimizing the high end experience.

Before:

before.mov

After:

after.mov

Note that since the Navigation is blocked on the font now the browser spinner shows up while the font is loading.

[react-sizebot]

Comparing: fd9cfa4...5adec1b

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	+0.11%	1.83 kB	1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	513.98 kB	513.98 kB	=	91.79 kB	91.79 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	+0.16%	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	+0.15%	547.19 kB	548.01 kB	+0.16%	97.36 kB	97.51 kB
facebook-www/ReactDOM-prod.classic.js	=	595.86 kB	595.86 kB	=	104.88 kB	104.88 kB
facebook-www/ReactDOM-prod.modern.js	=	586.29 kB	586.29 kB	=	103.32 kB	103.32 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 20b4976

[rickhanlonii]

sick