Fetcher state inside Modal/Dialog

[DuncanLHS]

I'm having a real nightmare trying to get fetcher state to update inside a modal dialog and would really appreciate any pointers.

My setup is roughly as follows:

<Route>
    <Dialog>
        <DialogContent>
            <fetcher.Form ... />
        </DialogContent>
    </Dialog>
</Route>

When I submit the form, the network request runs as expected, but the fetcher state does not update until I close the dialog or somehow force a full re-render of the form, which isn't much use. I'm using shadcn components with dialogs that make use of radix-ui. useFetcher is defined in the same component as the form. I've also tried passing the fetcher down as a prop to the form from the parent route but that doesn't work either. Setting the modal prop on the dialog to false does not help at all.

My aim is to have the form submit, then close the dialog on a successful response.

Any help would be much appreciated!

[DuncanLHS]

I found the issue.
I have awaited components elsewhere on the page. Some of them are awaiting more than one Promise from the loader. Using Promise.all() in the <Await/> component resolve prop (though it resolves fine for the component) breaks how fetcher state gets updated for some reason.