use timer for debounce

This commit is contained in:
SrGooglo 2023-05-17 16:59:54 +00:00
parent 6694e0e334
commit c7c49b2587

View File

@ -14,6 +14,8 @@ export const WidgetBrowser = (props) => {
const [searchValue, setSearchValue] = React.useState("") const [searchValue, setSearchValue] = React.useState("")
let timer = null
const handleOnSearch = (e) => { const handleOnSearch = (e) => {
// not allow to input space as first character // not allow to input space as first character
if (e.target.value[0] === " ") { if (e.target.value[0] === " ") {
@ -21,19 +23,19 @@ export const WidgetBrowser = (props) => {
} }
setSearchValue(e.target.value) setSearchValue(e.target.value)
timer = setTimeout(async () => {
if (timer) {
clearTimeout(timer)
} }
React.useEffect(() => {
const timer = setTimeout(async () => {
await M_Widgets({ await M_Widgets({
keywords: { keywords: {
name: searchValue name: e.target.value
} }
}) })
}, 400) }, 400)
}
return () => clearTimeout(timer)
}, [searchValue])
if (E_Widgets) { if (E_Widgets) {
console.error(E_Widgets) console.error(E_Widgets)
@ -62,7 +64,8 @@ export const WidgetBrowser = (props) => {
{ {
!L_Widgets && R_Widgets.map((widget, index) => { !L_Widgets && R_Widgets.map((widget, index) => {
return <WidgetItemPreview return <React.Fragment>
<WidgetItemPreview
index={index} index={index}
manifest={widget.manifest} manifest={widget.manifest}
onRemove={() => { onRemove={() => {
@ -80,6 +83,7 @@ export const WidgetBrowser = (props) => {
app.cores.widgets.toogleVisibility(widget._id, visible) app.cores.widgets.toogleVisibility(widget._id, visible)
}} }}
/> />
</React.Fragment>
}) })
} }
{ {