Tracking pending state of single item during mutation?

const TodoItem = ({ todo, isPending }: { todo: Todo, isPersisted: boolean }) => {
  return (
    <div>
      {todo.text}
      <button
        onClick={() => todoCollection.delete(todo.id)}
        disabled={isPending}
      >
        Delete
      </button>
    </div>
  )
}

const [pendingIds, setPendingIds] = useState<Set<string>>(new Set())

const handleCreate = () => {
  const id = crypto.randomUUID()
  
  setPendingIds(prev => new Set(prev).add(id))
  
  const tx = todoCollection.insert({ id, text: 'New todo', completed: false })
  
  tx.isPersisted.promise.finally(() => {
    setPendingIds(prev => {
      const next = new Set(prev)
      next.delete(id)
      return next
    })
  })
}

// In render:
<TodoItem todo={todo} isPending={pendingIds.has(todo.id)} />

// Ideal API - any of these would work:
const { data, pendingKeys } = useLiveQuery(...)
// or
todoCollection.hasPendingMutation(id)
// or
const isPending = usePendingMutation(todoCollection, id)