Add loaders to users-permissions HP

packages/strapi-plugin-users-permissions/admin/src/components/EditForm/index.js

@@ -8,6 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 
+import LoadingIndicator from 'components/LoadingIndicator';
 import Input from 'components/InputsIndex';
 
 import styles from './styles.scss';
@@ -25,6 +26,14 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta
   )
 
   render() {
+    if (this.props.showLoaders) {
+      return (
+        <div className={styles.editForm}>
+          <LoadingIndicator />
+        </div>
+      );
+    }
+    
     return (
       <div className={styles.editForm}>
         <div className="row">
@@ -94,6 +103,7 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta
 
 EditForm.propTypes = {
   onChange: PropTypes.func.isRequired,
+  showLoaders: PropTypes.bool.isRequired,
   values: PropTypes.object.isRequired,
 };
 

packages/strapi-plugin-users-permissions/admin/src/components/List/index.js

@@ -8,6 +8,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { map, omitBy, size } from 'lodash';
+import cn from 'classnames';
+
+// Components from strapi-helper-plugin
+import LoadingBar from 'components/LoadingBar';
+import LoadingIndicator from 'components/LoadingIndicator';
 
 // Design
 import Button from 'components/Button';
@@ -48,14 +53,14 @@ const generateListTitle = (data, settingType) => {
   }
 };
 
-function List({ data, deleteData, noButton, onButtonClick, settingType, values }) {
+function List({ data, deleteData, noButton, onButtonClick, settingType, showLoaders, values }) {
   const object = omitBy(data, (v) => v.name === 'server'); // Remove the server key when displaying providers
 
   return (
     <div className={styles.list}>
       <div className={styles.flex}>
         <div className={styles.titleContainer}>
-          {generateListTitle(data, settingType)}
+          {showLoaders ? <LoadingBar style={{ marginTop: '0' }} /> : generateListTitle(data, settingType)}
         </div>
         <div className={styles.buttonContainer}>
           {noButton ? (
@@ -67,18 +72,20 @@ function List({ data, deleteData, noButton, onButtonClick, settingType, values }
           )}
         </div>
       </div>
-      <div className={styles.ulContainer}>
-        <ul className={noButton ? styles.listPadded : ''}>
-          {map(object, item => (
-            <ListRow
-              deleteData={deleteData}
-              item={item}
-              key={item.name}
-              settingType={settingType}
-              values={values}
-            />
-          ))}
-        </ul>
+      <div className={cn(styles.ulContainer, showLoaders && styles.loadingContainer)}>
+        {showLoaders ? <LoadingIndicator /> : (
+          <ul className={noButton ? styles.listPadded : ''}>
+            {map(object, item => (
+              <ListRow
+                deleteData={deleteData}
+                item={item}
+                key={item.name}
+                settingType={settingType}
+                values={values}
+              />
+            ))}
+          </ul>
+        )}
       </div>
     </div>
   );
@@ -87,6 +94,7 @@ function List({ data, deleteData, noButton, onButtonClick, settingType, values }
 List.defaultProps = {
   noButton: false,
   onButtonClick: () => {},
+  showLoaders: true,
 };
 
 List.propTypes = {
@@ -95,6 +103,7 @@ List.propTypes = {
   noButton: PropTypes.bool,
   onButtonClick: PropTypes.func,
   settingType: PropTypes.string.isRequired,
+  showLoaders: PropTypes.bool,
   values: PropTypes.object.isRequired,
 };
 

packages/strapi-plugin-users-permissions/admin/src/components/List/styles.scss

@@ -11,6 +11,8 @@
 }
 
 .titleContainer {
+  flex: 2;
+  width: 20%;
   color: #333740;
   font-family: Lato;
   font-size: 1.8rem;
@@ -33,3 +35,10 @@
 .listPadded {
   padding-top: 3px !important;
 }
+
+.loadingContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 150px;
+}

packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/index.js

@@ -155,19 +155,27 @@ export class HomePage extends React.Component {
     },
   ];
 
+  showLoaders = () => {
+    const { data, isLoading, modifiedData } = this.props;
+    const isAdvanded = this.getEndPoint() === 'advanced';
+
+    return isLoading && get(data, this.getEndPoint()) === undefined && !isAdvanded || isLoading && isAdvanded &&  get(modifiedData, this.getEndPoint()) === undefined;
+  }
+
   render() {
     const { data, didCheckErrors, formErrors, modifiedData, initialData, match, dataToEdit } = this.props;
     const headerActions = match.params.settingType === 'advanced' && !isEqual(modifiedData, initialData) ?
       this.pluginHeaderActions : [];
     const noButtonList = match.params.settingType === 'email-templates' || match.params.settingType === 'providers';
     const component = match.params.settingType === 'advanced' ?
-      <EditForm onChange={this.props.onChange} values={modifiedData} /> : (
+      <EditForm onChange={this.props.onChange} values={get(modifiedData, this.getEndPoint(), {})} showLoaders={this.showLoaders()} /> : (
         <List
           data={get(data, this.getEndPoint(), [])}
           deleteData={this.props.deleteData}
           noButton={noButtonList}
           onButtonClick={this.handleButtonClick}
           settingType={match.params.settingType}
+          showLoaders={this.showLoaders()}
           values={get(modifiedData, this.getEndPoint(), {})}
         />
       );
@@ -219,6 +227,7 @@ HomePage.propTypes = {
   formErrors: PropTypes.array.isRequired,
   history: PropTypes.object.isRequired,
   initialData: PropTypes.object.isRequired,
+  isLoading: PropTypes.bool.isRequired,
   location: PropTypes.object.isRequired,
   match: PropTypes.object.isRequired,
   modifiedData: PropTypes.object.isRequired,

packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/reducer.js

@@ -54,11 +54,13 @@ function homePageReducer(state = initialState, action) {
         .update('didDeleteData', (v) => !v);
     case FETCH_DATA:
       return state
-        .update('endPoint', () => action.endPoint);
+        .update('endPoint', () => action.endPoint)
+        .update('isLoading', () => true);
     case FETCH_DATA_SUCCEEDED:
       return state
         .updateIn(['data', state.get('endPoint')], () => List(action.data))
         .updateIn(['initialData', state.get('endPoint')], () => action.modifiedData)
+        .update('isLoading', () => false)
         .updateIn(['modifiedData', state.get('endPoint')], () => action.modifiedData);
     case ON_CHANGE:
       return state
@@ -71,7 +73,7 @@ function homePageReducer(state = initialState, action) {
       return state
         .set('formErrors', List([]))
         .updateIn(['initialData', state.get('endPoint')], () => action.form)
-        .updateIn(['modifiedData', state.get('enPoint')], () => action.form);
+        .updateIn(['modifiedData', state.get('endPoint')], () => action.form);
     case SET_FORM_ERRORS:
       return state
         .update('didCheckErrors', (v) => v = !v)