add loading spinner to sidebar assignees32170-assignees-spinner

store isFetching state to indicate if assignees has initial data

5 files changed, 26 insertions, 1 deletions

diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
index 1488a66c695..da4abf0b68f 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
+++ b/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"
diff --git a/app/assets/javascripts/sidebar/stores/sidebar_store.js b/app/assets/javascripts/sidebar/stores/sidebar_store.js
index 2d44c05bb8d..3356dd0191f 100644
--- a/app/assets/javascripts/sidebar/stores/sidebar_store.js
+++ b/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;
     }
diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml
index e9ce7b7ce9c..26567c08eb6 100644
--- a/app/views/shared/issuable/_sidebar_assignees.html.haml
+++ b/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
diff --git a/spec/javascripts/sidebar/sidebar_assignees_spec.js b/spec/javascripts/sidebar/sidebar_assignees_spec.js
index 865951b2ad7..929ba75e67d 100644
--- a/spec/javascripts/sidebar/sidebar_assignees_spec.js
+++ b/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();
+    });
+  });
 });
diff --git a/spec/javascripts/sidebar/sidebar_store_spec.js b/spec/javascripts/sidebar/sidebar_store_spec.js
index 29facf483b5..b3fa156eb64 100644
--- a/spec/javascripts/sidebar/sidebar_store_spec.js
+++ b/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);
   });