how to show loading on form action
Answered
ayrreervae posted this in #help-forum
So, i just finished nextjs learn xourse. Before going deeper into my question, i think the solution lies into using the
React hook. But for some reason i got the
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?
useActionStateReact hook. But for some reason i got the
module react does not include hook useActionStateI 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?
Answered by B33fb0n3
you can for example use
Or change a useState to true after you submitted the form.
Or if you using clientside libraries like react query or swr, you can directly use their variable like
useFormState to show a loader conditionally (you need canary): https://pl.react.dev/reference/react-dom/hooks/useFormStateOr 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
isLoading3 Replies
@ayrreervae So, i just finished nextjs learn xourse. Before going deeper into my question, i think the solution lies into using the
js
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?
you can for example use
Or change a useState to true after you submitted the form.
Or if you using clientside libraries like react query or swr, you can directly use their variable like
useFormState to show a loader conditionally (you need canary): https://pl.react.dev/reference/react-dom/hooks/useFormStateOr 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
isLoadingAnswer
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.
I personally like the second option much more, using clientside libraries for showing a loading indicator to clients makes more sense.
@ayrreervae 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.
yea, I also like the use of client libraries more... it's just way simpler. If you need a personal preference for server actions, use: https://next-safe-action.dev/