fix: cancel marketplace debounced search when clear search keywords (#16614)

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)

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,
   }
 }