From 539d384960d82e30dbefa9a13c8e7e24f772ed1f Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Fri, 3 Jul 2026 15:05:17 +0200
Subject: [PATCH 1/2] Show skeleton placeholder while previews loads.

---
 packages/global-styles-ui/src/preview-wrapper.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/global-styles-ui/src/preview-wrapper.tsx b/packages/global-styles-ui/src/preview-wrapper.tsx
index 5f80e658aa3fd0..38b00ef849fa97 100644
--- a/packages/global-styles-ui/src/preview-wrapper.tsx
+++ b/packages/global-styles-ui/src/preview-wrapper.tsx
@@ -13,6 +13,7 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { useLayoutEffect, useState } from '@wordpress/element';
+import { Skeleton } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -101,6 +102,15 @@ function PreviewWrapper( {
 			<div style={ { position: 'relative' } }>
 				{ containerResizeListener }
 			</div>
+			{ ! isReady && (
+				// Match the preview aspect ratio so layout doesn't jump once width is measured.
+				<Skeleton
+					className="global-styles-ui-preview__wrapper"
+					style={ {
+						aspectRatio: `${ normalizedWidth } / ${ normalizedHeight }`,
+					} }
+				/>
+			) }
 			{ isReady && (
 				<div
 					className={ clsx( 'global-styles-ui-preview__wrapper', {

From 7f58ef414c4e33b17af8f72690f60080f446fb27 Mon Sep 17 00:00:00 2001
From: Juanfra Aldasoro <juanfraa@gmail.com>
Date: Wed, 8 Jul 2026 13:19:12 +0200
Subject: [PATCH 2/2] Update packages/global-styles-ui/src/preview-wrapper.tsx

Co-authored-by: Lena Morita <lena@jaguchi.com>
---
 packages/global-styles-ui/src/preview-wrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/global-styles-ui/src/preview-wrapper.tsx b/packages/global-styles-ui/src/preview-wrapper.tsx
index 38b00ef849fa97..4fa4a9577fa237 100644
--- a/packages/global-styles-ui/src/preview-wrapper.tsx
+++ b/packages/global-styles-ui/src/preview-wrapper.tsx
@@ -107,7 +107,7 @@ function PreviewWrapper( {
 				<Skeleton
 					className="global-styles-ui-preview__wrapper"
 					style={ {
-						aspectRatio: `${ normalizedWidth } / ${ normalizedHeight }`,
+						aspectRatio: normalizedWidth / normalizedHeight,
 					} }
 				/>
 			) }