feat(searchbar): add lodash debounce mechanism in searchbar

Signed-off-by: Senthil Athiban <[email protected]>

Author: senthil-athiban

package-lock.json

@@ -46,6 +46,7 @@
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
+    "@types/lodash": "^4.17.7",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
@@ -106,5 +107,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   }
 }

package.json

@@ -1,6 +1,7 @@
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { Theme, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
-import React from 'react';
+import debounce from 'lodash/debounce';
+import React, { useCallback } from 'react';
 import { ClickAwayListener } from '../base/ClickAwayListener';
 import { TextField } from '../base/TextField';
 import { CloseIcon, SearchIcon } from '../icons';
@@ -75,11 +76,22 @@ function SearchBar({
   const searchRef = React.useRef<HTMLInputElement | null>(null);
   const theme = useTheme();
 
+  // Debounce the onSearch function
+  const debouncedOnSearch = useCallback(
+    debounce((value) => {
+      onSearch(value);
+    }, 300),
+    [onSearch]
+  );
+
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setSearchText(event.target.value);
+    const value = event.target.value;
+    setSearchText(value);
+    debouncedOnSearch(value);
   };
 
   const handleClearIconClick = (): void => {
+    debouncedOnSearch('');
     setSearchText('');
     setExpanded(false);
     if (onClear) {
@@ -89,6 +101,7 @@ function SearchBar({
 
   const handleSearchIconClick = (): void => {
     if (expanded) {
+      debouncedOnSearch('');
       setSearchText('');
       setExpanded(false);
     } else {
@@ -101,12 +114,6 @@ function SearchBar({
     }
   };
 
-  // const handleClickAway = (): void => {
-  //   if (expanded) {
-  //     setExpanded(false);
-  //   }
-  // };
-
   return (
     <ClickAwayListener
       onClickAway={(event) => {
@@ -125,10 +132,7 @@ function SearchBar({
           <TextField
             variant="standard"
             value={searchText}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              handleSearchChange(e);
-              onSearch(e.target.value);
-            }}
+            onChange={handleSearchChange} // Updated to use the new handler
             inputRef={searchRef}
             placeholder={placeholder}
             style={{