fix: cys assembler font loading optimisations (#40458)

* fix: cys assembler font loading optimisations

* lint

plugins/woocommerce-admin/client/customize-store/assembler-hub/index.tsx

@@ -45,6 +45,7 @@ import { addFilter } from '@wordpress/hooks';
 import { CustomizeStoreComponent } from '../types';
 import { Layout } from './layout';
 import './style.scss';
+import { PreloadFonts } from './preload-fonts';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 
@@ -149,6 +150,7 @@ export const AssemblerHub: CustomizeStoreComponent = ( props ) => {
 					<RouterProvider>
 						<Layout />
 					</RouterProvider>
+					<PreloadFonts />
 				</GlobalStylesProvider>
 			</ShortcutProvider>
 		</CustomizeStoreContext.Provider>

plugins/woocommerce-admin/client/customize-store/assembler-hub/preload-fonts.tsx

@@ -0,0 +1,33 @@
+/**
+ * Internal dependencies
+ */
+import { FONT_PAIRINGS } from './sidebar/global-styles/font-pairing-variations/constants';
+import { FontFamiliesLoader } from './sidebar/global-styles/font-pairing-variations/font-families-loader';
+
+export const PreloadFonts = () => {
+	const allFontChoices = FONT_PAIRINGS.map(
+		( fontPair ) => fontPair?.settings?.typography?.fontFamilies?.theme
+	);
+	const fontFamilies = allFontChoices.map( ( fontPair ) => {
+		return [
+			...fontPair.map( ( font ) => {
+				return {
+					...font,
+					name: font.fontFamily,
+				};
+			} ),
+		];
+	} );
+
+	return (
+		<>
+			{ fontFamilies.map( ( fontPair ) => (
+				<FontFamiliesLoader
+					fontFamilies={ fontPair }
+					key={ fontPair.map( ( font ) => font.slug ).join( '-' ) }
+					preload
+				/>
+			) ) }
+		</>
+	);
+};

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader.tsx

@@ -15,14 +15,21 @@ export type FontFamily = {
 type Props = {
 	fontFamilies: FontFamily[];
 	onLoad?: () => void;
+	preload?: boolean;
 };
 
 // See https://developers.google.com/fonts/docs/css2
 const FONT_API_BASE = 'https://fonts-api.wp.com/css2';
+// this is the actual host that the .woff files are at, the above is the one for the .css files with the @font-face declarations
+const FONT_HOST = 'https://fonts.wp.com'; // used for preconnecting so that fonts can get loaded faster
 
 const FONT_AXIS = 'ital,wght@0,400;0,700;1,400;1,700';
 
-export const FontFamiliesLoader = ( { fontFamilies, onLoad }: Props ) => {
+export const FontFamiliesLoader = ( {
+	fontFamilies,
+	onLoad,
+	preload = false,
+}: Props ) => {
 	const params = useMemo(
 		() =>
 			new URLSearchParams( [
@@ -31,8 +38,14 @@ export const FontFamiliesLoader = ( { fontFamilies, onLoad }: Props ) => {
 					`${ fontFamily }:${ FONT_AXIS }`,
 				] ),
 				[ 'display', 'swap' ],
+				[
+					'text', // optimise the fonts fetched by subsetting to only the characters used in the display
+					`${ fontFamilies
+						.map( ( { fontFamily } ) => fontFamily )
+						.join( ' ' ) }`,
+				],
 			] ),
-		fontFamilies
+		[ fontFamilies ]
 	);
 
 	if ( ! params.getAll( 'family' ).length ) {
@@ -40,12 +53,16 @@ export const FontFamiliesLoader = ( { fontFamilies, onLoad }: Props ) => {
 	}
 
 	return (
-		<link
-			rel="stylesheet"
-			type="text/css"
-			href={ `${ FONT_API_BASE }?${ params }` }
-			onLoad={ onLoad }
-			onError={ onLoad }
-		/>
+		<>
+			{ preload ? <link rel="preconnect" href={ FONT_HOST } /> : null }
+			<link
+				rel={ preload ? 'preload' : 'stylesheet' }
+				type="text/css"
+				as={ preload ? 'style' : undefined }
+				href={ `${ FONT_API_BASE }?${ params }` }
+				onLoad={ onLoad }
+				onError={ onLoad }
+			/>
+		</>
 	);
 };

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx

@@ -19,6 +19,10 @@ export const FontPairing = () => {
 			columns={ 2 }
 			gap={ 3 }
 			className="woocommerce-customize-store_font-pairing-container"
+			style={ {
+				opacity: 0,
+				animation: 'containerFadeIn 1000ms ease-in-out forwards',
+			} }
 		>
 			{ FONT_PAIRINGS.map( ( variation, index ) => (
 				<VariationContainer key={ index } variation={ variation }>

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/preview.tsx

@@ -11,7 +11,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useResizeObserver, useViewportMatch } from '@wordpress/compose';
-import { useMemo, useState } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import {
 	privateApis as blockEditorPrivateApis,
 	// @ts-ignore no types exist yet.
@@ -19,13 +19,12 @@ import {
 // @ts-ignore No types for this exist yet.
 import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
 import { GlobalStylesVariationIframe } from '../global-styles-variation-iframe';
-import { FontFamiliesLoader, FontFamily } from './font-families-loader';
+import { FontFamily } from './font-families-loader';
 import {
 	FONT_PREVIEW_LARGE_WIDTH,
 	FONT_PREVIEW_LARGE_HEIGHT,
 	FONT_PREVIEW_WIDTH,
 	FONT_PREVIEW_HEIGHT,
-	SYSTEM_FONT_SLUG,
 } from './constants';
 
 const { useGlobalStyle, useGlobalSetting } = unlock( blockEditorPrivateApis );
@@ -75,10 +74,6 @@ export const FontPairingVariationPreview = () => {
 		: FONT_PREVIEW_HEIGHT;
 	const ratio = width ? width / defaultWidth : 1;
 	const normalizedHeight = Math.ceil( defaultHeight * ratio );
-	const externalFontFamilies = fontFamilies.filter(
-		( { slug } ) => slug !== SYSTEM_FONT_SLUG
-	);
-	const [ isLoaded, setIsLoaded ] = useState( ! externalFontFamilies.length );
 	const getFontFamilyName = ( targetFontFamily: string ) => {
 		const fontFamily = fontFamilies.find(
 			( { fontFamily: _fontFamily } ) => _fontFamily === targetFontFamily
@@ -96,8 +91,6 @@ export const FontPairingVariationPreview = () => {
 		[ headingFontFamily, fontFamilies ]
 	);
 
-	const handleOnLoad = () => setIsLoaded( true );
-
 	return (
 		<GlobalStylesVariationIframe
 			width={ width }
@@ -118,7 +111,7 @@ export const FontPairingVariationPreview = () => {
 						style={ {
 							height: '100%',
 							overflow: 'hidden',
-							opacity: isLoaded ? 1 : 0,
+							opacity: 1,
 						} }
 					>
 						<HStack
@@ -166,10 +159,6 @@ export const FontPairingVariationPreview = () => {
 						</HStack>
 					</div>
 				</div>
-				<FontFamiliesLoader
-					fontFamilies={ externalFontFamilies }
-					onLoad={ handleOnLoad }
-				/>
 			</>
 		</GlobalStylesVariationIframe>
 	);

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx

@@ -39,7 +39,13 @@ const SidebarNavigationScreenColorPaletteContent = () => {
 	// rendering the iframe. Without this, the iframe previews will not render
 	// in mobile viewport sizes, where the editor canvas is hidden.
 	return (
-		<div className="woocommerce-customize-store_sidebar-color-content">
+		<div
+			className="woocommerce-customize-store_sidebar-color-content"
+			style={ {
+				opacity: 0,
+				animation: 'containerFadeIn 1000ms ease-in-out forwards',
+			} }
+		>
 			<BlockEditorProvider
 				settings={ storedSettings }
 				onChange={ noop }

plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss

@@ -43,6 +43,16 @@
 	}
 }
 
+@keyframes containerFadeIn {
+	0%,
+	80% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
 .woocommerce-profile-wizard__step-assemblerHub {
 	a {
 		text-decoration: none;

plugins/woocommerce/changelog/fix-cys-assembler-hub-font-jankiness

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+CYS: Optimised loading and animation of font variation containers