No Progress on Server Actions

[maltesa]

Thank you for this awesome library. I started using nextjs server actions. Currently, the toploader does not appear when a server action is in progress. It would be awesome if that would work too.

https://github.com/TheSGJ/nextjs-toploader/assets/4067078/a5ee5b39-06b5-4ebd-baea-cc6f2a1cd2b3

[ekimcem]

That would be perfect!

[lorikku]

This is probably out of scope for this library. I think it's specifically made to support Nextjs' linking/navigation system, not for async operations such as server actions. You should handle user feedback when eg. submitting a form yourself.

You can however have more programatic control over the navigation itself (eg. after your server action is complete) using NProgress.

Edit: there's tons of "React topbar loader" libraries out there that are not tailored only to Nextjs' navigation, maybe you should check those out as well.

[webdevcody]

putting this here in case it helps anyone else. If you want to manually show the loader, install nprogress in your project and just do something like this. You can still call redirect inside your server action.

import * as NProgress from "nprogress";

onClick={async () => {
  NProgress.start();
  signOutAction().then(() => {
    NProgress.done();
  });
}}

a utility decorator function such as withTopLoader(signOutAction)(args) might be useful