#730 - Added debounce

CHANGELOG.md

@@ -14,6 +14,7 @@
 
 - [#721](https://github.com/estruyf/vscode-front-matter/issues/721): Fix keywords regex to support unicode characters
 - [#725](https://github.com/estruyf/vscode-front-matter/issues/725): Fix for opening menu of pinned items
+- [#730](https://github.com/estruyf/vscode-front-matter/issues/730): Add debounce to the input fields
 
 ## [9.4.0] - 2023-12-12 - [Release notes](https://beta.frontmatter.codes/updates/v9.4.0)
 

src/panelWebView/components/Fields/TextField.tsx

@@ -10,6 +10,7 @@ import { messageHandler } from '@estruyf/vscode/dist/client';
 import { CommandToCode } from '../../CommandToCode';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { useDebounce } from '../../../hooks/useDebounce';
 
 export interface ITextFieldProps extends BaseFieldProps<string> {
   singleLine: boolean | undefined;
@@ -39,10 +40,10 @@ export const TextField: React.FunctionComponent<ITextFieldProps> = ({
   const [, setRequiredFields] = useRecoilState(RequiredFieldsAtom);
   const [text, setText] = React.useState<string | null>(value);
   const [loading, setLoading] = React.useState<boolean>(false);
+  const debouncedValue = useDebounce<string | null>(text, 500);
 
   const onTextChange = (txtValue: string) => {
     setText(txtValue);
-    onChange(txtValue);
   };
 
   let isValid = true;
@@ -121,6 +122,12 @@ export const TextField: React.FunctionComponent<ITextFieldProps> = ({
     }
   }, [value]);
 
+  useEffect(() => {
+    if (debouncedValue !== value) {
+      onChange(debouncedValue || '');
+    }
+  }, [debouncedValue]);
+
   return (
     <div className={`metadata_field`}>
       {