Show loading icon when changing filter in add issues modal

Closes #29615

app/assets/javascripts/boards/components/modal/filters.js

@@ -15,7 +15,7 @@ export default {
     this.filteredSearch = new FilteredSearchBoards(this.store);
     this.filteredSearch.removeTokens();
   },
-  beforeDestroy() {
+  destroyed() {
     this.filteredSearch.cleanup();
     FilteredSearchContainer.container = document;
     this.store.path = '';

app/assets/javascripts/boards/components/modal/index.js

@@ -65,8 +65,15 @@ require('./empty_state');
       },
       filter: {
         handler() {
+          if (this.$el.tagName) {
             this.page = 1;
-          this.loadIssues(true);
+            this.filterLoading = true;
+
+            this.loadIssues(true)
+              .then(() => {
+                this.filterLoading = false;
+              });
+          }
         },
         deep: true,
       },
@@ -140,14 +147,14 @@ require('./empty_state');
             :image="blankStateImage"
             :issue-link-base="issueLinkBase"
             :root-path="rootPath"
-            v-if="!loading && showList"></modal-list>
+            v-if="!loading && showList && !filterLoading"></modal-list>
           <empty-state
             v-if="showEmptyState"
             :image="blankStateImage"
             :new-issue-path="newIssuePath"></empty-state>
           <section
             class="add-issues-list text-center"
-            v-if="loading">
+            v-if="loading || filterLoading">
             <div class="add-issues-list-loading">
               <i class="fa fa-spinner fa-spin"></i>
             </div>

app/assets/javascripts/boards/stores/modal_store.js

@@ -15,6 +15,7 @@
         searchTerm: '',
         loading: false,
         loadingNewPage: false,
+        filterLoading: false,
         page: 1,
         perPage: 50,
         filter: {

changelogs/unreleased/add-issue-modal-loading-indicator.yml

+---
+title: Shows loading icon in issue boards modal when changing filters
+merge_request:
+author: