I've seen several examples of experimental_useFormStatus hook that display a loading state while the server action is pending. My problem is that I can make it work with a dummy action handler with a timeout, but not with my actual route handlers that I need for the authentication flow.

Server component with a dummy handler:

import { SubmitButton } from '@/app/components/SubmitButton';

export default function LoginPage() {
  return (
    <form
      action={async () => {
        'use server';
        await new Promise((resolve) => {
          setTimeout(() => resolve(true), 2000);
        });
      }}>
      <SubmitButton />
    </form>
  );
}

Client-side submit button:

'use client';

import { experimental_useFormStatus } from 'react-dom';

export function SubmitButton() {
  const { pending } = experimental_useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'loading' : 'submit'}
    </button>
  );
}

The above example makes the submit button label change to "loading" while the action is pending, as expected. However, if I try to use actual route handlers, such as a login route handler, the button loading state no longer works:

import { SubmitButton } from '@/app/components/SubmitButton';

export default function LoginPage() {
  return (
    <form action="/auth/login" method="post">
      {/* login form fields */}
      <SubmitButton />
    </form>
  );
}