diff --git a/ui/src/playlist/PlaylistDetails.js b/ui/src/playlist/PlaylistDetails.js
index 7aaed0342..1ef99dcfb 100644
--- a/ui/src/playlist/PlaylistDetails.js
+++ b/ui/src/playlist/PlaylistDetails.js
@@ -35,7 +35,8 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-const PlaylistDetails = ({ record }) => {
+const PlaylistDetails = (props) => {
+  const { record = {} } = props
   const translate = useTranslate()
   const classes = useStyles()
 
@@ -43,13 +44,22 @@ const PlaylistDetails = ({ record }) => {
     <Card className={classes.container}>
       <CardContent className={classes.details}>
         <Typography variant="h5" className={classes.title}>
-          {record.name}
+          {record.name || translate('ra.page.loading')}
         </Typography>
         <Typography component="h6">{record.comment}</Typography>
         <Typography component="p">
-          {record.songCount}{' '}
-          {translate('resources.song.name', { smart_count: record.songCount })}{' '}
-          · <DurationField record={record} source={'duration'} />
+          {record.songCount ? (
+            <span>
+              {record.songCount}{' '}
+              {translate('resources.song.name', {
+                smart_count: record.songCount,
+              })}
+              {' · '}
+              <DurationField record={record} source={'duration'} />
+            </span>
+          ) : (
+            <span>&nbsp;</span>
+          )}
         </Typography>
       </CardContent>
     </Card>
diff --git a/ui/src/playlist/PlaylistShow.js b/ui/src/playlist/PlaylistShow.js
index 29de548cc..d0a574f44 100644
--- a/ui/src/playlist/PlaylistShow.js
+++ b/ui/src/playlist/PlaylistShow.js
@@ -9,14 +9,10 @@ import PlaylistSongBulkActions from './PlaylistSongBulkActions'
 
 const PlaylistShow = (props) => {
   const viewVersion = useSelector((s) => s.admin.ui && s.admin.ui.viewVersion)
-  const { data: record, loading, error } = useGetOne('playlist', props.id, {
+  const { data: record, error } = useGetOne('playlist', props.id, {
     v: viewVersion,
   })
 
-  if (loading) {
-    return null
-  }
-
   if (error) {
     return <p>ERROR: {error}</p>
   }
@@ -27,14 +23,16 @@ const PlaylistShow = (props) => {
       <PlaylistSongs
         {...props}
         playlistId={props.id}
-        title={<Title subTitle={record.name} />}
+        title={<Title subTitle={record && record.name} />}
         actions={<PlaylistActions />}
         filter={{ playlist_id: props.id }}
         resource={'playlistTrack'}
         exporter={false}
         perPage={-1}
         pagination={null}
-        bulkActionButtons={<PlaylistSongBulkActions playlistId={props.id} />}
+        bulkActionButtons={
+          <PlaylistSongBulkActions playlistId={props.id} record={record} />
+        }
       />
     </>
   )