From 6094b306dc759ffc0cea7c7cb0193d11bc9f1fa2 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 17 Mar 2017 11:12:11 +0000
Subject: [PATCH] Show loading icon when changing filter in add issues modal

Closes #29615
---
 .../boards/components/modal/filters.js            |  2 +-
 .../javascripts/boards/components/modal/index.js  | 15 +++++++++++----
 .../javascripts/boards/stores/modal_store.js      |  1 +
 .../add-issue-modal-loading-indicator.yml         |  4 ++++
 4 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 changelogs/unreleased/add-issue-modal-loading-indicator.yml

diff --git a/app/assets/javascripts/boards/components/modal/filters.js b/app/assets/javascripts/boards/components/modal/filters.js
index bd394a2318c..9cbb2100c9a 100644
--- a/app/assets/javascripts/boards/components/modal/filters.js
+++ b/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 = '';
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index 4240c97617d..1af31c99107 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -64,8 +64,15 @@ require('./empty_state');
       },
       filter: {
         handler() {
-          this.page = 1;
-          this.loadIssues(true);
+          if (this.$el.tagName) {
+            this.page = 1;
+            this.filterLoading = true;
+
+            this.loadIssues(true)
+              .then(() => {
+                this.filterLoading = false;
+              });
+          }
         },
         deep: true,
       },
@@ -139,14 +146,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>
diff --git a/app/assets/javascripts/boards/stores/modal_store.js b/app/assets/javascripts/boards/stores/modal_store.js
index 7ee266a831f..9b009483a3c 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js
+++ b/app/assets/javascripts/boards/stores/modal_store.js
@@ -15,6 +15,7 @@
         searchTerm: '',
         loading: false,
         loadingNewPage: false,
+        filterLoading: false,
         page: 1,
         perPage: 50,
         filter: {
diff --git a/changelogs/unreleased/add-issue-modal-loading-indicator.yml b/changelogs/unreleased/add-issue-modal-loading-indicator.yml
new file mode 100644
index 00000000000..5398399c018
--- /dev/null
+++ b/changelogs/unreleased/add-issue-modal-loading-indicator.yml
@@ -0,0 +1,4 @@
+---
+title: Shows loading icon in issue boards modal when changing filters
+merge_request:
+author: