summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSimon Knox <psimyn@gmail.com>2017-05-17 19:50:40 +1000
committerSimon Knox <psimyn@gmail.com>2017-05-24 21:19:50 +1000
commit6b8fac9de471646b36a822e2b18e1b3a97965288 (patch)
tree1e7621e2b2b76a582187fa75d6cdc943d8077a70
parente07c75513db023672b7042869f46ee35753cfd34 (diff)
downloadgitlab-ce-6b8fac9de471646b36a822e2b18e1b3a97965288.tar.gz
add loading spinner to sidebar assignees32170-assignees-spinner
store isFetching state to indicate if assignees has initial data
-rw-r--r--app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js3
-rw-r--r--app/assets/javascripts/sidebar/stores/sidebar_store.js4
-rw-r--r--app/views/shared/issuable/_sidebar_assignees.html.haml3
-rw-r--r--spec/javascripts/sidebar/sidebar_assignees_spec.js12
-rw-r--r--spec/javascripts/sidebar/sidebar_store_spec.js5
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);
});