Commit 6b8fac9d authored by Simon Knox's avatar Simon Knox

add loading spinner to sidebar assignees

store isFetching state to indicate if assignees has initial data
parent e07c7551
...@@ -69,10 +69,11 @@ export default { ...@@ -69,10 +69,11 @@ export default {
<div> <div>
<assignee-title <assignee-title
:number-of-assignees="store.assignees.length" :number-of-assignees="store.assignees.length"
:loading="loading" :loading="loading || store.isFetching.assignees"
:editable="store.editable" :editable="store.editable"
/> />
<assignees <assignees
v-if="!store.isFetching.assignees"
class="value" class="value"
:root-path="store.rootPath" :root-path="store.rootPath"
:users="store.assignees" :users="store.assignees"
......
...@@ -10,6 +10,9 @@ export default class SidebarStore { ...@@ -10,6 +10,9 @@ export default class SidebarStore {
this.humanTimeEstimate = ''; this.humanTimeEstimate = '';
this.humanTimeSpent = ''; this.humanTimeSpent = '';
this.assignees = []; this.assignees = [];
this.isFetching = {
assignees: true,
};
SidebarStore.singleton = this; SidebarStore.singleton = this;
} }
...@@ -18,6 +21,7 @@ export default class SidebarStore { ...@@ -18,6 +21,7 @@ export default class SidebarStore {
} }
setAssigneeData(data) { setAssigneeData(data) {
this.isFetching.assignees = false;
if (data.assignees) { if (data.assignees) {
this.assignees = data.assignees; this.assignees = data.assignees;
} }
......
- if issuable.is_a?(Issue) - if issuable.is_a?(Issue)
#js-vue-sidebar-assignees{ data: { field: "#{issuable.to_ability_name}[assignee_ids]" } } #js-vue-sidebar-assignees{ data: { field: "#{issuable.to_ability_name}[assignee_ids]" } }
.title.hide-collapsed
Assignee
= icon('spinner spin')
- else - else
.sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee.name if issuable.assignee) } .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee.name if issuable.assignee) }
- if issuable.assignee - if issuable.assignee
......
...@@ -43,4 +43,16 @@ describe('sidebar assignees', () => { ...@@ -43,4 +43,16 @@ describe('sidebar assignees', () => {
expect(SidebarMediator.prototype.assignYourself).toHaveBeenCalled(); expect(SidebarMediator.prototype.assignYourself).toHaveBeenCalled();
expect(this.mediator.store.assignees.length).toEqual(1); 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();
});
});
}); });
...@@ -35,6 +35,10 @@ describe('Sidebar store', () => { ...@@ -35,6 +35,10 @@ describe('Sidebar store', () => {
SidebarStore.singleton = null; SidebarStore.singleton = null;
}); });
it('has default isFetching values', () => {
expect(this.store.isFetching.assignees).toBe(true);
});
it('adds a new assignee', () => { it('adds a new assignee', () => {
this.store.addAssignee(assignee); this.store.addAssignee(assignee);
expect(this.store.assignees.length).toEqual(1); expect(this.store.assignees.length).toEqual(1);
...@@ -67,6 +71,7 @@ describe('Sidebar store', () => { ...@@ -67,6 +71,7 @@ describe('Sidebar store', () => {
}; };
this.store.setAssigneeData(users); this.store.setAssigneeData(users);
expect(this.store.isFetching.assignees).toBe(false);
expect(this.store.assignees.length).toEqual(3); expect(this.store.assignees.length).toEqual(3);
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment