how to show loading on form action

[main halo]

So, i just finished nextjs learn xourse. Before going deeper into my question, i think the solution lies into using the

useActionState

React hook. But for some reason i got the
module react does not include hook useActionState
I tried upgrading react, npm, nextjs. Nothing worked so i gave up on it. I think if i can use that,i will have the answer to my question.

Anyway, back to my question.
How do i tell my frontend that the form (e.g. login form) is currently being submitted and show a loading or something that disables multiple submit button presses?

[umbral tinsel]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[zenith lantern]

you can for example use useFormState to show a loader conditionally (you need canary): https://pl.react.dev/reference/react-dom/hooks/useFormState

Or change a useState to true after you submitted the form.

const [isLoading, setIsLoading] = useState(false)

Or if you using clientside libraries like react query or swr, you can directly use their variable like isLoading

[main halo]

Hmm so useActionState is only available in react canary, which is prerelease. Should i start using that?

I personally like the second option much more, using clientside libraries for showing a loading indicator to clients makes more sense.

[umbral tinsel]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1253406017363120138 message)