add loading spinner to sidebar assignees

store isFetching state to indicate if assignees has initial data

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js

@@ -69,10 +69,11 @@ export default {
     <div>
       <assignee-title
         :number-of-assignees="store.assignees.length"
-        :loading="loading"
+        :loading="loading || store.isFetching.assignees"
         :editable="store.editable"
       />
       <assignees
+        v-if="!store.isFetching.assignees"
         class="value"
         :root-path="store.rootPath"
         :users="store.assignees"

app/assets/javascripts/sidebar/stores/sidebar_store.js

@@ -10,6 +10,9 @@ export default class SidebarStore {
       this.humanTimeEstimate = '';
       this.humanTimeSpent = '';
       this.assignees = [];
+      this.isFetching = {
+        assignees: true,
+      };
 
       SidebarStore.singleton = this;
     }
@@ -18,6 +21,7 @@ export default class SidebarStore {
   }
 
   setAssigneeData(data) {
+    this.isFetching.assignees = false;
     if (data.assignees) {
       this.assignees = data.assignees;
     }

app/views/shared/issuable/_sidebar_assignees.html.haml

@@ -1,5 +1,8 @@
 - if issuable.is_a?(Issue)
   #js-vue-sidebar-assignees{ data: { field: "#{issuable.to_ability_name}[assignee_ids]" } }
+    .title.hide-collapsed
+      Assignee
+      = icon('spinner spin')
 - else
   .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee.name if issuable.assignee) }
     - if issuable.assignee

spec/javascripts/sidebar/sidebar_assignees_spec.js

@@ -43,4 +43,16 @@ describe('sidebar assignees', () => {
     expect(SidebarMediator.prototype.assignYourself).toHaveBeenCalled();
     expect(this.mediator.store.assignees.length).toEqual(1);
   });
+
+  it('hides assignees until fetched', (done) => {
+    component = new SidebarAssigneeComponent().$mount(this.sidebarAssigneesEl);
+    const currentAssignee = this.sidebarAssigneesEl.querySelector('.value');
+    expect(currentAssignee).toBe(null);
+
+    component.store.isFetching.assignees = false;
+    Vue.nextTick(() => {
+      expect(component.$el.querySelector('.value')).toBeVisible();
+      done();
+    });
+  });
 });

spec/javascripts/sidebar/sidebar_store_spec.js

@@ -35,6 +35,10 @@ describe('Sidebar store', () => {
     SidebarStore.singleton = null;
   });
 
+  it('has default isFetching values', () => {
+    expect(this.store.isFetching.assignees).toBe(true);
+  });
+
   it('adds a new assignee', () => {
     this.store.addAssignee(assignee);
     expect(this.store.assignees.length).toEqual(1);
@@ -67,6 +71,7 @@ describe('Sidebar store', () => {
     };
 
     this.store.setAssigneeData(users);
+    expect(this.store.isFetching.assignees).toBe(false);
     expect(this.store.assignees.length).toEqual(3);
   });