Added loading icon to boards vue app

app/assets/javascripts/boards/boards_bundle.js.es6

@@ -11,7 +11,6 @@ $(function () {
   if (!window.gl) {
     window.gl = {};
   }
-  gl.boardService = new BoardService($('#board-app').data('endpoint'));
 
   if (gl.IssueBoardsApp) {
     gl.IssueBoardsApp.$destroy(true);
@@ -20,14 +19,20 @@ $(function () {
   gl.IssueBoardsApp = new Vue({
     el: '#board-app',
     props: {
-      disabled: Boolean
+      disabled: Boolean,
+      endpoint: String
     },
     data: {
-      state: BoardsStore.state
+      state: BoardsStore.state,
+      loading: true
     },
     init: function () {
       BoardsStore.create();
     },
+    created: function () {
+      this.loading = true;
+      gl.boardService = new BoardService(this.endpoint);
+    },
     ready: function () {
       BoardsStore.disabled = this.disabled;
       gl.boardService.all()
@@ -45,6 +50,7 @@ $(function () {
           });
 
           BoardsStore.addBlankState();
+          this.loading = false;
         });
     }
   });

app/assets/stylesheets/pages/boards.scss

@@ -71,6 +71,11 @@
   }
 }
 
+.boards-app-loading {
+  width: 100%;
+  font-size: 34px;
+}
+
 .boards-list {
   display: -webkit-flex;
   display: flex;

app/views/projects/boards/show.html.haml

@@ -10,6 +10,8 @@
 
 = render 'shared/issuable/filter', type: :boards
 
-.boards-list#board-app{ "data-endpoint" => "#{namespace_project_board_path(@project.namespace, @project)}",
+.boards-list#board-app{ ":endpoint" => "'#{namespace_project_board_path(@project.namespace, @project)}'",
   ":disabled" => "#{current_user.nil?}" }
+  .boards-app-loading.text-center{ "v-if" => "loading" }
+    = icon("spinner spin")
   = render "projects/boards/components/board"