[skip ci] add loading indicator when saving users

app/assets/javascripts/vue_sidebar_assignees/components/assignee_title.js

 export default {
   name: 'AssigneeTitle',
   props: {
+    loading: { type: Boolean, required: true },
     numberOfAssignees: { type: Number, required: true },
   },
   computed: {
@@ -16,7 +17,7 @@ export default {
       <template v-else>
         Assignee
       </template>
-      <i aria-hidden="true" class="fa fa-spinner fa-spin block-loading" style="display: none;"></i>
+      <i aria-hidden="true" class="fa fa-spinner fa-spin block-loading" :class="{ hidden: !loading }"></i>
       <a class="edit-link pull-right" href="#">Edit</a>
     </div>
   `,

app/assets/javascripts/vue_sidebar_assignees/components/multiple_assignees.js

@@ -27,7 +27,7 @@ export default {
     'show-more-assignees': ShowMoreAssignees,
   },
   template: `
-    <div class="value hide-collapsed">
+    <div class="hide-collapsed">
       <div class="hide-collapsed">
         <div class="user-list">
           <div class="user-item" v-for="(user, index) in assignees.users" v-if="showMore || (index < 5 && !showMore)">

app/assets/javascripts/vue_sidebar_assignees/components/no_assignee.js

@@ -9,7 +9,7 @@ export default {
     }
   },
   template: `
-    <div class="value hide-collapsed">
+    <div class="hide-collapsed">
       <span class="assign-yourself no-value">
         No assignee -
         <button type="button" class="btn-link" @click="assignSelf">

app/assets/javascripts/vue_sidebar_assignees/components/single_assignee.js

@@ -9,7 +9,7 @@ export default {
     },
   },
   template: `
-    <div class="value hide-collapsed">
+    <div class="hide-collapsed">
       <a class="author_link bold" :href="'/' + user.username">
         <img width="32" class="avatar avatar-inline s32" alt="" :src="user.avatarUrl">
         <span class="author">{{user.name}}</span>

app/assets/javascripts/vue_sidebar_assignees/index.js

@@ -50,8 +50,8 @@ const sidebarAssigneesOptions = () => ({
   },
   template: `
     <div class="sidebar-assignees">
-      <assignee-title :numberOfAssignees="assignees.users.length" />
-      <component :is="componentName" :assignees="assignees" :class="{ hidden: hideComponent }" />
+      <assignee-title :numberOfAssignees="assignees.users.length" :loading="assignees.loading" />
+      <component class="value" :is="componentName" :assignees="assignees" :class="{ hidden: hideComponent }" />
     </div>
   `,
 });

app/assets/javascripts/vue_sidebar_assignees/stores/sidebar_assignees_store.js

@@ -4,6 +4,7 @@ export default class SidebarAssigneesStore {
     this.service = service;
     this.users = [];
     this.saved = true;
+    this.loading = false;
   }
 
   addUser(id, name, username, avatarUrl, saved) {
@@ -31,6 +32,7 @@ export default class SidebarAssigneesStore {
   saveUsers() {
     const ids = this.users.map((u) => u.id) || 0;
 
+    this.loading = true;
     this.service.update(ids.length > 0 ? ids : 0)
       .then((response) => {
           const data = response.data;
@@ -42,9 +44,11 @@ export default class SidebarAssigneesStore {
             this.addUser(assignee.id, assignee.name, assignee.username, assignee.avatar_url, true);
           }
           this.saved = true;
+          this.loading = false;
         }).catch((err) => {
           console.log(err);
           console.log('error');
+          this.loading = false;
         });
   }
 }
\ No newline at end of file