useCollectionData loading only updating on initial render not on refetch

[JamesBrightman]

I am using the useCollectionData hook to grab some data from a collection. I see that the 2nd variable in the hook is to indicate loading. Logging this var I can see that loading is true on initial render (eg refreshing the page).

If you add/remove documents to a collection, I would expect loading to be true as it fetches and renders the new changes. However, it seems that it is always false after the initial render, even if you modify the underlying collection that useCollectionData is pointed at.

Here's an example;

export const App = () => {

  const [entryData, loading, error] = useCollectionData<entry>(
    query(collection(db, "entries"), orderBy("createdAt", "asc")).withConverter(entryConverter)
  );

  console.log(loading)

  const addEntryDocument = async() => {
    await addDoc(collection(db, "entries"), {createdAt: serverTimestamp(), rating: (Math.floor(Math.random()*10))} as entry)
  }

  const deleteEntryDocument = async() => {
    //Delete first element in collection
    await deleteDoc(doc(db, "entries", entryData![0].id!))
  }

  return (
    <div className="w-full flex flex-col items-center gap-2">
      {loading && <div>LOADING</div>}

      <button onClick={addEntryDocument}>Add record</button>
      <button onClick={deleteEntryDocument}>Delete top record</button>

      {entryData?.map((ele: entry, idx: number) => {return <div key={ele.id} className="flex flex-row items-center justify-center w-min gap-4 p-4 border border-2 border-black">
        <p>{ele.id}</p>
        <p>{ele.rating}</p>
        </div>})}
    </div>
  )
}

This maps and displays documents in the "entries" collection. It also displays a simple loading UI when the data is being fetched. This loading UI is not show when adding or removing docs, only on init load. Is this a bug, or expected behaviour? Is there a way I can get loading to update when the collection is refetched? Thanks.