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 {
<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"
......
......@@ -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;
}
......
- 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
......
......@@ -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();
});
});
});
......@@ -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);
});
......
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