[RFR] Display a skeleton instead of empty datagrid when loading

cypress/integration/list.js

@@ -18,6 +18,9 @@ describe('List Page', () => {
 
     describe('Auto-hide AppBar', () => {
         it('should hide/show the appBar when scroll action appears', () => {
+            // wait for the skeleton to disappear
+            cy.contains('1-10 of 13');
+
             cy.viewport(1280, 500);
 
             cy.scrollTo(0, 200);

packages/ra-core/src/controller/ListController.js

@@ -246,6 +246,7 @@ export class ListController extends Component {
             hasCreate,
             data,
             ids,
+            loadedOnce,
             total,
             isLoading,
             translate,
@@ -278,6 +279,7 @@ export class ListController extends Component {
             hideFilter: this.hideFilter,
             ids,
             isLoading,
+            loadedOnce,
             onSelect: this.handleSelect,
             onToggleItem: this.handleToggleItem,
             onUnselectItems: this.handleUnselectItems,
@@ -323,6 +325,7 @@ ListController.propTypes = {
     hasList: PropTypes.bool,
     hasShow: PropTypes.bool,
     ids: PropTypes.array,
+    loadedOnce: PropTypes.bool,
     selectedIds: PropTypes.array,
     isLoading: PropTypes.bool.isRequired,
     location: PropTypes.object.isRequired,
@@ -360,6 +363,7 @@ const injectedProps = [
     'hideFilter',
     'ids',
     'isLoading',
+    'loadedOnce',
     'onSelect',
     'onToggleItem',
     'onUnselectItems',
@@ -425,6 +429,7 @@ function mapStateToProps(state, props) {
         query: selectQuery(props),
         params: resourceState.list.params,
         ids: resourceState.list.ids,
+        loadedOnce: resourceState.list.loadedOnce,
         selectedIds: resourceState.list.selectedIds,
         total: resourceState.list.total,
         data: resourceState.data,

packages/ra-core/src/controller/field/ReferenceManyFieldController.js

@@ -84,7 +84,7 @@ export class ReferenceManyFieldController extends Component {
     setSort = field => {
         const order =
             this.state.sort.field === field &&
-                this.state.sort.order === SORT_ASC
+            this.state.sort.order === SORT_ASC
                 ? SORT_DESC
                 : SORT_ASC;
         this.setState({ sort: { field, order } }, this.fetchReferences);
@@ -135,7 +135,7 @@ export class ReferenceManyFieldController extends Component {
             currentSort: this.state.sort,
             data,
             ids,
-            isLoading: typeof ids === 'undefined',
+            loadedOnce: typeof ids !== 'undefined',
             page,
             perPage,
             referenceBasePath,

packages/ra-core/src/controller/field/ReferenceManyFieldController.spec.js

@@ -5,7 +5,7 @@ import { render } from 'react-testing-library';
 import { ReferenceManyFieldController } from './ReferenceManyFieldController';
 
 describe('<ReferenceManyFieldController />', () => {
-    it('should set isLoading to true when related records are not yet fetched', () => {
+    it('should set loadedOnce to false when related records are not yet fetched', () => {
         const children = jest.fn();
         shallow(
             <ReferenceManyFieldController
@@ -19,7 +19,7 @@ describe('<ReferenceManyFieldController />', () => {
             </ReferenceManyFieldController>,
             { disableLifecycleMethods: true }
         );
-        assert.equal(children.mock.calls[0][0].isLoading, true);
+        assert.equal(children.mock.calls[0][0].loadedOnce, false);
     });
 
     it('should pass data and ids to children function', () => {
@@ -117,27 +117,27 @@ describe('<ReferenceManyFieldController />', () => {
 
     it('should call crudGetManyReference when its props changes', () => {
         const crudGetManyReference = jest.fn();
-        const ControllerWrapper = (props) => (
-            <ReferenceManyFieldController record={{ id: 1 }}
-            resource="foo"
-            reference="bar"
-            target="foo_id"
-            basePath=""
-            data={{
-                1: { id: 1, title: 'hello' },
-                2: { id: 2, title: 'world' },
-            }}
-            ids={[1, 2]}
-            crudGetManyReference={crudGetManyReference}
-            {...props}>
+        const ControllerWrapper = props => (
+            <ReferenceManyFieldController
+                record={{ id: 1 }}
+                resource="foo"
+                reference="bar"
+                target="foo_id"
+                basePath=""
+                data={{
+                    1: { id: 1, title: 'hello' },
+                    2: { id: 2, title: 'world' },
+                }}
+                ids={[1, 2]}
+                crudGetManyReference={crudGetManyReference}
+                {...props}
+            >
                 {() => null}
             </ReferenceManyFieldController>
         );
 
         const { rerender } = render(<ControllerWrapper />);
-        rerender(
-            <ControllerWrapper sort={{ field: 'id', order: 'ASC' }} />
-        );
+        rerender(<ControllerWrapper sort={{ field: 'id', order: 'ASC' }} />);
 
         assert.deepEqual(crudGetManyReference.mock.calls[1], [
             'bar',

packages/ra-core/src/reducer/admin/resource/index.spec.js

@@ -29,6 +29,7 @@ describe('Resources Reducer', () => {
                             },
                             selectedIds: [],
                             total: 0,
+                            loadedOnce: false,
                         },
                         props: { name: 'posts' },
                     },
@@ -45,6 +46,7 @@ describe('Resources Reducer', () => {
                             },
                             selectedIds: [],
                             total: 0,
+                            loadedOnce: false,
                         },
                         props: { name: 'comments' },
                     },
@@ -71,6 +73,7 @@ describe('Resources Reducer', () => {
                         },
                         selectedIds: [],
                         total: 0,
+                        loadedOnce: false,
                     },
                     props: { name: 'posts' },
                 },
@@ -87,6 +90,7 @@ describe('Resources Reducer', () => {
                         },
                         selectedIds: [],
                         total: 0,
+                        loadedOnce: false,
                     },
                     props: { name: 'comments' },
                 },
@@ -103,6 +107,7 @@ describe('Resources Reducer', () => {
                         },
                         selectedIds: [],
                         total: 0,
+                        loadedOnce: false,
                     },
                     props: { name: 'users', options: 'foo' },
                 },
@@ -127,6 +132,7 @@ describe('Resources Reducer', () => {
                             },
                             selectedIds: [],
                             total: 0,
+                            loadedOnce: false,
                         },
                         props: { name: 'posts' },
                     },
@@ -143,6 +149,7 @@ describe('Resources Reducer', () => {
                             },
                             selectedIds: [],
                             total: 0,
+                            loadedOnce: false,
                         },
                         props: { name: 'comments' },
                     },
@@ -166,6 +173,7 @@ describe('Resources Reducer', () => {
                         },
                         selectedIds: [],
                         total: 0,
+                        loadedOnce: false,
                     },
                     props: { name: 'posts' },
                 },
@@ -190,6 +198,7 @@ describe('Resources Reducer', () => {
                             },
                             selectedIds: [],
                             total: 0,
+                            loadedOnce: false,
                         },
                         props: { name: 'posts' },
                     },
@@ -206,6 +215,7 @@ describe('Resources Reducer', () => {
                             },
                             selectedIds: [],
                             total: 0,
+                            loadedOnce: false,
                         },
                         props: { name: 'comments' },
                     },
@@ -236,6 +246,7 @@ describe('Resources Reducer', () => {
                         },
                         selectedIds: [],
                         total: 0,
+                        loadedOnce: false,
                     },
                     props: { name: 'posts' },
                 },
@@ -252,6 +263,7 @@ describe('Resources Reducer', () => {
                         },
                         selectedIds: [],
                         total: 0,
+                        loadedOnce: false,
                     },
                     props: { name: 'comments' },
                 },

packages/ra-core/src/reducer/admin/resource/list/index.js

@@ -1,11 +1,13 @@
 import { combineReducers } from 'redux';
 import ids from './ids';
+import loadedOnce from './loadedOnce';
 import params from './params';
 import selectedIds from './selectedIds';
 import total from './total';
 
 export default combineReducers({
     ids,
+    loadedOnce,
     params,
     selectedIds,
     total,

packages/ra-core/src/reducer/admin/resource/list/loadedOnce.ts

@@ -0,0 +1,20 @@
+import { Reducer } from 'redux';
+import { CRUD_GET_LIST_SUCCESS } from '../../../../actions/dataActions';
+
+type State = boolean;
+
+/**
+ * This resource reducer is false until the list loads successfully
+ */
+const loadedOnce: Reducer<State> = (previousState = false, { type }) => {
+    // early return
+    if (previousState === true) {
+        return previousState;
+    }
+    if (type === CRUD_GET_LIST_SUCCESS) {
+        return true;
+    }
+    return previousState;
+};
+
+export default loadedOnce;

packages/ra-ui-materialui/src/field/ReferenceManyField.js

@@ -1,21 +1,14 @@
 import React, { Fragment, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import { withStyles } from '@material-ui/core/styles';
 import { ReferenceManyFieldController } from 'ra-core';
 
-const styles = {
-    progress: { marginTop: '1em' },
-};
-
 export const ReferenceManyFieldView = ({
     children,
-    classes = {},
     className,
     currentSort,
     data,
     ids,
-    isLoading,
+    loadedOnce,
     page,
     pagination,
     perPage,
@@ -25,38 +18,40 @@ export const ReferenceManyFieldView = ({
     setPerPage,
     setSort,
     total,
-}) => isLoading ? <LinearProgress className={classes.progress} /> :
-        <Fragment>
-            {cloneElement(children, {
-                className,
-                resource: reference,
-                ids,
-                data,
-                basePath: referenceBasePath,
-                currentSort,
-                setSort,
-                total,
-            })}
-            {pagination && cloneElement(pagination, {
+}) => (
+    <Fragment>
+        {cloneElement(children, {
+            className,
+            resource: reference,
+            ids,
+            loadedOnce,
+            data,
+            basePath: referenceBasePath,
+            currentSort,
+            setSort,
+            total,
+        })}
+        {pagination &&
+            cloneElement(pagination, {
                 page,
                 perPage,
                 setPage,
                 setPerPage,
                 total,
             })}
-        </Fragment>;
+    </Fragment>
+);
 
 ReferenceManyFieldView.propTypes = {
     children: PropTypes.element,
-    classes: PropTypes.object,
     className: PropTypes.string,
     currentSort: PropTypes.shape({
         field: PropTypes.string,
         order: PropTypes.string,
     }),
     data: PropTypes.object,
     ids: PropTypes.array,
-    isLoading: PropTypes.bool,
+    loadedOnce: PropTypes.bool,
     pagination: PropTypes.element,
     reference: PropTypes.string,
     referenceBasePath: PropTypes.string,
@@ -154,13 +149,7 @@ ReferenceManyField.defaultProps = {
     perPage: 25,
     sort: { field: 'id', order: 'DESC' },
     source: 'id',
-};
-
-const EnhancedReferenceManyField = withStyles(styles)(ReferenceManyField);
-
-EnhancedReferenceManyField.defaultProps = {
     addLabel: true,
-    source: 'id',
 };
 
-export default EnhancedReferenceManyField;
+export default ReferenceManyField;

packages/ra-ui-materialui/src/field/ReferenceManyField.spec.js

@@ -6,28 +6,6 @@ import TextField from './TextField';
 import SingleFieldList from '../list/SingleFieldList';
 
 describe('<ReferenceManyField />', () => {
-    it('should render a loading indicator when isLoading is true', () => {
-        const wrapper = shallow(
-            <ReferenceManyFieldView
-                resource="foo"
-                reference="bar"
-                basePath=""
-                isLoading={true}
-            >
-                <SingleFieldList>
-                    <TextField source="title" />
-                </SingleFieldList>
-            </ReferenceManyFieldView>,
-            { disableLifecycleMethods: true }
-        );
-        const ProgressElements = wrapper.find('WithStyles(LinearProgress)');
-        assert.equal(ProgressElements.length, 1);
-        const SingleFieldListElement = wrapper.find(
-            'WithStyles(SingleFieldList)'
-        );
-        assert.equal(SingleFieldListElement.length, 0);
-    });
-
     it('should render a list of the child component', () => {
         const data = {
             1: { id: 1, title: 'hello' },