Added loading icon so user knows when new page is loading

Added test for finding lists when limited to type

5 files changed, 23 insertions, 5 deletions

diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 3c98c1e097f..2f4e9067340 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -10,14 +10,13 @@
     data () {
       return {
         scrollOffset: 250,
-        loadingMore: false,
         filters: BoardsStore.state.filters
       };
     },
     watch: {
       filters: {
         handler () {
-          this.loadingMore = false;
+          this.list.loadingMore = false;
           this.$els.list.scrollTop = 0;
         },
         deep: true
@@ -34,12 +33,12 @@
         return this.$els.list.scrollTop + this.listHeight();
       },
       loadNextPage () {
-        this.loadingMore = true;
         const getIssues = this.list.nextPage();
 
         if (getIssues) {
+          this.list.loadingMore = true;
           getIssues.then(() => {
-            this.loadingMore = false;
+            this.list.loadingMore = false;
           });
         }
       },
@@ -71,7 +70,7 @@
 
       // Scroll event on list to load more
       this.$els.list.onscroll = () => {
-        if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.loadingMore) {
+        if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.list.loadingMore) {
           this.loadNextPage();
         }
       };
diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6
index e5b8f9cd227..928663971e6 100644
--- a/app/assets/javascripts/boards/models/list.js.es6
+++ b/app/assets/javascripts/boards/models/list.js.es6
@@ -7,6 +7,7 @@ class List {
     this.filters = BoardsStore.state.filters;
     this.page = 1;
     this.loading = true;
+    this.loadingMore = false;
     this.issues = [];
 
     if (obj.label) {
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 7a58b0578ea..c9f2efcd766 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -133,6 +133,11 @@
   }
 }
 
+.board-header-loading-spinner {
+  margin-right: 10px;
+  color: $gray-darkest;
+}
+
 .board-inner-container {
   border-bottom: 1px solid $border-color;
   padding: $gl-padding;
diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index 49eec056920..e30a8f50c35 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -18,6 +18,7 @@
               ":list" => "list" }
               %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click" => "deleteBoard" }
                 = icon("trash")
+          = icon("spinner spin", class: "board-header-loading-spinner pull-right", "v-show" => "list.loadingMore")
       .board-inner-container.board-search-container{ "v-if" => "list.canSearch()" }
         %input.form-control{ type: "text", placeholder: "Search issues", "v-model" => "query", "debounce" => "250" }
         = icon("search", class: "board-search-icon", "v-show" => "!query")
diff --git a/spec/javascripts/boards/boards_store_spec.js.es6 b/spec/javascripts/boards/boards_store_spec.js.es6
index d48fd337bc7..c185fd71c0d 100644
--- a/spec/javascripts/boards/boards_store_spec.js.es6
+++ b/spec/javascripts/boards/boards_store_spec.js.es6
@@ -46,6 +46,18 @@
         expect(list).toBeDefined();
       });
 
+      it('finds list limited by type', () => {
+        BoardsStore.addList({
+          id: 1,
+          position: 0,
+          title: 'Test',
+          list_type: 'backlog'
+        });
+        const list = BoardsStore.findList('id', 1, 'backlog');
+
+        expect(list).toBeDefined();
+      });
+
       it('gets issue when new list added', (done) => {
         BoardsStore.addList(listObj);
         const list = BoardsStore.findList('id', 1);