From d8a25dc0f387b792230c4ee70e16fa4882037cf4 Mon Sep 17 00:00:00 2001 From: adisposkofh Date: Mon, 22 Jun 2026 14:58:18 +0200 Subject: [PATCH] debouncing and aborting coodle participants search --- .../CoodleSurvey/CoodleSurveyParticipants.js | 34 ++++++++++++------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/public/js/components/Cis/Coodle/Components/CoodleSurvey/CoodleSurveyParticipants.js b/public/js/components/Cis/Coodle/Components/CoodleSurvey/CoodleSurveyParticipants.js index 9121a396f..c8466d31d 100644 --- a/public/js/components/Cis/Coodle/Components/CoodleSurvey/CoodleSurveyParticipants.js +++ b/public/js/components/Cis/Coodle/Components/CoodleSurvey/CoodleSurveyParticipants.js @@ -1,5 +1,7 @@ import CoodleApi from "../../../../../api/factory/coodle.js"; +import { debounce } from "../../../../../helpers/DebounceHelper.js"; + export default { name: "CoodleSurveyParticipants", components: {}, @@ -102,6 +104,26 @@ export default { type: "user", }, ], + searchParticipantsAbortController: null, + searchParticipants: debounce(async () => { + if (this.searchInput.length < 2) return; + + if (this.searchParticipantsAbortController) + this.searchParticipantsAbortController.abort(); + this.searchParticipantsAbortController = new AbortController(); + + this.isSearchingForParticipants = true; + + // todo: delete comment + // this.searchResults = this.searchResultsDevExample; + const participantsSearchResponse = await this.$api.call( + CoodleApi.searchParticipants(this.searchInput), + { signal: this.searchParticipantsAbortController.signal }, + ); + this.searchResults = participantsSearchResponse.data; + + this.isSearchingForParticipants = false; + }, 300), }; }, computed: { @@ -131,18 +153,6 @@ export default { this.areSearchResultsShown = false; }, 100); }, - async searchParticipants() { - if (this.searchInput.length < 2) return; - - this.isSearchingForParticipants = true; - - // todo: delete comment - // this.searchResults = this.searchResultsDevExample; - const participantsSearchResponse = await this.$api.call(CoodleApi.searchParticipants(this.searchInput)); - this.searchResults = participantsSearchResponse.data; - - this.isSearchingForParticipants = false; - }, selectSearchResult(searchResult) { if ( searchResult.type === "group" &&