SONAR-6972 improve loading UX of administration pages

3 files changed, 17 insertions, 4 deletions

diff --git a/server/sonar-web/src/main/js/apps/permission-templates/header.js b/server/sonar-web/src/main/js/apps/permission-templates/header.js
index 0325d4bf6cb..eb367d830bf 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/header.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/header.js
@@ -9,10 +9,18 @@ export default React.createClass({
     }).render();
   },
 
+  renderSpinner () {
+    if (this.props.ready) {
+      return null;
+    }
+    return <i className="spinner"/>;
+  },
+
   render() {
     return (
         <header id="project-permissions-header" className="page-header">
           <h1 className="page-title">{window.t('permission_templates.page')}</h1>
+          {this.renderSpinner()}
           <div className="page-actions">
             <button onClick={this.onCreate}>Create</button>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/main.js b/server/sonar-web/src/main/js/apps/permission-templates/main.js
index 1a0abfc8ead..5032bef5547 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/main.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/main.js
@@ -12,7 +12,7 @@ export default React.createClass({
   },
 
   getInitialState() {
-    return { permissions: [], permissionTemplates: [] };
+    return { ready: false, permissions: [], permissionTemplates: [] };
   },
 
   componentDidMount() {
@@ -53,6 +53,7 @@ export default React.createClass({
       let permissionTemplates = this.mergePermissionsToTemplates(r.permissionTemplates, permissions);
       let permissionTemplatesWithDefaults = this.mergeDefaultsToTemplates(permissionTemplates, r.defaultTemplates);
       this.setState({
+        ready: true,
         permissionTemplates: permissionTemplatesWithDefaults,
         permissions: permissions
       });
@@ -62,10 +63,10 @@ export default React.createClass({
   render() {
     return (
         <div className="page">
-          <Header
-              refresh={this.requestPermissions}/>
+          <Header ready={this.state.ready} refresh={this.requestPermissions}/>
 
           <PermissionTemplates
+              ready={this.state.ready}
               permissionTemplates={this.state.permissionTemplates}
               permissions={this.state.permissions}
               topQualifiers={this.props.topQualifiers}
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/permission-templates.js b/server/sonar-web/src/main/js/apps/permission-templates/permission-templates.js
index a86379e256d..030fec04c2f 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/permission-templates.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/permission-templates.js
@@ -1,7 +1,10 @@
+import classNames from 'classnames';
 import React from 'react';
+
 import PermissionsHeader from './permissions-header';
 import PermissionTemplate from './permission-template';
 
+
 export default React.createClass({
   propTypes:{
     permissionTemplates: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
@@ -18,8 +21,9 @@ export default React.createClass({
           topQualifiers={this.props.topQualifiers}
           refresh={this.props.refresh}/>;
     });
+    let className = classNames('data zebra', { 'new-loading': !this.props.ready });
     return (
-        <table id="permission-templates" className="data zebra">
+        <table id="permission-templates" className={className}>
           <PermissionsHeader permissions={this.props.permissions}/>
           <tbody>{permissionTemplates}</tbody>
         </table>