From 98ddd92b46b7da180e9d892df4b06fb9e5d2606f Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Mon, 30 Jan 2023 11:40:29 +1300
Subject: [PATCH] Add debounce to border radius update in global styles to
 improve performance

---
 .../edit-site/src/components/global-styles/border-panel.js  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
index 07e6254e4b34ee..9780ad2dfdd011 100644
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -14,6 +14,7 @@ import {
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { debounce } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -117,6 +118,9 @@ export default function BorderPanel( { name, variation = '' } ) {
 		`${ prefix }border.radius`,
 		name
 	);
+
+	const debouncedSetBorderRadius = debounce( setBorderRadius, 5 );
+
 	const hasBorderRadius = () => {
 		const borderValues = userBorderStyles?.radius;
 		if ( typeof borderValues === 'object' ) {
@@ -205,7 +209,7 @@ export default function BorderPanel( { name, variation = '' } ) {
 					<BorderRadiusControl
 						values={ borderRadiusValues }
 						onChange={ ( value ) => {
-							setBorderRadius( value || undefined );
+							debouncedSetBorderRadius( value || undefined );
 						} }
 					/>
 				</ToolsPanelItem>