All examples of optimistic UI with Nextjs 14 using the useOptimistic hook are very simple.
What if the UI I want to optimistically update is inside a Suspense "boundary" ? How can I use the fetched data in the useOptimistic hook while they're only accessible in the server component? Furthermore, the form itself is not besides (not siblings react components) the UI I want to update.
Think for example of any social media feed on desktop where you can create a new post.
Here is the UI (LinkedIn for example) :
I go to my home page at / Some static parts are rendered (menu, etc.), the posts are loading, skeletons are shown (let's say those are fetched by a server component inside a suspense where the fallback component is the skeleton). I want to create a new post, I click on the form on top of the post list. A modal opens, I create my post, I click "post now". I immediately see my post on my feed thanks to optimistic update.
How can I do that with Nextjs 14 ? I'm struggling a lot to do this while it seems to me to be a very basic use case.
Thanks !