Submission not reactive in JSX ?

Hi, I'm making a login form as such:

export default function LoginPage() {
  const login = action(async (formData: FormData) => {
      const username = String(formData.get('username'))
      const password = String(formData.get('password'))
  
      console.log('login', username, password)
      await sleep(1000)
      return true
  }, 'login')
  
  const submission = useSubmission(login)
  const disabled = () => submission.pending === true;
  
  createEffect(() => {
      console.log('Logging in: ', disabled())
  })

return (
  <main class="w-full min-h-screen flex flex-col justify-center items-center gap-12">
    <h1 class="text-3xl">Admin Login</h1>
    <p>disabled: {disabled() ? 'yes' : 'no'}</p>
    <form action={login} method='post' class="flex-col flex gap-4">
    ....
    </form>
  </main>
  );
};

export default function LoginPage() {
  const login = action(async (formData: FormData) => {
      const username = String(formData.get('username'))
      const password = String(formData.get('password'))
  
      console.log('login', username, password)
      await sleep(1000)
      return true
  }, 'login')
  
  const submission = useSubmission(login)
  const disabled = () => submission.pending === true;
  
  createEffect(() => {
      console.log('Logging in: ', disabled())
  })

return (
  <main class="w-full min-h-screen flex flex-col justify-center items-center gap-12">
    <h1 class="text-3xl">Admin Login</h1>
    <p>disabled: {disabled() ? 'yes' : 'no'}</p>
    <form action={login} method='post' class="flex-col flex gap-4">
    ....
    </form>
  </main>
  );
};

As usual I want to disable the login button while the login action is running. I created the disabled signal for that that just checks if the submission is pending. But for some reason it doesn't update the page but still triggers the createEffect. Am I missing something ?

2 Replies

TaQuanMinhLong•2mo ago

Have you tried

<Show 
     when={submission.pending}
     fallback={"No"}
>
     Yes
</Show>

<Show 
     when={submission.pending}
     fallback={"No"}
>
     Yes
</Show>

Cyber GrandmaOP•2mo ago

Yup

Gaming

Programming

Submission not reactive in JSX ?