From 501d6d7c16822ab9e8d7d60b95e20de6a64ae73e Mon Sep 17 00:00:00 2001
From: Siarhei Karol <skarol@ebsco.com>
Date: Tue, 10 Dec 2024 17:53:53 +0500
Subject: [PATCH] debounce user input

---
 src/components/EditSection/EditSection.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/EditSection/EditSection.tsx b/src/components/EditSection/EditSection.tsx
index ccbd4c84..da41ece8 100644
--- a/src/components/EditSection/EditSection.tsx
+++ b/src/components/EditSection/EditSection.tsx
@@ -1,4 +1,5 @@
-import { useEffect, memo } from 'react';
+import { useEffect, memo, useRef } from 'react';
+import { debounce } from 'lodash';
 import classNames from 'classnames';
 import { saveRecordLocally } from '@common/helpers/record.helper';
 import { PROFILE_BFIDS } from '@common/constants/bibframe.constants';
@@ -8,10 +9,12 @@ import { Fields } from '@components/Fields';
 import { Prompt } from '@components/Prompt';
 import { useContainerEvents } from '@common/hooks/useContainerEvents';
 import { useServicesContext } from '@common/hooks/useServicesContext';
-import { renderDrawComponent } from './renderDrawComponent';
-import './EditSection.scss';
 import { useRecordGeneration } from '@common/hooks/useRecordGeneration';
 import { useInputsState, useProfileState, useStatusState, useUIState } from '@src/store';
+import { renderDrawComponent } from './renderDrawComponent';
+import './EditSection.scss';
+
+const USER_INPUT_DELAY = 750;
 
 export const EditSection = memo(() => {
   const { selectedEntriesService } = useServicesContext() as Required<ServicesParams>;
@@ -45,10 +48,16 @@ export const EditSection = memo(() => {
     return () => clearInterval(autoSaveRecord);
   }, [isEdited, userValues]);
 
+  const debouncedAddUserValues = useRef(
+    debounce((value: UserValues) => {
+      addUserValues?.(value);
+    }, USER_INPUT_DELAY),
+  ).current;
+
   const onChange = (uuid: string, contents: Array<UserValueContents>) => {
     if (!isEdited) setIsEdited(true);
 
-    addUserValues?.({
+    debouncedAddUserValues({
       [uuid]: {
         uuid,
         contents,