add loading spinner to sidebar assignees32170-assignees-spinner

store isFetching state to indicate if assignees has initial data

2 files changed, 17 insertions, 0 deletions

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);
   });