How do you show progress for the initial lag of the useAuthSignin?

[white onyx]

Right now I'm using it this way:

                    <Form action={signIn}>
                        <input
                            name="providerId"
                            type="hidden"
                            value="keycloak"
                        />
                        <input
                            name="options.callbackUrl"
                            type="hidden"
                            value="/dashboard"
                        />
                        <input type="submit" />
                    </Form>

And the signIn is const signIn = useAuthSignin. How do you show progress here?

[lament cairn]

something like loading progress? isn't signIn an action? afaik action provides isSubmitting boolean to check for any progress

[white onyx]

@lament cairn, it has a property called isRunning. But when we use that property, we still have an initial lag. We can see it especially if we throttle the network. It seems that it first does some action behind the scenes, and then starts the flow and sets the value of isRunning to true. That initial lag is a bad UX. Because in slow networks, users might think that nothing has happened yet.