Add loading view to editpage

packages/strapi-plugin-content-manager/admin/src/containers/EditPage/index.js

@@ -17,6 +17,7 @@ import cn from 'classnames';
 // ./node_modules/strapi-helper-plugin/lib/src
 // or strapi/packages/strapi-helper-plugin/lib/src
 import BackHeader from 'components/BackHeader';
+import LoadingIndicator from 'components/LoadingIndicator';
 import PluginHeader from 'components/PluginHeader';
 
 // Plugin's components
@@ -108,7 +109,7 @@ export class EditPage extends React.Component {
    * @return {[type]} [description]
    */
   getLayout = () => (
-    bindLayout.call(this, this.props.editPage.layout)
+    bindLayout.call(this, get(this.props.editPage, ['layout', this.getModelName()], {}))
   )
 
   /**
@@ -150,6 +151,14 @@ export class EditPage extends React.Component {
     get(this.props.schema, ['plugins', this.getSource(), this.getModelName()])
     : get(this.props.schema, [this.getModelName()]);
 
+  getPluginHeaderTitle = () => {
+    if (this.isCreating()) {
+      return toString(this.props.editPage.pluginHeaderTitle);
+    }
+
+    return this.props.match.params.id;
+  }
+
   /**
    * Retrieve the model's source
    * @return {String}
@@ -236,6 +245,7 @@ export class EditPage extends React.Component {
         kind: 'secondary',
         onClick: this.props.onCancel,
         type: 'button',
+        disabled: this.showLoaders(),
       },
       {
         kind: 'primary',
@@ -244,10 +254,17 @@ export class EditPage extends React.Component {
         type: 'submit',
         loader: this.props.editPage.showLoader,
         style: this.props.editPage.showLoader ? { marginRight: '18px' } : {},
+        disabled: this.showLoaders(),
       },
     ]
   );
 
+  showLoaders = () => {
+    const { editPage: { isLoading, layout } } = this.props;
+
+    return isLoading && !this.isCreating() || isLoading && get(layout, this.getModelName()) === undefined;
+  }
+
   render() {
     const { editPage } = this.props;
 
@@ -258,24 +275,28 @@ export class EditPage extends React.Component {
           <div className={cn('container-fluid', styles.containerFluid)}>
             <PluginHeader
               actions={this.pluginHeaderActions()}
-              title={{ id: toString(editPage.pluginHeaderTitle) }}
+              title={{ id: this.getPluginHeaderTitle() }}
             />
             <div className="row">
               <div className={this.isRelationComponentNull() ? 'col-lg-12' : 'col-lg-9'}>
                 <div className={styles.main_wrapper}>
-                  <Edit
-                    attributes={this.getModelAttributes()}
-                    didCheckErrors={editPage.didCheckErrors}
-                    formValidations={editPage.formValidations}
-                    formErrors={editPage.formErrors}
-                    layout={this.getLayout()}
-                    modelName={this.getModelName()}
-                    onBlur={this.handleBlur}
-                    onChange={this.handleChange}
-                    record={editPage.record}
-                    resetProps={editPage.resetProps}
-                    schema={this.getSchema()}
-                  />
+                  {this.showLoaders() ? (
+                    <LoadingIndicator />
+                  ) : (
+                    <Edit
+                      attributes={this.getModelAttributes()}
+                      didCheckErrors={editPage.didCheckErrors}
+                      formValidations={editPage.formValidations}
+                      formErrors={editPage.formErrors}
+                      layout={this.getLayout()}
+                      modelName={this.getModelName()}
+                      onBlur={this.handleBlur}
+                      onChange={this.handleChange}
+                      record={editPage.record}
+                      resetProps={editPage.resetProps}
+                      schema={this.getSchema()}
+                    />
+                  )}
                 </div>
               </div>
               {!this.isRelationComponentNull() && (
@@ -360,3 +381,5 @@ export default compose(
   withSaga,
   withConnect,
 )(EditPage);
+
+

packages/strapi-plugin-content-manager/admin/src/containers/EditPage/reducer.js

@@ -27,7 +27,8 @@ const initialState = fromJS({
   isCreating: false,
   id: '',
   initialRecord: Map({}),
-  layout: Map({}),
+  isLoading: true,
+  layout: fromJS({}),
   modelName: '',
   pluginHeaderTitle: 'New Entry',
   record: Map({}),
@@ -44,11 +45,14 @@ function editPageReducer(state = initialState, action) {
     case GET_DATA_SUCCEEDED:
       return state
         .update('id', () => action.id)
+        .update('isLoading', () => false)
         .update('initialRecord', () => Map(action.data))
         .update('pluginHeaderTitle', () => action.pluginHeaderTitle)
         .update('record', () => Map(action.data));
     case GET_LAYOUT_SUCCEEDED:
-      return state.update('layout', () => Map(action.layout));
+      return state
+        .update('isLoading', () => false)
+        .updateIn(['layout', state.get('modelName')], () => Map(action.layout));
     case INIT_MODEL_PROPS:
       return state
         .update('formValidations', () => List(action.formValidations))
@@ -63,7 +67,7 @@ function editPageReducer(state = initialState, action) {
         .update('record', () => state.get('initialRecord'))
         .update('resetProps', (v) => v = !v);
     case RESET_PROPS:
-      return initialState;
+      return initialState.update('layout', () => state.get('layout'));
     case SET_FILE_RELATIONS:
       return state.set('fileRelations', List(action.fileRelations));
     case SET_FORM_ERRORS:

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/saga.js

@@ -99,6 +99,7 @@ export function* dataDelete({ id, modelName, source }) {
 export function* dataDeleteAll({ entriesToDelete, model, source }) {
   try {
     const params = Object.assign(entriesToDelete, source !== undefined ? { source } : {});
+    
     yield call(request, `/content-manager/explorer/deleteAll/${model}`, {
       method: 'DELETE',
       params,