From c7c49b2587c1f8b04ee519b0c93921d0ae569638 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Wed, 17 May 2023 16:59:54 +0000
Subject: [PATCH] use timer for debounce

---
 .../src/components/WidgetsBrowser/index.jsx   | 54 ++++++++++---------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/packages/app/src/components/WidgetsBrowser/index.jsx b/packages/app/src/components/WidgetsBrowser/index.jsx
index c878852b..1f460ad3 100644
--- a/packages/app/src/components/WidgetsBrowser/index.jsx
+++ b/packages/app/src/components/WidgetsBrowser/index.jsx
@@ -14,6 +14,8 @@ export const WidgetBrowser = (props) => {
 
     const [searchValue, setSearchValue] = React.useState("")
 
+    let timer = null
+
     const handleOnSearch = (e) => {
         // not allow to input space as first character
         if (e.target.value[0] === " ") {
@@ -21,19 +23,19 @@ export const WidgetBrowser = (props) => {
         }
 
         setSearchValue(e.target.value)
-    }
 
-    React.useEffect(() => {
-        const timer = setTimeout(async () => {
+        timer = setTimeout(async () => {
+            if (timer) {
+                clearTimeout(timer)
+            }
+
             await M_Widgets({
                 keywords: {
-                    name: searchValue
+                    name: e.target.value
                 }
             })
         }, 400)
-
-        return () => clearTimeout(timer)
-    }, [searchValue])
+    }
 
     if (E_Widgets) {
         console.error(E_Widgets)
@@ -62,24 +64,26 @@ export const WidgetBrowser = (props) => {
 
         {
             !L_Widgets && R_Widgets.map((widget, index) => {
-                return <WidgetItemPreview
-                    index={index}
-                    manifest={widget.manifest}
-                    onRemove={() => {
-                        app.cores.widgets.uninstall(widget._id)
-                    }}
-                    onInstall={() => {
-                        app.cores.widgets.install(widget._id)
-                    }}
-                    onUpdate={() => {
-                        app.cores.widgets.install(widget._id, {
-                            update: true,
-                        })
-                    }}
-                    onChangeVisible={(visible) => {
-                        app.cores.widgets.toogleVisibility(widget._id, visible)
-                    }}
-                />
+                return <React.Fragment>
+                    <WidgetItemPreview
+                        index={index}
+                        manifest={widget.manifest}
+                        onRemove={() => {
+                            app.cores.widgets.uninstall(widget._id)
+                        }}
+                        onInstall={() => {
+                            app.cores.widgets.install(widget._id)
+                        }}
+                        onUpdate={() => {
+                            app.cores.widgets.install(widget._id, {
+                                update: true,
+                            })
+                        }}
+                        onChangeVisible={(visible) => {
+                            app.cores.widgets.toogleVisibility(widget._id, visible)
+                        }}
+                    />
+                </React.Fragment>
             })
         }
         {