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

}

[samc18]

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];
};

[Archivedent1]

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

[roachadam]

Also curious on best practice here

[blacksandsolutions]

But what about if you don't submit the action directly. E.g. you use something like React Hook Form to validate the form before it is submitted?
In the code below LoadingBlock is an attempt to disable the form and display a loading state whilst submit is in progress.
But the pending status never updates, so the loading state never gets shown

[blacksandsolutions]

Nevermind, having a slow half hour. Resolved using local state
const [loading, setLoading] = useState(false)

[debdutsahaangel]

use useFormStatus() in the nested component this will update.

[popuguytheparrot]

How to without forms?

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