Next.js Discord

Discord Forum

Next.js does not provide a built-in way to track the loading state of a Server Action.

Answered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
Ref the discussion at
https://discord.com/channels/752553802359505017/1262269848306585642/1262274372127948882

Any other tricks anyone ?
Answered by B33fb0n3
it looks like you are not using server actions. You are currently using a route handler at /api/foo/bar and not a server action.

If you want to know the status of that route handler, you already know the answer (https://discord.com/channels/752553802359505017/1262269848306585642/1262274372127948882).
If you want to switch to server actions, create a server action and use it like this:
<form onSubmit={() => {
  // inside your function:
  setLoading(true);
  await yourServerAction(); // awaits the server action
  setLoading(false)
}}> <...form control> <button/> </form>
View full answer

13 Replies

@Brown bear Ref the discussion at https://discord.com/channels/752553802359505017/1262269848306585642/1262274372127948882 Any other tricks anyone ?
B33fb0n3
you can still check the promise of the server action. So:
// inside your function:
setLoading(true);
await yourServerAction(); // awaits the server action
setLoading(false)
Brown bearOP
my form is using Server Action like so: 
< form action='/api/foo/bar'> <...form control> <button/> </form>

for now, I am currently attaching an onClick handler on the button , but unfortunately imo there is no way to check if the action succeeded on not.. since Next.js does the hard work behind the screens..
@Brown bear my form is using Server Action like so: < form action='/api/foo/bar'> <...form control> <button/> </form> for now, I am currently attaching an onClick handler on the button , but unfortunately imo there is no way to check if the action succeeded on not.. since Next.js does the hard work behind the screens..
B33fb0n3
it looks like you are not using server actions. You are currently using a route handler at /api/foo/bar and not a server action.

If you want to know the status of that route handler, you already know the answer (https://discord.com/channels/752553802359505017/1262269848306585642/1262274372127948882).
If you want to switch to server actions, create a server action and use it like this:
<form onSubmit={() => {
  // inside your function:
  setLoading(true);
  await yourServerAction(); // awaits the server action
  setLoading(false)
}}> <...form control> <button/> </form>
Answer
Brown bearOP
Oops sorry about that. yes so to summarize, thanks for clarifying.
I am using routeHandlers, so I think we should either use useFormState on react canary or do it the onClick submit way ? these are the only two options ?
@Brown bear Oops sorry about that. yes so to summarize, thanks for clarifying. I am using routeHandlers, so I think we should either use `useFormState` on react canary or do it the onClick submit way ? these are the only two options ?
B33fb0n3
yes, that are two good ways on doing stuff. I personally prefer using the onClick (submit) way, because I have more control on what and where to do. However you can do it like you want to do it 👍

Btw: if you want to use a lot of server actions (client side mutations) you might like this library: https://next-safe-action.dev/
Brown bearOP
thanks! That seems like a great alternative to tRPC mutations; which I am currently using.
I 'd like to branch off to another question: loading state on route transitions . Apart from loading.js is there way by which I can. may be , show a disabled state on the current page while the transitions happens ? I dont like the flicker moving to a loading route...
@Brown bear I 'd like to branch off to another question: loading state on route transitions . Apart from `loading.js` is there way by which I can. may be , show a disabled state on the current page while the transitions happens ? I dont like the flicker moving to a loading route...
B33fb0n3
to keep threads based on one topic, I can give you a short answer to it: you can use page transition loading states like youtube does (on top the red loading bar when you switch pages). For that you can use this package: https://www.npmjs.com/package/nextjs-toploader
Brown bearOP
I am already using it, but feels a bit off to keep the UI still active. I'll make the loader more prominent..
@Brown bear I am already using it, but feels a bit off to keep the UI still active. I'll make the loader more prominent..
B33fb0n3
Maybe someone else know a possible solution for it. So open a thread specifically for that topic and mark this thread as solved, so you get the solutions, that you want to have 👍
Brown bearOP
sorry, how do I set as resolved ?
B33fb0n3