From 05eaef84bbbd1fb851880e3a8d8faeaf1e8960b1 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Mon, 24 Mar 2025 15:17:12 +0800
Subject: [PATCH] fix: cancel marketplace debounced search when clear search
 keywords (#16614)

---
 web/app/components/plugins/marketplace/context.tsx | 4 +++-
 web/app/components/plugins/marketplace/hooks.ts    | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/app/components/plugins/marketplace/context.tsx b/web/app/components/plugins/marketplace/context.tsx
index cba3835513..47da7ee160 100644
--- a/web/app/components/plugins/marketplace/context.tsx
+++ b/web/app/components/plugins/marketplace/context.tsx
@@ -143,6 +143,7 @@ export const MarketplaceContextProvider = ({
     resetPlugins,
     queryPlugins,
     queryPluginsWithDebounced,
+    cancelQueryPluginsWithDebounced,
     isLoading: isPluginsLoading,
   } = useMarketplacePlugins()
 
@@ -209,12 +210,13 @@ export const MarketplaceContextProvider = ({
 
   const handleQuery = useCallback((debounced?: boolean) => {
     if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
+      cancelQueryPluginsWithDebounced()
       handleQueryMarketplaceCollectionsAndPlugins()
       return
     }
 
     handleQueryPlugins(debounced)
-  }, [handleQueryMarketplaceCollectionsAndPlugins, handleQueryPlugins])
+  }, [handleQueryMarketplaceCollectionsAndPlugins, handleQueryPlugins, cancelQueryPluginsWithDebounced])
 
   const handleSearchPluginTextChange = useCallback((text: string) => {
     setSearchPluginText(text)
diff --git a/web/app/components/plugins/marketplace/hooks.ts b/web/app/components/plugins/marketplace/hooks.ts
index 83a6709a47..c581ee0d91 100644
--- a/web/app/components/plugins/marketplace/hooks.ts
+++ b/web/app/components/plugins/marketplace/hooks.ts
@@ -89,7 +89,7 @@ export const useMarketplacePlugins = () => {
     handleUpdatePlugins(pluginsSearchParams)
   }, [handleUpdatePlugins])
 
-  const { run: queryPluginsWithDebounced } = useDebounceFn((pluginsSearchParams: PluginsSearchParams) => {
+  const { run: queryPluginsWithDebounced, cancel: cancelQueryPluginsWithDebounced } = useDebounceFn((pluginsSearchParams: PluginsSearchParams) => {
     handleUpdatePlugins(pluginsSearchParams)
   }, {
     wait: 500,
@@ -101,6 +101,7 @@ export const useMarketplacePlugins = () => {
     resetPlugins,
     queryPlugins,
     queryPluginsWithDebounced,
+    cancelQueryPluginsWithDebounced,
     isLoading: isPending,
   }
 }