I am trying to fetch some data in a server component. The result should be displayed in a form so that the user is able to update it. For updating the data, I want to use a server action. It all works fine but I am having trouble with the loading animations, with the suspense, to be precise. Here is an example of what I am basically trying to do:
https://codesandbox.io/p/devbox/ssr-suspense-form-example-t7r6jl
The issue is, as soon as I am hitting the submit button, the suspense of the parent gets triggered and the whole form disappears while it is loading. Is there any way to prevent this from happening? I want to keep using the action attribute of the form if possible.
I used the onSubmit hook and called the server function directly. This works, I then have to manage the loading state in the form but that would be alright. But it is not what I initially intended on doing, which is using the action attribute. The advantage of using the action attribute would be that it would run without any js enabled which is what I would prefer for the user facing app.
Another thing that I have tried was using the startTransition hook, but this is for state changes only. The request to the server action seems to trigger something else in the Suspense so there seems to be no way around that.
I also tried using the loading.tsx instead of the but since it basically does the same thing it produces the same result.