Font library: Add skeleton loader for the font preview images

packages/global-styles-ui/CHANGELOG.md

@@ -32,6 +32,7 @@
 ### Enhancements
 
 -   Add a `showBlockStateControls` prop to `GlobalStylesUI`, defaulting to `true`, which hides the state controls for blocks when set to `false` ([#80956](https://github.com/WordPress/gutenberg/pull/80956)).
+-   Font Library: Add a skeleton loader for the font preview images ([#81047](https://github.com/WordPress/gutenberg/pull/81047)).
 
 ## 1.19.0 (2026-07-29)
 

packages/global-styles-ui/src/font-library/font-demo.tsx

@@ -1,12 +1,18 @@
+import clsx from 'clsx';
 import { useContext, useEffect, useState, useRef } from '@wordpress/element';
 import type { FontFamily, FontFace } from '@wordpress/core-data';
+import { Skeleton } from '@wordpress/ui';
 import { FontLibraryContext } from './context';
 import {
 	getFacePreviewStyle,
 	getFamilyPreviewStyle,
 } from './utils/preview-styles';
 import type { FontDemoProps } from './types';
 
+// Previews already loaded this session, so reopening the library doesn't flash
+// a placeholder for images the browser already has.
+const loadedPreviews = new Set< string >();
+
 function getPreviewUrl( fontFace: FontFace ): string | undefined {
 	if ( fontFace.preview ) {
 		return fontFace.preview;
@@ -52,13 +58,28 @@ function FontDemo( { font, text }: FontDemoProps ) {
 	text = text || ( 'name' in font ? font.name : '' );
 	const customPreviewUrl = font.preview;
 
+	const previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );
+	const isPreviewImage = Boolean(
+		previewUrl && /\.(png|jpg|jpeg|gif|svg)$/i.test( previewUrl )
+	);
+
 	const [ isIntersecting, setIsIntersecting ] = useState< boolean >( false );
-	const [ isAssetLoaded, setIsAssetLoaded ] = useState< boolean >( false );
+	const [ isFontLoaded, setIsFontLoaded ] = useState< boolean >( false );
+	const [ resolvedUrl, setResolvedUrl ] = useState< string >();
 	const { loadFontFaceAsset } = useContext( FontLibraryContext );
 
-	const previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );
-	const isPreviewImage =
-		previewUrl && previewUrl.match( /\.(png|jpg|jpeg|gif|svg)$/i );
+	// The same component instance gets reused for different fonts, so the
+	// loaded state is tracked per URL.
+	const isAssetLoaded = isPreviewImage
+		? !! previewUrl &&
+		  ( loadedPreviews.has( previewUrl ) || resolvedUrl === previewUrl )
+		: isFontLoaded;
+
+	// The previews scale with the label, so estimate ~12px per character.
+	const estimatedImageWidth = Math.min(
+		Math.max( text.length * 12, 48 ),
+		300
+	);
 
 	const faceStyles = getFacePreviewStyle( fontFace );
 	const textDemoStyle = {
@@ -70,36 +91,60 @@ function FontDemo( { font, text }: FontDemoProps ) {
 	};
 
 	useEffect( () => {
+		// Image previews are lazy loaded by the browser, so only font files
+		// need the viewport check.
+		if ( isPreviewImage ) {
+			return;
+		}
 		const observer = new window.IntersectionObserver( ( [ entry ] ) => {
 			setIsIntersecting( entry.isIntersecting );
 		}, {} );
 		if ( ref.current ) {
 			observer.observe( ref.current );
 		}
 		return () => observer.disconnect();
-	}, [ ref ] );
+	}, [ isPreviewImage ] );
 
 	useEffect( () => {
 		const loadAsset = async () => {
-			if ( isIntersecting ) {
-				if ( ! isPreviewImage && fontFace.src ) {
+			if ( isIntersecting && ! isPreviewImage ) {
+				if ( fontFace.src ) {
 					await loadFontFaceAsset( fontFace );
 				}
-				setIsAssetLoaded( true );
+				setIsFontLoaded( true );
 			}
 		};
 		loadAsset();
 	}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );
 
 	return (
-		<div ref={ ref }>
+		<div ref={ ref } className="font-library__font-demo">
 			{ isPreviewImage ? (
-				<img
-					src={ previewUrl }
-					loading="lazy"
-					alt={ text }
-					className="font-library__font-variant_demo-image"
-				/>
+				<>
+					{ ! isAssetLoaded && (
+						<Skeleton
+							className="font-library__font-variant-demo-skeleton"
+							style={ { width: estimatedImageWidth } }
+						/>
+					) }
+					<img
+						src={ previewUrl }
+						loading="lazy"
+						alt={ text }
+						onLoad={ () => {
+							if ( previewUrl ) {
+								loadedPreviews.add( previewUrl );
+							}
+							setResolvedUrl( previewUrl );
+						} }
+						// Also on failure, otherwise skeleton will pulse forever.
+						onError={ () => setResolvedUrl( previewUrl ) }
+						className={ clsx(
+							'font-library__font-variant_demo-image',
+							{ 'is-loading': ! isAssetLoaded }
+						) }
+					/>
+				</>
 			) : (
 				<span
 					style={ textDemoStyle }

packages/global-styles-ui/src/font-library/style.scss

@@ -116,6 +116,11 @@ $footer-height: 90px;
 	margin-bottom: 0;
 }
 
+.font-library__font-demo {
+	// Anchors the image while it's out of flow during loading.
+	position: relative;
+}
+
 .font-library__font-card {
 	box-sizing: border-box;
 	border: variables.$border-width solid colors.$gray-300;
@@ -148,6 +153,26 @@ $footer-height: 90px;
 		display: block;
 		height: variables.$grid-unit-30;
 		width: auto;
+
+		@media not (prefers-reduced-motion) {
+			transition:
+				opacity var(--wpds-motion-duration-lg)
+				var(--wpds-motion-easing-subtle);
+		}
+
+		// Hidden while loading, but still rendered, since `display: none`
+		// would stop the lazy image from loading.
+		&.is-loading {
+			position: absolute;
+			top: 0;
+			left: 0;
+			opacity: 0;
+		}
+	}
+
+	.font-library__font-variant-demo-skeleton {
+		height: variables.$grid-unit-30;
+		border-radius: var(--wpds-border-radius-sm);
 	}
 
 	.font-library__font-variant_demo-text {