Add delay for range and form controls user event record

MAILPOET-6365

packages/js/email-editor/src/components/styles-sidebar/panels/dimensions-panel.tsx

@@ -12,7 +12,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { isEqual } from 'lodash';
 import { useEmailStyles } from '../../../hooks';
-import { recordEvent } from '../../../events';
+import { recordEvent, debouncedRecordEvent } from '../../../events';
 
 export function DimensionsPanel() {
 	const [ availableUnits ] = useSettings( 'spacing.units' ) as [ string[] ];
@@ -56,7 +56,7 @@ export function DimensionsPanel() {
 					values={ styles.spacing.padding }
 					onChange={ ( value ) => {
 						updateStyleProp( [ 'spacing', 'padding' ], value );
-						recordEvent(
+						debouncedRecordEvent(
 							'styles_sidebar_screen_layout_dimensions_padding_updated',
 							{ value }
 						);
@@ -95,7 +95,7 @@ export function DimensionsPanel() {
 					min={ 0 }
 					onChange={ ( value ) => {
 						updateStyleProp( [ 'spacing', 'blockGap' ], value.top );
-						recordEvent(
+						debouncedRecordEvent(
 							'styles_sidebar_screen_layout_dimensions_block_spacing_updated',
 							{ value }
 						);

packages/js/email-editor/src/components/styles-sidebar/panels/typography-element-panel.tsx

@@ -24,7 +24,7 @@ import {
 } from '@wordpress/components';
 import { useEmailStyles } from '../../../hooks';
 import { getElementStyles } from '../utils';
-import { recordEvent } from '../../../events';
+import { recordEvent, debouncedRecordEvent } from '../../../events';
 
 export const DEFAULT_CONTROLS = {
 	fontFamily: true,
@@ -112,7 +112,7 @@ export function TypographyElementPanel( {
 
 	const setLetterSpacing = ( newValue ) => {
 		updateElementStyleProp( [ 'typography', 'letterSpacing' ], newValue );
-		recordEvent(
+		debouncedRecordEvent(
 			'styles_sidebar_screen_typography_element_panel_set_letter_spacing',
 			{
 				element,
@@ -124,7 +124,7 @@ export function TypographyElementPanel( {
 
 	const setLineHeight = ( newValue ) => {
 		updateElementStyleProp( [ 'typography', 'lineHeight' ], newValue );
-		recordEvent(
+		debouncedRecordEvent(
 			'styles_sidebar_screen_typography_element_panel_set_line_height',
 			{
 				element,
@@ -136,7 +136,7 @@ export function TypographyElementPanel( {
 
 	const setFontSize = ( newValue ) => {
 		updateElementStyleProp( [ 'typography', 'fontSize' ], newValue );
-		recordEvent(
+		debouncedRecordEvent(
 			'styles_sidebar_screen_typography_element_panel_set_font_size',
 			{
 				element,
@@ -149,7 +149,7 @@ export function TypographyElementPanel( {
 
 	const setFontFamily = ( newValue ) => {
 		updateElementStyleProp( [ 'typography', 'fontFamily' ], newValue );
-		recordEvent(
+		debouncedRecordEvent(
 			'styles_sidebar_screen_typography_element_panel_set_font_family',
 			{
 				element,
@@ -161,7 +161,7 @@ export function TypographyElementPanel( {
 
 	const setTextDecoration = ( newValue ) => {
 		updateElementStyleProp( [ 'typography', 'textDecoration' ], newValue );
-		recordEvent(
+		debouncedRecordEvent(
 			'styles_sidebar_screen_typography_element_panel_set_text_decoration',
 			{
 				element,
@@ -174,7 +174,7 @@ export function TypographyElementPanel( {
 
 	const setTextTransform = ( newValue ) => {
 		updateElementStyleProp( [ 'typography', 'textTransform' ], newValue );
-		recordEvent(
+		debouncedRecordEvent(
 			'styles_sidebar_screen_typography_element_panel_set_text_transform',
 			{
 				element,
@@ -190,7 +190,7 @@ export function TypographyElementPanel( {
 	} ) => {
 		updateElementStyleProp( [ 'typography', 'fontStyle' ], newFontStyle );
 		updateElementStyleProp( [ 'typography', 'fontWeight' ], newFontWeight );
-		recordEvent(
+		debouncedRecordEvent(
 			'styles_sidebar_screen_typography_element_panel_set_font_appearance',
 			{
 				element,

packages/js/email-editor/src/events/event-pipeline.ts

@@ -1,3 +1,4 @@
+import { debounce } from 'lodash';
 import { applyFilters } from '@wordpress/hooks';
 
 const isEventTrackingEnabled = applyFilters(
@@ -52,9 +53,12 @@ const recordEventOnce = ( function () {
 	};
 } )();
 
+const debouncedRecordEvent = debounce( recordEvent, 700 ); // wait 700 milliseconds. The average human reaction speed time is around 250 ms, added some delay for mouse move and keyboard press
+
 export {
 	recordEvent,
 	recordEventOnce,
+	debouncedRecordEvent,
 	EMAIL_STRING,
 	dispatcher,
 	isEventTrackingEnabled,

packages/js/email-editor/src/events/index.ts

@@ -1,2 +1,6 @@
-export { recordEvent, recordEventOnce } from './event-pipeline';
+export {
+	recordEvent,
+	recordEventOnce,
+	debouncedRecordEvent,
+} from './event-pipeline';
 export * from './event-collector';