Best way to show loading state when using server action on client

[prateek3255]

I am trying to use a server action outside form in a client component. I want to do something once the server action is complete and also have a loading state meanwhile

'use client'
import { addItem } from '../actions'
 
function ExampleClientComponent({ id }) {
  const someEvent = () => {
    ...
  }

  return (
    <button
      onClick={async () => {
        await addItem(id);
        someEvent();
      }}
    >
       Add To Cart
    </button>
  )
}

To have a loading state in the above case I'll need to create a new state variable for loading, and I can't use startTransition here as well because I want to execute the someEvent function after the item is added. So I just want to know if there's a better way to handle this, or creating an additional state for loading is the only way to handle this situation right now.

[SamKomesarook]

Additional state is probably your best bet here, given your use case. Some network libs, such as apollo gql, have loading states built into their requests, so if you use a lib in the async function, check to see if it has some kind of state like that you could use.

Also, perhaps use a .then to ensure someEvent follows the async call.

[rodolphoasb]

Hey, take a look at:

import { experimental_useFormStatus as useFormStatus } from "react-dom";

Here are some references:
#49232
https://youtu.be/czvSZqnpTHs?t=525
https://twitter.com/sebastienlorber/status/1651135782990561280
#50991

[prateek3255]

So what you are saying is I create a form wrapper over the button and do the task in the action prop and then use the form status inside with the button.

[xaqbr]

Have you found any success with this hook? I have been trying to get it to work but none of the properties are updating after the server action runs...

EDIT: Solved the problem: useFormStatus() only works in client components, but the <form> needs to be apart of the server component rendering it. Otherwise useFormStatus() doesn't update.

See https://github.com/techulus/manage-prompt/blob/c9dad49a802c2192d1553d62e4b3151dda134fdf/app/console/workflows/new/page.tsx#L7

Not favorable since the client component form becomes a bunch of <input>s with no reference to its own <form> but I guess it works in the meantime.

[agustind]

I faced the same issue, I had some code that I needed to run after the server action is completed and show a "pending" state in the meantime.

I solved it by triggering the server action with startTransition which populates the isPending variable, then I wrapped the code I needed to run after within useEffect passing isPending as a dependency.

'use client'
import { useTransition, useEffect } from 'react'
import { serverAction }  from './serverAction'

export default myClientComponent(){

    let [isPending, startTransition] = useTransition();

    useEffect(() => {
        if(isPending) return;
        
        // THIS CODE WILL RUN AFTER THE SERVER ACTION
        
    }, [isPending]);


    const onSubmit = async (formData: FormData) => {

        // RUN SOME VALIDATION HERE

        startTransition(() => {
            serverAction(formData);
        });
    }

    return (
        <form action={onSubmit}>
            <input type="text" name="test" />
            <button type="submit">{isPending ? 'submitting' : 'submit'}</button>
        </form>
    )

}

[ghost]

Is it ok to use useTransition? I was thinking about that hook as well but after reading the React docs I kinda got the feeling it was just for state setters.

I also had my reservations with this caveat:

The function you pass to startTransition must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as transitions. If you try to perform more state updates later (for example, in a timeout), they won’t be marked as transitions.

[rwieruch]

FWIW https://twitter.com/rickhanlonii/status/1755650648723300686

[agustind]

I built a hook to run server actions asyncronously:

/hooks/useServerAction.ts

import { useState, useEffect, useTransition, useRef } from 'react';

export function useServerAction(action, onFinished = null) {
    const [isPending, startTransition] = useTransition();
    const [result, setResult] = useState(null);
    const [finished, setFinished] = useState(false);
    const resolver = useRef(null);
    

    useEffect(() => {
        if (!finished) return;
        
        if(onFinished) onFinished(result);
        resolver.current(result);

    }, [result, finished]);

    const runAction = async (args: unknown) => {
        
        startTransition(async () => {
            
            var data = await action(args);
            
            setResult(data);
            setFinished(true);
        });

        return new Promise((resolve, reject) => {
            resolver.current = resolve;
        });
    };

    return [runAction, isPending];
}

it can be used from a client component like this:

components/ContactForm.ts

import { submitFormAction } from '@/actions/ContactFormAction';
import { useServerAction } from '@/hooks/useServerAction';

export default function ContactForm() {
 
    const [runAction, isRunning] = useServerAction(submitFormAction);

    const onSubmit = async (formData) => {
        // run some validarion here
        var result = await runAction(formData);
        // continue running some code after the action completed
    };

    return (<form action={onSubmit}>
        <input type="text" name="name" />
        <input type="email" name="email" />
        <textarea name="message" />
        <button type="submit">{isRunning ? 'submitting...' : 'submit'}</button>
    </form>);

}

[writzx]

TS version:

const useServerAction = <P, R>(
  action: ((_: P) => Promise<R>),
  onFinished?: ((_: R | undefined) => void)
): [(_: P) => Promise<R | undefined>, boolean] => {
  const [isPending, startTransition] = useTransition();
  const [result, setResult] = useState<R>();
  const [finished, setFinished] = useState(false);
  const resolver = useRef<((value?: (R | PromiseLike<R>)) => void)>();


  useEffect(() => {
    if (!finished) return;

    if (onFinished) onFinished(result);
    resolver.current?.(result);

  }, [result, finished]);

  const runAction = async (args: P): Promise<R | undefined> => {
    startTransition(() => {
      action(args).then(data => {
        setResult(data);
        setFinished(true);
      });
    });

    return new Promise((resolve) => {
      resolver.current = resolve;
    });
  };

  return [runAction, isPending];
};

[ghost]

The use of useTransition here looks like the exact thing that was said invalid in the react docs.

Similarly, you can’t mark an update as a Transition like this:

startTransition(async () => {
  await someAsyncFunction();
  // ❌ Setting state *after* startTransition call
  setPage('/about');
});

[leerob]

Here's our recommendations for loading states with forms! https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#displaying-loading-state

[HamedSiaban]

@spiderbyteit May be You are doing something wrong. Check this:
https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition

[yordis]

@leerob related to #65747 sometimes, it can't use the form element, therefore, we need to reach for alternatives.

It would be amazing to figure out a general solution here, it feels something core to nextjs to be doing, unless we are doing something completely wrong and it must be fixed in radix or any other "broken" situation

[leerob]

It's a little strange that using a form doesn't work (this is the canonical example of using a form) – but you can still call a server action inside of a client action (or event handler). Maybe worth trying formAction prop on the button?

https://react.dev/reference/react-dom/components/form#props

[yordis]

<form action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')" role="menuitem" class="relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0" tabindex="-1" data-orientation="vertical" data-radix-collection-item=""><button type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" x2="9" y1="12" y2="12"></line></svg>Log out</button></form>

The following works:

const [state, onSignOutAction, isPending] = useActionState(onSignOut, null);

<DropdownMenuItem disabled={isPending}>
  <form action={onSignOutAction}>
    <button type="submit" disabled={isPending}>
      {isPending ? <Loader className="animate-spin" /> : <LogOut />}
      {isPending ? 'Signing out...' : 'Log out'}
    </button>
  </form>
</DropdownMenuItem>

[yordis]

Isn't that action prop value somewhat weird?

[naftali100]

an improved typescript version that allow flexible amount of params, and types based on the action's function type

import { useState, useEffect, useTransition, useRef } from 'react';

export const useServerAction = <P extends any[], R>(
  action: (...args: P) => Promise<R>,
  onFinished?: (_: R | undefined) => void,
): [(...args: P) => Promise<R | undefined>, boolean] => {
  const [isPending, startTransition] = useTransition();
  const [result, setResult] = useState<R>();
  const [finished, setFinished] = useState(false);
  const resolver = useRef<(value?: R | PromiseLike<R>) => void>();

  useEffect(() => {
    if (!finished) return;

    if (onFinished) onFinished(result);
    resolver.current?.(result);
  }, [result, finished]);

  const runAction = async (...args: P): Promise<R | undefined> => {
    startTransition(() => {
      action(...args).then((data) => {
        setResult(data);
        setFinished(true);
      });
    });

    return new Promise((resolve) => {
      resolver.current = resolve;
    });
  };

  return [runAction, isPending];
};

[liyuwen]

Thanks! Your code helps me a lot!

[HBLAB-TruongTT]

this is not how you should use useTransition bro

[DiegoJavierConchilloWagner]

Enlighten us with your intelligence on how to use useTransition and make it work, please.

[pookmish]

This helped me a lot. One thing I did differently was wrapped the runAction in a useCallback for safe measures. Is there any reason not to do that?

[DmacMcgreg]

Check this out
https://next-safe-action.dev/

[Foxeye-Rinx]

Same as @naftali100 at this comment, but
use const onFinishRef = useRef(onFinished); to prove onFinish is not a dependency of the useEffect to suppress the linter so you don't have to // eslint-disable-next-line react-hooks/exhaustive-deps

Changes:

// in useEffect
- if (onFinish) onFinish(result);
+ if (onFinishRef.current) onFinishRef.current(result);

import { useEffect, useRef, useState, useTransition } from 'react';

export const useServerAction = <P extends any[], R>(
  action: (...args: P) => Promise<R>,
  onFinished?: (_: R | undefined) => void,
): [(...args: P) => Promise<R | undefined>, boolean] => {
  const [isPending, startTransition] = useTransition();
  const [result, setResult] = useState<R>();
  const [finished, setFinished] = useState(false);
  const resolver = useRef<(value?: R | PromiseLike<R>) => void>();
  const onFinishRef = useRef(onFinished);
  useEffect(() => {
    if (!finished) return;
    if (onFinishRef.current) onFinishRef.current(result);
    resolver.current?.(result);
  }, [result, finished]);

  const runAction = async (...args: P): Promise<R | undefined> => {
    startTransition(() => {
      action(...args).then((data) => {
        setResult(data);
        setFinished(true);
      });
    });

    return new Promise((resolve) => {
      resolver.current = resolve;
    });
  };

  return [runAction, isPending];
};

Use in component:

async function deleteDataAction(dataId) {
  return deleteMyData(dataId)
}

const [deleteData, isDeleting] = useServerAction(deleteDataAction)

<button onClick={() => deleteData(dataId)} isLoading={isDeleting}> Delete </button>