SimpleList Skeleton for First Load

packages/ra-ui-materialui/src/list/DatagridLoading.js

@@ -9,22 +9,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import IconButton from '@material-ui/core/IconButton';
 import Checkbox from '@material-ui/core/Checkbox';
 import classnames from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles(
-    theme => ({
-        root: {
-            backgroundColor: theme.palette.grey[300],
-            display: 'flex',
-        },
-    }),
-    { name: 'RaDatagridLoading' }
-);
-
-const Placeholder = ({ classes: classesOverride }) => {
-    const classes = useStyles({ classes: classesOverride });
-    return <div className={classes.root}>&nbsp;</div>;
-};
+import Placeholder from './Placeholder';
 
 const times = (nbChildren, fn) =>
     Array.from({ length: nbChildren }, (_, key) => fn(key));

packages/ra-ui-materialui/src/list/Placeholder.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import classnames from 'classnames';
+
+const useStyles = makeStyles(
+    theme => ({
+        root: {
+            backgroundColor: theme.palette.grey[300],
+            display: 'flex',
+        },
+    }),
+    { name: 'RaSimpleListLoading' }
+);
+
+interface Props {
+    className?: string;
+    classes?: Record<'root', string>;
+}
+
+const Placeholder: FC<Props> = ({ className, classes: classesOverride }) => {
+    const classes = useStyles({ classes: classesOverride });
+    return <div className={classnames(className, classes.root)}>&nbsp;</div>;
+};
+
+export default Placeholder;

packages/ra-ui-materialui/src/list/SimpleList.js

@@ -10,6 +10,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import { makeStyles } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom';
 import { linkToRecord, sanitizeListRestProps } from 'ra-core';
+import SimpleListLoading from './SimpleListLoading';
 
 const useStyles = makeStyles(
     {
@@ -53,6 +54,7 @@ const SimpleList = ({
     data,
     hasBulkActions,
     ids,
+    loaded,
     loading,
     leftAvatar,
     leftIcon,
@@ -68,6 +70,19 @@ const SimpleList = ({
     ...rest
 }) => {
     const classes = useStyles({ classes: classesOverride });
+
+    if (loaded === false) {
+        return (
+            <SimpleListLoading
+                classes={classes}
+                className={className}
+                hasLeftAvatarOrIcon={!!leftIcon || !!leftAvatar}
+                hasRightAvatarOrIcon={!!rightIcon || !!rightAvatar}
+                hasSecondaryText={!!secondaryText}
+                hasTertiaryText={!!tertiaryText}
+            />
+        );
+    }
     return (
         (loading || total > 0) && (
             <List className={className} {...sanitizeListRestProps(rest)}>

packages/ra-ui-materialui/src/list/SimpleListLoading.tsx

@@ -0,0 +1,93 @@
+import React, { FC } from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '@material-ui/core/Avatar';
+import List, { ListProps } from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Placeholder from './Placeholder';
+
+const useStyles = makeStyles(
+    theme => ({
+        primary: {
+            width: '30vw',
+            display: 'inline-block',
+            marginBottom: theme.spacing(),
+        },
+        tertiary: { float: 'right', opacity: 0.541176, minWidth: '10vw' },
+    }),
+    { name: 'RaSimpleListLoading' }
+);
+const times = (nbChildren, fn) =>
+    Array.from({ length: nbChildren }, (_, key) => fn(key));
+
+interface Props {
+    classes?: Record<'tertiary', string>;
+    className?: string;
+    hasLeftAvatarOrIcon?: boolean;
+    hasRightAvatarOrIcon?: boolean;
+    hasSecondaryText?: boolean;
+    hasTertiaryText?: boolean;
+    nbFakeLines?: number;
+}
+
+const SimpleListLoading: FC<Props & ListProps> = ({
+    classes: classesOverride,
+    className,
+    hasLeftAvatarOrIcon,
+    hasRightAvatarOrIcon,
+    hasSecondaryText,
+    hasTertiaryText,
+    nbFakeLines = 5,
+    ...rest
+}) => {
+    const classes = useStyles({ classes: classesOverride });
+
+    return (
+        <List className={className} {...rest}>
+            {times(nbFakeLines, key => (
+                <ListItem>
+                    {hasLeftAvatarOrIcon && (
+                        <ListItemAvatar>
+                            <Avatar>&nbsp;</Avatar>
+                        </ListItemAvatar>
+                    )}
+                    <ListItemText
+                        primary={
+                            <div>
+                                <Placeholder className={classes.primary} />
+                                {hasTertiaryText && (
+                                    <span className={classes.tertiary}>
+                                        <Placeholder />
+                                    </span>
+                                )}
+                            </div>
+                        }
+                        secondary={
+                            hasSecondaryText ? <Placeholder /> : undefined
+                        }
+                    />
+                    {hasRightAvatarOrIcon && (
+                        <ListItemSecondaryAction>
+                            <Avatar>&nbsp;</Avatar>
+                        </ListItemSecondaryAction>
+                    )}
+                </ListItem>
+            ))}
+        </List>
+    );
+};
+
+SimpleListLoading.propTypes = {
+    className: PropTypes.string,
+    hasLeftAvatarOrIcon: PropTypes.bool,
+    hasRightAvatarOrIcon: PropTypes.bool,
+    hasSecondaryText: PropTypes.bool,
+    hasTertiaryText: PropTypes.bool,
+    nbFakeLines: PropTypes.number,
+};
+
+export default SimpleListLoading;