Fix search debounce for Swimlanes board assignees

app/assets/javascripts/boards/components/board_assignee_dropdown.vue

@@ -39,50 +39,51 @@ export default {
   data() {
     return {
       search: '',
-      participants: [],
+      issueParticipants: [],
       selected: [],
     };
   },
   apollo: {
-    participants: {
-      query() {
-        return this.isSearchEmpty ? getIssueParticipants : searchUsers;
-      },
+    issueParticipants: {
+      query: getIssueParticipants,
       variables() {
-        if (this.isSearchEmpty) {
-          return {
-            id: `gid://gitlab/Issue/${this.activeIssue.iid}`,
-          };
-        }
-
         return {
-          search: this.search,
+          id: `gid://gitlab/Issue/${this.activeIssue.iid}`,
         };
       },
       update(data) {
-        if (this.isSearchEmpty) {
-          return data.issue?.participants?.nodes || [];
-        }
-
-        return data.users?.nodes || [];
+        return data.issue?.participants?.nodes || [];
       },
-      debounce() {
-        const { noSearchDelay, searchDelay } = this.$options;
-
-        return this.isSearchEmpty ? noSearchDelay : searchDelay;
+    },
+    searchUsers: {
+      query: searchUsers,
+      variables() {
+        return {
+          search: this.search,
+        };
       },
+      update: (data) => data.users?.nodes || [],
+      skip() {
+        return this.isSearchEmpty;
+      },
+      debounce: 250,
     },
   },
   computed: {
     ...mapGetters(['activeIssue']),
     ...mapState(['isSettingAssignees']),
+    participants() {
+      return this.isSearchEmpty ? this.issueParticipants : this.searchUsers;
+    },
     assigneeText() {
       return n__('Assignee', '%d Assignees', this.selected.length);
     },
     unSelectedFiltered() {
-      return this.participants.filter(({ username }) => {
-        return !this.selectedUserNames.includes(username);
-      });
+      return (
+        this.participants?.filter(({ username }) => {
+          return !this.selectedUserNames.includes(username);
+        }) || []
+      );
     },
     selectedIsEmpty() {
       return this.selected.length === 0;
@@ -96,6 +97,11 @@ export default {
     currentUser() {
       return gon?.current_username;
     },
+    isLoading() {
+      return (
+        this.$apollo.queries.issueParticipants?.loading || this.$apollo.queries.searchUsers?.loading
+      );
+    },
   },
   created() {
     this.selected = cloneDeep(this.activeIssue.assignees);
@@ -147,7 +153,7 @@ export default {
           <gl-search-box-by-type v-model.trim="search" />
         </template>
         <template #items>
-          <gl-loading-icon v-if="$apollo.queries.participants.loading" size="lg" />
+          <gl-loading-icon v-if="isLoading" size="lg" />
           <template v-else>
             <gl-dropdown-item
               :is-checked="selectedIsEmpty"

ee/changelogs/unreleased/300272-on-swimlanes-board-assignees-search-debounce-is-not-working.yml

+---
+title: Fix search debounce for Swimlanes board assignees
+merge_request: 52786
+author:
+type: fixed

spec/frontend/boards/components/board_assignee_dropdown_spec.js

@@ -38,7 +38,7 @@ describe('BoardCardAssigneeDropdown', () => {
         return {
           search,
           selected: [],
-          participants,
+          issueParticipants: participants,
         };
       },
       store,
@@ -49,7 +49,7 @@ describe('BoardCardAssigneeDropdown', () => {
       mocks: {
         $apollo: {
           queries: {
-            participants: {
+            searchUsers: {
               loading,
             },
           },
@@ -70,7 +70,6 @@ describe('BoardCardAssigneeDropdown', () => {
         return {
           search,
           selected: [],
-          participants,
         };
       },
       store,
@@ -256,17 +255,15 @@ describe('BoardCardAssigneeDropdown', () => {
     },
   );
 
-  describe('when participants is loading', () => {
-    beforeEach(() => {
-      createComponent('', true);
-    });
-
+  describe('when searching users is loading', () => {
     it('finds a loading icon in the dropdown', () => {
+      createComponent('test', true);
+
       expect(findLoadingIcon().exists()).toBe(true);
     });
   });
 
-  describe('when participants is loading is false', () => {
+  describe('when participants loading is false', () => {
     beforeEach(() => {
       createComponent();
     });