Multiple data fetches from server action do not resolve 1 by 1

[carvalhomeo]

Hi guys,

I have a project to list and add new to-dos by using server actions. I'm using useOptimistic to display a pending state when mutating data but it seems that if multiple requests are triggered at the same time my UI only updates when all requests are finished.

As per Nextjs docs it seems this is in fact the expected behaviour:
"Perform multiple data fetches with single round-trip instead of multiple individual requests on the client."

My question is, how can i make it work such that each request, when finished, updates the UI and doesn't wait for all the request to be finished?

Here is a repo with the project: https://github.com/carvalhomeo/optimistic

Screen_Recording_2024-05-03_at_13.28.25.mov

[ezeparziale]

In your example, I would remove sending: true and use the same UUID for both setOptimisticTodo({ id: uuid(), name }) and await addTodo({ id: uuid(), name }).

[carvalhomeo]

That doesn't fix what i'm trying to archive.
The sending flag is used to potentially load a spinner for each element of the list in order to know when the mutation is pending and when it has finished.