Add debounce on claim input

massalabs · May 16, 2024 · 9191111 · 9191111
1 parent e368d2c
commit 9191111
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -26,6 +26,7 @@
     "eslint-plugin-html": "^8.1.1",
     "eslint-plugin-import": "^2.29.1",
     "husky": "^9.0.11",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tw-colors": "^3.3.1",
@@ -34,6 +35,7 @@
   },
   "devDependencies": {
     "@types/dot-object": "^2.1.6",
+    "@types/lodash": "^4.17.1",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

diff --git a/frontend/src/components/InputWithRightText.tsx b/frontend/src/components/InputWithRightText.tsx
@@ -1,12 +1,21 @@
 import { InputMessage, InputProps } from '@massalabs/react-ui-kit';
+import { debounce } from 'lodash';
 
 export interface InputWithRightTextProps extends InputProps {
   rightText: string;
 }
 
 export function InputWithRightText(props: InputWithRightTextProps) {
-  const { error, warning, success, disable, customClass, rightText, ...rest } =
-    props;
+  const {
+    error,
+    warning,
+    success,
+    onChange,
+    disable,
+    customClass,
+    rightText,
+    ...rest
+  } = props;
 
   const disabledClass = disable ? 'border-0' : '';
   const errorClass = error ? 'border-s-error' : '';
@@ -15,6 +24,10 @@ export function InputWithRightText(props: InputWithRightTextProps) {
   const messageClass =
     errorClass || warningClass || successClass || disabledClass;
 
+  let debouncedOnChange = onChange;
+  if (onChange) {
+    debouncedOnChange = debounce(onChange, 350);
+  }
   return (
     <div className="flex-row">
       <div className="grid-cols-2">
@@ -24,6 +37,7 @@ export function InputWithRightText(props: InputWithRightTextProps) {
             className={`w-full default-input h-12 pl-3 pr-10 mb-1 ${messageClass} ${customClass}`}
             type="text"
             disabled={disable}
+            onChange={debouncedOnChange}
             {...rest}
           />
         </div>