Add a custom AlbumSongs list component, to disable the optimistic rendering (should fix #158)

ui/src/album/AlbumShow.js

@@ -1,47 +1,28 @@
 import React from 'react'
-import {
-  Datagrid,
-  FunctionField,
-  List,
-  Loading,
-  TextField,
-  useGetOne
-} from 'react-admin'
+import { Loading, useGetOne } from 'react-admin'
 import AlbumDetails from './AlbumDetails'
-import { DurationField, Title } from '../common'
+import { Title } from '../common'
 import { useStyles } from './styles'
 import { AlbumActions } from './AlbumActions'
 import { AlbumSongBulkActions } from './AlbumSongBulkActions'
-import { useMediaQuery } from '@material-ui/core'
-import { setTrack } from '../audioplayer'
-import { useDispatch } from 'react-redux'
+import AlbumSongs from './AlbumSongs'
 
 const AlbumShow = (props) => {
-  const dispatch = useDispatch()
-  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const classes = useStyles()
   const { data: record, loading, error } = useGetOne('album', props.id)
 
   if (loading) {
-    return <Loading />
+    return null
   }
 
   if (error) {
     return <p>ERROR: {error}</p>
   }
 
-  const trackName = (r) => {
-    const name = r.title
-    if (r.trackNumber) {
-      return r.trackNumber.toString().padStart(2, '0') + ' ' + name
-    }
-    return name
-  }
-
   return (
     <>
       <AlbumDetails {...props} classes={classes} record={record} />
-      <List
+      <AlbumSongs
         {...props}
         title={<Title subTitle={record.name} />}
         actions={<AlbumActions />}
@@ -52,23 +33,7 @@ const AlbumShow = (props) => {
         pagination={null}
         sort={{ field: 'discNumber asc, trackNumber asc', order: 'ASC' }}
         bulkActionButtons={<AlbumSongBulkActions />}
-      >
-        <Datagrid
-          rowClick={(id, basePath, record) => dispatch(setTrack(record))}
-        >
-          {isDesktop && (
-            <TextField
-              source="trackNumber"
-              sortBy="discNumber asc, trackNumber asc"
-              label="#"
-            />
-          )}
-          {isDesktop && <TextField source="title" />}
-          {!isDesktop && <FunctionField source="title" render={trackName} />}
-          {isDesktop && <TextField source="artist" />}
-          <DurationField source="duration" />
-        </Datagrid>
-      </List>
+      />
     </>
   )
 }

ui/src/album/AlbumSongs.js

@@ -0,0 +1,111 @@
+import React from 'react'
+import {
+  BulkActionsToolbar,
+  Datagrid,
+  FunctionField,
+  ListToolbar,
+  TextField,
+  useListController
+} from 'react-admin'
+import classnames from 'classnames'
+import { useDispatch } from 'react-redux'
+import { Card, useMediaQuery } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import { setTrack } from '../audioplayer'
+import { DurationField } from '../common'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {},
+    main: {
+      display: 'flex'
+    },
+    content: {
+      marginTop: 0,
+      transition: theme.transitions.create('margin-top'),
+      position: 'relative',
+      flex: '1 1 auto',
+      [theme.breakpoints.down('xs')]: {
+        boxShadow: 'none'
+      },
+      overflow: 'inherit'
+    },
+    bulkActionsDisplayed: {
+      marginTop: -theme.spacing(8),
+      transition: theme.transitions.create('margin-top')
+    },
+    actions: {
+      zIndex: 2,
+      display: 'flex',
+      justifyContent: 'flex-end',
+      flexWrap: 'wrap'
+    },
+    noResults: { padding: 20 }
+  }),
+  { name: 'RaList' }
+)
+
+const trackName = (r) => {
+  const name = r.title
+  if (r.trackNumber) {
+    return r.trackNumber.toString().padStart(2, '0') + ' ' + name
+  }
+  return name
+}
+
+const AlbumSongs = (props) => {
+  const classes = useStyles(props)
+  const dispatch = useDispatch()
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  const controllerProps = useListController(props)
+  const { bulkActionButtons } = props
+  const { loading, version } = controllerProps
+
+  if (loading) {
+    return null
+  }
+  return (
+    <>
+      <ListToolbar
+        filters={props.filters}
+        {...controllerProps}
+        actions={props.actions}
+        permanentFilter={props.filter}
+      />
+      <div className={classes.main}>
+        <Card
+          className={classnames(classes.content, {
+            [classes.bulkActionsDisplayed]:
+              controllerProps.selectedIds.length > 0
+          })}
+          key={version}
+        >
+          {/*{bulkActionButtons !== false && bulkActionButtons && (*/}
+          <BulkActionsToolbar {...controllerProps}>
+            {bulkActionButtons}
+          </BulkActionsToolbar>
+          {/*)}*/}
+          <Datagrid
+            rowClick={(id, basePath, record) => dispatch(setTrack(record))}
+            {...controllerProps}
+            hasBulkActions={props.bulkActionButtons !== false}
+          >
+            {isDesktop && (
+              <TextField
+                source="trackNumber"
+                sortBy="discNumber asc, trackNumber asc"
+                label="#"
+              />
+            )}
+            {isDesktop && <TextField source="title" />}
+            {!isDesktop && <FunctionField source="title" render={trackName} />}
+            {isDesktop && <TextField source="artist" />}
+            <DurationField source="duration" />
+          </Datagrid>
+        </Card>
+      </div>
+    </>
+  )
+}
+
+export default AlbumSongs