Merge pull request #4294 from marmelab/delayed-skeleton

Delay Skeleton Display a la Suspense
marmelab · Jan 15, 2020 · da78414 · da78414
2 parents d6050a2 + 5e1b7ce
commit da78414
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 54 deletions.
diff --git a/packages/ra-ui-materialui/src/list/DatagridLoading.js b/packages/ra-ui-materialui/src/list/DatagridLoading.js
@@ -10,6 +10,7 @@ import IconButton from '@material-ui/core/IconButton';
 import Checkbox from '@material-ui/core/Checkbox';
 import classnames from 'classnames';
 import Placeholder from './Placeholder';
+import { useTimeout } from 'ra-core';
 
 const times = (nbChildren, fn) =>
     Array.from({ length: nbChildren }, (_, key) => fn(key));
@@ -22,55 +23,18 @@ const DatagridLoading = ({
     nbChildren,
     nbFakeLines = 5,
     size,
-}) => (
-    <Table className={classnames(classes.table, className)} size={size}>
-        <TableHead>
-            <TableRow className={classes.row}>
-                {expand && (
-                    <TableCell
-                        padding="none"
-                        className={classes.expandHeader}
-                    />
-                )}
-                {hasBulkActions && (
-                    <TableCell
-                        padding="checkbox"
-                        className={classes.expandIconCell}
-                    >
-                        <Checkbox
-                            className="select-all"
-                            color="primary"
-                            checked={false}
-                        />
-                    </TableCell>
-                )}
-                {times(nbChildren, key => (
-                    <TableCell
-                        variant="head"
-                        className={classes.headerCell}
-                        key={key}
-                    >
-                        <Placeholder />
-                    </TableCell>
-                ))}
-            </TableRow>
-        </TableHead>
-        <TableBody>
-            {times(nbFakeLines, key1 => (
-                <TableRow key={key1} style={{ opacity: 1 / (key1 + 1) }}>
+}) => {
+    const oneSecondHasPassed = useTimeout(1000);
+
+    return oneSecondHasPassed ? (
+        <Table className={classnames(classes.table, className)} size={size}>
+            <TableHead>
+                <TableRow className={classes.row}>
                     {expand && (
                         <TableCell
                             padding="none"
-                            className={classes.expandIconCell}
-                        >
-                            <IconButton
-                                className={classes.expandIcon}
-                                component="div"
-                                aria-hidden="true"
-                            >
-                                <ExpandMoreIcon />
-                            </IconButton>
-                        </TableCell>
+                            className={classes.expandHeader}
+                        />
                     )}
                     {hasBulkActions && (
                         <TableCell
@@ -84,16 +48,57 @@ const DatagridLoading = ({
                             />
                         </TableCell>
                     )}
-                    {times(nbChildren, key2 => (
-                        <TableCell className={classes.rowCell} key={key2}>
+                    {times(nbChildren, key => (
+                        <TableCell
+                            variant="head"
+                            className={classes.headerCell}
+                            key={key}
+                        >
                             <Placeholder />
                         </TableCell>
                     ))}
                 </TableRow>
-            ))}
-        </TableBody>
-    </Table>
-);
+            </TableHead>
+            <TableBody>
+                {times(nbFakeLines, key1 => (
+                    <TableRow key={key1} style={{ opacity: 1 / (key1 + 1) }}>
+                        {expand && (
+                            <TableCell
+                                padding="none"
+                                className={classes.expandIconCell}
+                            >
+                                <IconButton
+                                    className={classes.expandIcon}
+                                    component="div"
+                                    aria-hidden="true"
+                                >
+                                    <ExpandMoreIcon />
+                                </IconButton>
+                            </TableCell>
+                        )}
+                        {hasBulkActions && (
+                            <TableCell
+                                padding="checkbox"
+                                className={classes.expandIconCell}
+                            >
+                                <Checkbox
+                                    className="select-all"
+                                    color="primary"
+                                    checked={false}
+                                />
+                            </TableCell>
+                        )}
+                        {times(nbChildren, key2 => (
+                            <TableCell className={classes.rowCell} key={key2}>
+                                <Placeholder />
+                            </TableCell>
+                        ))}
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    ) : null;
+};
 
 DatagridLoading.propTypes = {
     classes: PropTypes.object,

diff --git a/packages/ra-ui-materialui/src/list/SimpleList.js b/packages/ra-ui-materialui/src/list/SimpleList.js
@@ -83,6 +83,7 @@ const SimpleList = ({
             />
         );
     }
+
     return (
         (loading || total > 0) && (
             <List className={className} {...sanitizeListRestProps(rest)}>

diff --git a/packages/ra-ui-materialui/src/list/SimpleListLoading.tsx b/packages/ra-ui-materialui/src/list/SimpleListLoading.tsx
@@ -9,6 +9,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import { makeStyles } from '@material-ui/core/styles';
 
 import Placeholder from './Placeholder';
+import { useTimeout } from 'ra-core';
 
 const useStyles = makeStyles(
     theme => ({
@@ -45,8 +46,9 @@ const SimpleListLoading: FC<Props & ListProps> = ({
     ...rest
 }) => {
     const classes = useStyles({ classes: classesOverride });
+    const oneSecondHasPassed = useTimeout(1000);
 
-    return (
+    return oneSecondHasPassed ? (
         <List className={className} {...rest}>
             {times(nbFakeLines, key => (
                 <ListItem>
@@ -78,7 +80,7 @@ const SimpleListLoading: FC<Props & ListProps> = ({
                 </ListItem>
             ))}
         </List>
-    );
+    ) : null;
 };
 
 SimpleListLoading.propTypes = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -83,6 +83,7 @@ const SimpleList = ({ @@
                 />
             );
         }
         return (
             (loading || total > 0) && (
                 <List className={className} {...sanitizeListRestProps(rest)}>
@@ Expand Down @@