Improvement :home page search updated to support live search ,without clicking enter button (#1850)

* bugfix: fixing search homepage to allow seaching while typing

* bugfix : debouncing search

frontend/src/HomePage/Header.jsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useCallback } from 'react'
 import { SearchBox } from '@/_components/SearchBox';
 import { Button, ButtonGroup, Dropdown } from 'react-bootstrap';
+import { debounce } from 'lodash';
 
 export default function Header({
   folderName,
@@ -13,6 +14,9 @@ export default function Header({
   showTemplateLibraryModal,
   fileInput,
 }) {
+  const debouncedChangeHandler = useCallback(
+    debounce(onSearchSubmit, 300)
+  , []);
   return (
     <div className="row">
       <div className="col-4">
@@ -20,7 +24,7 @@ export default function Header({
       </div>
 
       <div className="col-8 ms-auto d-print-none d-flex flex-row justify-content-end">
-        <SearchBox onSubmit={onSearchSubmit} />
+        <SearchBox onSubmit={debouncedChangeHandler} />
         {canCreateApp() && (
           <>
             <label className="btn btn-default d-none d-lg-inline mb-3 ms-2" onChange={handleImportApp}>

frontend/src/_components/SearchBox.jsx

@@ -6,12 +6,8 @@ export function SearchBox({ onSubmit }) {
 
   const handleChange = (e) => {
     setSearchText(e.target.value);
-  };
-
-  const trackEnterKey = (e) => {
-    if (e.key === 'Enter') {
-      onSubmit(searchText);
-    }
+    onSubmit(e.target.value);
+    
   };
 
   return (
@@ -38,7 +34,6 @@ export function SearchBox({ onSubmit }) {
         <input
           type="text"
           value={searchText}
-          onKeyDown={trackEnterKey}
           onChange={handleChange}
           className="form-control"
           placeholder="Search"