From d1ac56801e31b70cbaeb250e5ef783ff21213728 Mon Sep 17 00:00:00 2001
From: Lunny Xiao <xiaolunwen@gmail.com>
Date: Sun, 22 Feb 2026 19:36:59 -0800
Subject: [PATCH] Use exist debounce lib

---
 .../components/projects/ProjectWorkflow.vue   | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/web_src/js/components/projects/ProjectWorkflow.vue b/web_src/js/components/projects/ProjectWorkflow.vue
index 09086479131..3590787afb9 100644
--- a/web_src/js/components/projects/ProjectWorkflow.vue
+++ b/web_src/js/components/projects/ProjectWorkflow.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import {onMounted, onUnmounted, useTemplateRef, computed, ref, nextTick, watch} from 'vue';
+import {debounce} from 'throttle-debounce';
 import {createWorkflowStore} from './WorkflowStore.ts';
 import type {WorkflowEvent} from './WorkflowStore.ts';
 import {svg} from '../../svg.ts';
@@ -340,16 +341,8 @@ const workflowList = computed<WorkflowListItem[]>(() => {
   }));
 });
 
-// Add debounce mechanism
-let selectTimeout: ReturnType<typeof setTimeout> | null = null;
-
 const selectWorkflowItem = async (item: WorkflowListItem) => {
-  // Prevent rapid successive clicks with debounce
-  if (store.loading || selectTimeout) return;
-
-  selectTimeout = setTimeout(() => {
-    selectTimeout = null;
-  }, 300);
+  if (store.loading) return;
 
   previousSelection.value = null; // Clear previous selection when manually selecting
   // Don't reset edit mode when switching - each workflow keeps its own state
@@ -375,6 +368,10 @@ const selectWorkflowItem = async (item: WorkflowListItem) => {
   }
 };
 
+const debouncedSelectWorkflowItem = debounce(150, (item: WorkflowListItem) => {
+  void selectWorkflowItem(item);
+});
+
 const hasAvailableFilters = computed(() => {
   return (store.selectedWorkflow?.capabilities?.availableFilters?.length ?? 0) > 0;
 });
@@ -522,7 +519,9 @@ onMounted(async () => {
         if (itemData) {
           try {
             const item = JSON.parse(itemData) as WorkflowListItem;
-            void selectWorkflowItem(item);
+            if (!store.loading) {
+              debouncedSelectWorkflowItem(item);
+            }
           } catch (error) {
             console.error('Error parsing workflow item data:', error);
           }
@@ -610,10 +609,7 @@ let workflowClickHandler: ((e: MouseEvent) => void) | null = null;
 
 onUnmounted(() => {
   // Clean up resources
-  if (selectTimeout) {
-    clearTimeout(selectTimeout);
-    selectTimeout = null;
-  }
+  debouncedSelectWorkflowItem.cancel();
   window.removeEventListener('popstate', popstateHandler);
 
   // Remove native click event listener