Add debounce to border radius update in global styles to improve perf…

…ormance
WordPress · Jan 29, 2023 · 872d53c · 872d53c
1 parent b97255d
commit 872d53c
Showing 1 changed file with 5 additions and 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
@@ -14,6 +14,7 @@ import {
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { debounce } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -119,6 +120,9 @@ export default function BorderPanel( { name, variationPath = '' } ) {
 		`${ variationPath }border.radius`,
 		name
 	);
+
+	const debouncedSetBorderRadius = debounce( setBorderRadius, 5 );
+
 	const hasBorderRadius = () => {
 		const borderValues = userBorderStyles?.radius;
 		if ( typeof borderValues === 'object' ) {
@@ -207,7 +211,7 @@ export default function BorderPanel( { name, variationPath = '' } ) {
 					<BorderRadiusControl
 						values={ borderRadiusValues }
 						onChange={ ( value ) => {
-							setBorderRadius( value || undefined );
+							debouncedSetBorderRadius( value || undefined );
 						} }
 					/>
 				</ToolsPanelItem>