Pending UI
Loading "Improve the UX with Pending UI"
Run locally for transcripts
👨💼 Some of our users have complained that the UI doesn't feel responsive because
after they submit their profile form, it can take a while before there are any
updates and they're not sure whether they did something wrong.
This is one of the things the browser did for us before we brought JavaScript
along for the party. Once we brought JavaScript along, we started doing
event.preventDefault() which removed the full-page refresh, but also removed
the pending UI feedback the browser shows for us. We need to add that back.Could you give them some feedback while they're waiting for the server to
respond? We want to do this specifically for when the user submits the note
edit form and hits the delete button.
Remix allows you to give the user an even better experience by showing "pending
UI" using
the
useNavigation hook.
Only one transition can be happening at a time in the web (you can't go to two
places at once) so that's true here as well. This means you'll need to use the
information from the navigation to determine if the form is submitting or not.Here's an example of
useNavigation that should help you get a sense of the
information you can get from the navigation object (📜 also check out
the useFormAction hook).export default function SandwichChooser() {
const navigation = useNavigation()
const formAction = useFormAction()
const isSubmitting =
navigation.state !== 'idle' &&
navigation.formMethod === 'POST' &&
navigation.formAction === formAction
return (
<Form method="POST">
<label>
Type: <input name="sandwichType" />
</label>
<button type="submit" disabled={isSubmitting}>
{isSubmitting
? `Creating ${submittedSandwichType} Sandwich`
: `Create Sandwich`}
</button>
</Form>
)
}
🧝♂️ I've created a
<StatusButton /> component that has a status="pending"
prop you can use for this if you like. We'll also want to disable the button
when the form is submitting.