feat: await results from submit hooks

Author: DennisKraaijeveld

app/components/search-bar.tsx

@@ -1,5 +1,5 @@
-import { Form, useSearchParams, useSubmit } from 'react-router';
 import { useId } from 'react'
+import { Form, useSearchParams, useSubmit } from 'react-router'
 import { useDebounce, useIsPending } from '#app/utils/misc.tsx'
 import { Icon } from './ui/icon.tsx'
 import { Input } from './ui/input.tsx'
@@ -23,8 +23,8 @@ export function SearchBar({
 		formAction: '/users',
 	})
 
-	const handleFormChange = useDebounce((form: HTMLFormElement) => {
-		submit(form)
+	const handleFormChange = useDebounce(async (form: HTMLFormElement) => {
+		await submit(form)
 	}, 400)
 
 	return (

app/root.tsx

@@ -316,9 +316,9 @@ function UserDropdown() {
 					<DropdownMenuItem
 						asChild
 						// this prevents the menu from closing before the form submission is completed
-						onSelect={(event) => {
+						onSelect={async (event) => {
 							event.preventDefault()
-							submit(formRef.current)
+							await submit(formRef.current)
 						}}
 					>
 						<Form action="/logout" method="POST" ref={formRef}>

app/routes/admin+/cache.tsx

@@ -1,7 +1,16 @@
 import { invariantResponse } from '@epic-web/invariant'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import { redirect, type LoaderFunctionArgs, type ActionFunctionArgs } from 'react-router';
-import { Form, Link, useFetcher, useLoaderData, useSearchParams, useSubmit } from 'react-router';
+import {
+	redirect,
+	type LoaderFunctionArgs,
+	type ActionFunctionArgs,
+	Form,
+	Link,
+	useFetcher,
+	useLoaderData,
+	useSearchParams,
+	useSubmit,
+} from 'react-router'
 import { GeneralErrorBoundary } from '#app/components/error-boundary'
 import { Field } from '#app/components/forms.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
@@ -86,8 +95,8 @@ export default function CacheAdminRoute() {
 	const limit = searchParams.get('limit') ?? '100'
 	const instance = searchParams.get('instance') ?? data.instance
 
-	const handleFormChange = useDebounce((form: HTMLFormElement) => {
-		submit(form)
+	const handleFormChange = useDebounce(async (form: HTMLFormElement) => {
+		await submit(form)
 	}, 400)
 
 	return (