useTransition is always idle

[upper ginkgo]

Hi all, I am using useTransition to verify the state of an authentication request. I am using remix-auth and am using useTransition in a component as such

function LoginForm () {
    const error = useActionData();
    const transition = useTransition();
    console.log(transition.state);
    const isSubmitting = Boolean(transition.submission)

    return (
        <Form method="post">
            <Form.Group className="mb-3" controlId="username">
                <Form.Label>Username</Form.Label>
                <Form.Control type="text" name="username" placeholder="Enter your username"  />
            </Form.Group>
            <Form.Group className="mb-3" controlId="password">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" name="password" placeholder="Enter your password"  />
            </Form.Group>
            <Form.Group className="text-center" controlId="submit">
                <Button type="submit" bsstyle="primary" disabled={isSubmitting}>{`Login ${isSubmitting ? '...' : ''}`}</Button>
            </Form.Group>
        </Form>
    )
}

However, it is always idle. Any ideas?

[median vigil]

What's that Form? Is that the Remix Form?

[upper ginkgo]

it's a bootstrap form

[median vigil]

that's probably your issue

that form is most likely doing a full page request

reloading the whole app

[upper ginkgo]

think you're right

any way to make it not do that?

[median vigil]

useTransition has no way to know the transition state then

the easier way is to use Remix's Form component instead of a custom form

another option is to add an onSubmit

and use the useSubmit to submit the form

let submit = useSubmit()
function handleSubmit(event: React.FormEvent<HTMLFormEvent>) {
  event.preventDefault()
  submit(event.currentTarget) // I think this works
}
return <Form method="post" onSubmit={handleSubmit} />

[upper ginkgo]

You sir are a saint

that fixed it immediately

the next thing i'm looking to do is utilize useTransition to prevent my site from being stuck on the login page after submit

I know it has something to do with optimistic UI

[median vigil]

since data after the login depends on the authenticated user, it would be hard if not impossible to do an optimistic UI for that

also, not everything needs to have optimistic UI

[upper ginkgo]

right, I sort of figured as much

so there's no way more elegant than the user's browser hanging on auth?

[median vigil]

show a nice pending UI

also try to make auth as fast as possible

[upper ginkgo]

yeah i'm depending on an external api using hackish methods to get it to work

the endpoints i'm using aren't too quick

is bootstrap decent enough for ui?

[median vigil]

for an internal app it's enough, for public facing apps I don't like it

[upper ginkgo]

gotcha