diff --git a/persistence/sql_annotations.go b/persistence/sql_annotations.go
index 30b549aea..0f111b78f 100644
--- a/persistence/sql_annotations.go
+++ b/persistence/sql_annotations.go
@@ -96,12 +96,3 @@ func (r sqlRepository) cleanAnnotations() error {
 	}
 	return nil
 }
-
-func (r sqlRepository) updateAnnotations(id string, m interface{}) error {
-	ans := m.(model.AnnotatedModel).GetAnnotations()
-	err := r.SetStar(ans.Starred, id)
-	if err != nil {
-		return err
-	}
-	return r.SetRating(ans.Rating, id)
-}
diff --git a/persistence/sql_base_repository.go b/persistence/sql_base_repository.go
index 104286328..543cf713f 100644
--- a/persistence/sql_base_repository.go
+++ b/persistence/sql_base_repository.go
@@ -171,9 +171,6 @@ func (r sqlRepository) put(id string, m interface{}) (newId string, err error) {
 			return "", err
 		}
 		if count > 0 {
-			if _, ok := m.(model.AnnotatedModel); ok {
-				err = r.updateAnnotations(id, m)
-			}
 			return id, err
 		}
 	}
diff --git a/ui/src/common/StarButton.js b/ui/src/common/StarButton.js
index c53b6467f..5eecee961 100644
--- a/ui/src/common/StarButton.js
+++ b/ui/src/common/StarButton.js
@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
-import { useNotify, useRefresh, useUpdate } from 'react-admin'
+import { useNotify, useDataProvider } from 'react-admin'
 import StarIcon from '@material-ui/icons/Star'
 import StarBorderIcon from '@material-ui/icons/StarBorder'
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
+import subsonic from '../subsonic'
 
 const useStyles = makeStyles({
   star: {
@@ -15,30 +16,42 @@ const useStyles = makeStyles({
 })
 
 const StarButton = ({ resource, record, color, visible, size }) => {
+  const [loading, setLoading] = useState(false)
   const classes = useStyles({ color, visible, starred: record.starred })
   const notify = useNotify()
-  const refresh = useRefresh()
 
-  const [toggleStarred, { loading }] = useUpdate(
-    resource,
-    record.id,
-    {
-      ...record,
-      starred: !record.starred,
-    },
-    {
-      undoable: false,
-      onFailure: (error) => {
-        console.log(error)
-        notify('ra.page.error', 'warning')
-        refresh()
-      },
+  const mountedRef = useRef(false)
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
     }
-  )
+  }, [])
+
+  const dataProvider = useDataProvider()
+
+  const refreshRecord = useCallback(() => {
+    dataProvider.getOne(resource, { id: record.id }).then(() => {
+      if (mountedRef.current) {
+        setLoading(false)
+      }
+    })
+  }, [dataProvider, record.id, resource])
 
   const handleToggleStar = (e) => {
     e.preventDefault()
-    toggleStarred()
+    const toggleStar = record.starred ? subsonic.unstar : subsonic.star
+
+    setLoading(true)
+    toggleStar(record.id)
+      .then(refreshRecord)
+      .catch((e) => {
+        console.log('Error toggling star: ', e)
+        notify('ra.page.error', 'warning')
+        if (mountedRef.current) {
+          setLoading(false)
+        }
+      })
     e.stopPropagation()
   }
 
diff --git a/ui/src/subsonic/index.js b/ui/src/subsonic/index.js
index 5338e643c..588bb330d 100644
--- a/ui/src/subsonic/index.js
+++ b/ui/src/subsonic/index.js
@@ -26,6 +26,10 @@ const url = (command, id, options) => {
 const scrobble = (id, submit) =>
   fetchUtils.fetchJson(url('scrobble', id, { submission: submit }))
 
+const star = (id) => fetchUtils.fetchJson(url('star', id))
+
+const unstar = (id) => fetchUtils.fetchJson(url('unstar', id))
+
 const download = (id) => (window.location.href = url('download', id))
 
-export default { url, scrobble, download }
+export default { url, scrobble, download, star, unstar }