Create specific loader for the WYSIWYG

This commit is contained in:
soupette 2018-06-13 17:48:37 +02:00
parent 4268f788c9
commit b76574714c
4 changed files with 40 additions and 8 deletions

View File

@ -7,7 +7,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { isEmpty, merge } from 'lodash';
import Loadable from 'react-loadable';
// Design
import InputAddonWithErrors from 'components/InputAddonWithErrors';
import InputCheckboxWithErrors from 'components/InputCheckboxWithErrors';
@ -21,12 +20,8 @@ import InputPasswordWithErrors from 'components/InputPasswordWithErrors';
import InputTextAreaWithErrors from 'components/InputTextAreaWithErrors';
import InputTextWithErrors from 'components/InputTextWithErrors';
import InputToggleWithErrors from 'components/InputToggleWithErrors';
// import WysiwygWithErrors from 'components/WysiwygWithErrors';
const Loading = () => <div>Loading ...</div>;
const LoadableWysiwyg = Loadable({
loader: () => import('components/WysiwygWithErrors'),
loading: Loading,
});
import WysiwygWithErrors from 'components/WysiwygWithErrors/Loadable';
const DefaultInputError = ({ type }) => <div>Your input type: <b>{type}</b> does not exist</div>;
@ -44,7 +39,7 @@ const inputs = {
text: InputTextWithErrors,
textarea: InputTextAreaWithErrors,
toggle: InputToggleWithErrors,
wysiwyg: LoadableWysiwyg,
wysiwyg: WysiwygWithErrors,
};
function InputsIndex(props) {

View File

@ -0,0 +1,7 @@
import Loadable from 'react-loadable';
import Loader from './Loader';
export default Loadable({
loader: () => import('./index'),
loading: Loader,
});

View File

@ -0,0 +1,11 @@
import React from 'react';
import styles from './styles.scss';
const Loader = () => (
<div className="col-md-12">
<div className={styles.wysLoader}><div /></div>
</div>
);
export default Loader;

View File

@ -3,3 +3,22 @@
font-size: 1.3rem;
font-family: 'Lato';
}
.wysLoader {
display: flex;
justify-content: space-around;
width: 100%;
> div {
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #3498db; /* Blue */
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 2s linear infinite;
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}