SONAR-6972 improve loading UX of administration pages

3 files changed, 28 insertions, 1 deletions

diff --git a/server/sonar-web/src/main/js/apps/users/header-view.js b/server/sonar-web/src/main/js/apps/users/header-view.js
index 66e5df75b1a..85140d2ef7a 100644
--- a/server/sonar-web/src/main/js/apps/users/header-view.js
+++ b/server/sonar-web/src/main/js/apps/users/header-view.js
@@ -5,10 +5,23 @@ import Template from './templates/users-header.hbs';
 export default Marionette.ItemView.extend({
   template: Template,
 
+  collectionEvents: {
+    'request': 'showSpinner',
+    'sync': 'hideSpinner'
+  },
+
   events: {
     'click #users-create': 'onCreateClick'
   },
 
+  showSpinner: function () {
+    this.$('.spinner').removeClass('hidden');
+  },
+
+  hideSpinner: function () {
+    this.$('.spinner').addClass('hidden');
+  },
+
   onCreateClick: function (e) {
     e.preventDefault();
     this.createUser();
diff --git a/server/sonar-web/src/main/js/apps/users/list-view.js b/server/sonar-web/src/main/js/apps/users/list-view.js
index 699e9c76a85..22f699697e9 100644
--- a/server/sonar-web/src/main/js/apps/users/list-view.js
+++ b/server/sonar-web/src/main/js/apps/users/list-view.js
@@ -3,7 +3,20 @@ import ListItemView from './list-item-view';
 
 export default Marionette.CollectionView.extend({
   tagName: 'ul',
-  childView: ListItemView
+  childView: ListItemView,
+
+  collectionEvents: {
+    'request': 'showLoading',
+    'sync': 'hideLoading'
+  },
+
+  showLoading: function () {
+    this.$el.addClass('new-loading');
+  },
+
+  hideLoading: function () {
+    this.$el.removeClass('new-loading');
+  }
 });
 
 
diff --git a/server/sonar-web/src/main/js/apps/users/templates/users-header.hbs b/server/sonar-web/src/main/js/apps/users/templates/users-header.hbs
index e3560039288..66dff8a39b6 100644
--- a/server/sonar-web/src/main/js/apps/users/templates/users-header.hbs
+++ b/server/sonar-web/src/main/js/apps/users/templates/users-header.hbs
@@ -1,5 +1,6 @@
 <header class="page-header">
   <h1 class="page-title">{{t 'users.page'}}</h1>
+  <i class="spinner hidden"></i>
   <div class="page-actions">
     <div class="button-group">
       <button id="users-create">Create User</button>