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

[prisma idol]

Ref the discussion at
#1262269848306585642 message

Any other tricks anyone ?

[ember tusk]

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)

[snow torrent]

you can still check the promise of the server action. So:

// inside your function:
setLoading(true);
await yourServerAction(); // awaits the server action
setLoading(false)

[prisma idol]

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..

[snow torrent]

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 (#1262269848306585642 message).
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>

[prisma idol]

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 ?

[snow torrent]

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/

[prisma idol]

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...

[snow torrent]

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

[prisma idol]

I am already using it, but feels a bit off to keep the UI still active. I'll make the loader more prominent..

[snow torrent]

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 👍

[prisma idol]

sorry, how do I set as resolved ?

[snow torrent]

Do this on the acutal message. I guess the most helpful message for you would be this: #1262275333588254770 message

[ember tusk]

✅ 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](#1262275333588254770 message)