Given a server component that renders a list. List has some buttons in which changes are immediately shown with the useOptimistic hook. When a change is made a server action is triggered. revalidatePath is called and server component loads data

Said server component is wrapped in a suspense to show a loading indicator on first load.

All works great. Problem is when revalidatePath is called the suspense goes to the fallback as the list gets suspended. When a new item is added to the list by a server action, that then gets revalidated, the entire list suspends while the component loads.

So think of a like button being pressed in the list, this triggers a likeAction that revalidates data. In the middle of the optimistic like update, the list fallsback to a suspense loading ui.

Now I can just go full client with react query and solve this, but within the app router paradigm what is the best way to solve this problem?

Appreciate any help. Thanks