Add button loader to settings-manager plugin

packages/strapi-plugin-settings-manager/admin/src/components/Button/index.js

@@ -6,6 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import styles from './styles.scss';
 
@@ -16,9 +17,23 @@ class Button extends React.Component {
     const addShape = this.props.addShape ? <i className="fa fa-plus" /> : '';
 
     const buttonProps = Object.assign({}, this.props);
-    const propsToDelete = ['addShape', 'buttonBackground', 'buttonSize', 'handlei18n', 'label'];
+    const propsToDelete = ['addShape', 'buttonBackground', 'buttonSize', 'handlei18n', 'label', 'loader'];
 
     propsToDelete.map((value) => delete buttonProps[value]);
+
+    if (this.props.loader) {
+      return (
+        <button
+          type="button"
+          className={cn(styles.loader, styles.primary)}
+          disabled
+        >
+          <div className={styles.saving}>
+            <p></p><p></p><p></p>
+          </div>
+        </button>
+      )
+    }
     return (
       <button className={`${styles[this.props.buttonSize]} ${styles[this.props.buttonBackground]} ${styles.button}`} {...buttonProps}>
         {addShape}{label}
@@ -33,6 +48,7 @@ Button.propTypes = {
   buttonSize: PropTypes.string,
   handlei18n: PropTypes.bool,
   label: PropTypes.string,
+  loader: PropTypes.bool,
 };
 
 export default Button;

packages/strapi-plugin-settings-manager/admin/src/components/Button/styles.scss

@@ -46,7 +46,6 @@
 }
 
 .secondary {
-  // height: 32px !important;
   color: #F64D0A;
   border: 0.1rem solid #F64D0A;
   position: relative;
@@ -67,3 +66,58 @@
   padding-left: 1.6rem;
   padding-right: 1.6rem;
 }
+
+@keyframes blink {
+  0% {
+    opacity: .2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .2;
+  }
+}
+
+.saving {
+  height: 3rem;
+  display: flex;
+  justify-content: center;
+}
+
+.loader {
+  height: 3rem;
+  padding: 0 0 0 1.2rem;
+  line-height: 3.2rem;
+  border-radius: 0.3rem;
+  letter-spacing: 1rem;
+  font-family: Lato;
+  cursor: not-allowed;
+  position: relative;
+  opacity: .65;
+  width: 15rem;
+  font-size: 1rem;
+  &:focus {
+    outline: 0;
+  }
+}
+
+.saving p {
+  margin-bottom: 0;
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  &::before {
+    content: '\F111';
+    font-family: 'FontAwesome';
+  }
+}
+
+.saving p:nth-child(2) {
+  animation-delay: .2s;
+}
+
+.saving p:nth-child(3) {
+  animation-delay: .4s;
+}

packages/strapi-plugin-settings-manager/admin/src/components/EditForm/index.js

@@ -14,6 +14,7 @@ import styles from './styles.scss';
 
 class EditForm extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
+    const buttonStyle = this.props.showLoader ? { display: 'none' } : {};
     return (
       <div className={styles.editForm}>
         <form onSubmit={this.props.handleSubmit} autoComplete="nope">
@@ -41,12 +42,12 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta
           <div className={styles.buttonContainer}>
             <FormattedMessage id="settings-manager.form.button.cancel">
               {(message) => (
-                <Button type="button" label={message} buttonSize={"buttonMd"} buttonBackground={"secondary"} onClick={this.props.handleCancel} />
+                <Button type="button" label={message} buttonSize={"buttonMd"} buttonBackground={"secondary"} onClick={this.props.handleCancel} style={buttonStyle} />
               )}
             </FormattedMessage>
             <FormattedMessage id="settings-manager.form.button.save">
               {(message) => (
-                <Button type="submit" label={message} buttonSize={"buttonLg"} buttonBackground={"primary"} onClick={this.props.handleSubmit} />
+                <Button type="submit" loader={this.props.showLoader} label={message} buttonSize={"buttonLg"} buttonBackground={"primary"} onClick={this.props.handleSubmit} />
               )}
             </FormattedMessage>
           </div>
@@ -63,6 +64,7 @@ EditForm.propTypes = {
   handleChange: PropTypes.func,
   handleSubmit: PropTypes.func,
   sections: PropTypes.array,
+  showLoader: PropTypes.bool,
   values: PropTypes.object,
 };
 

packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/actions.js

@@ -33,6 +33,8 @@ import {
   DATABASE_ACTION_ERROR,
   EMPTY_DB_MODIFIED_DATA,
   SET_ERRORS,
+  SET_LOADER,
+  UNSET_LOADER,
 } from './constants';
 
 export function defaultAction() {
@@ -300,3 +302,15 @@ export function setErrors(errors) {
     errors,
   };
 }
+
+export function setLoader() {
+  return {
+    type: SET_LOADER,
+  };
+}
+
+export function unsetLoader() {
+  return {
+    type: UNSET_LOADER,
+  };
+}

packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/constants.js

@@ -30,3 +30,5 @@ export const DATABASE_EDIT = 'SettingsManager/HomePage/DATABASE_EDIT';
 export const DATABASE_ACTION_ERROR = 'SettingsManager/HomePage/DATABASE_ACTION_ERROR';
 export const EMPTY_DB_MODIFIED_DATA = 'SettingsManager/HomePage/EMPTY_DB_MODIFIED_DATA';
 export const SET_ERRORS = 'SettingsManager/HomePage/SET_ERRORS';
+export const SET_LOADER = 'SettingsManager/HomePage/SET_LOADER';
+export const UNSET_LOADER = 'SettingsManager/HomePage/UNSET_LOADER';

packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/index.js

@@ -439,6 +439,7 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
         addListTitleMarginTop={addListTitleMarginTop}
         formErrors={this.props.home.formErrors}
         error={this.props.home.error}
+        showLoader={this.props.home.showLoader}
       />
     );
   }
@@ -547,7 +548,6 @@ HomePage.propTypes = {
   menuSections: PropTypes.array.isRequired,
   newDatabasePost: PropTypes.func.isRequired,
   newLanguagePost: PropTypes.func.isRequired,
-  // params: PropTypes.func.isRequired,
   setErrors: PropTypes.func.isRequired,
   specificDatabaseFetch: PropTypes.func.isRequired,
 };

packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/reducer.js

@@ -24,6 +24,8 @@ import {
   NEW_LANGUAGE_POST,
   EMPTY_DB_MODIFIED_DATA,
   SET_ERRORS,
+  SET_LOADER,
+  UNSET_LOADER,
 } from './constants';
 
 /* eslint-disable new-cap */
@@ -43,6 +45,7 @@ const initialState = fromJS({
   formValidations: [],
   formErrors: [],
   error: false,
+  showLoader: false,
 });
 /* eslint-disable no-case-declarations */
 
@@ -140,6 +143,10 @@ function homePageReducer(state = initialState, action) {
     case SET_ERRORS:
       return state
         .set('formErrors', action.errors)
+    case SET_LOADER:
+      return state.set('showLoader', true);
+    case UNSET_LOADER:
+      return state.set('showLoader', false);
     default:
       return state;
   }

packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/sagas.js

@@ -30,6 +30,8 @@ import {
   databaseActionSucceeded,
   specificDatabaseFetchSucceeded,
   databaseActionError,
+  unsetLoader,
+  setLoader,
 } from './actions';
 
 /* eslint-disable no-template-curly-in-string */
@@ -240,6 +242,9 @@ export function* postDatabase(action) {
 
 export function* settingsEdit(action) {
   try {
+    // Show button loader
+    yield put(setLoader());
+
     const opts = {
       body: action.newSettings,
       method: 'PUT',
@@ -252,11 +257,13 @@ export function* settingsEdit(action) {
     if (resp.ok) {
       window.Strapi.notification.success('settings-manager.strapi.notification.success.settingsEdit');
       yield put(editSettingsSucceeded());
+      yield put(unsetLoader());
     }
 
 
   } catch(error) {
     window.Strapi.notification.error('settings-manager.strapi.notification.error');
+    yield put(unsetLoader());
   }
 }