Skeleton in client component during a server action nextJS

Question

I have a client component that calls a server action. The server action returns something and the UI update accordingly. See code below

export default function FormHome() {
  const [open, setOpen] = React.useState(false);
  const [source, setSource] = useState("");

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      ... various values ...
    },
  });

  async function onSubmit(data: z.infer<typeof FormSchema>) {
    const imageStringify = await requestImg(data);
    const binaryData = Buffer.from(imageStringify.image);

    const imageBase64 = URL.createObjectURL(
      new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */)
    );
    setOpen(true);
    setSource(imageBase64);
  }

    return (
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="w-2/3 space-y-6"
        >

Where the await requestImg(data); is the server action. Now, my server action takes a couple of seconds so, when executing, it seems the UI is blocked.

I've read the NextJS documentation about skeleton loading but it seems to work only if there's a server client. In my case, it is a server component, and the UI won't update.

Is there a way to use it with client component?

Answer 1

Did you tried remove ALL of async/await and just use .then()? Worth to try IMO. And since there is react-hook-form onSubmit the action is triggered from client to server, so it should go like normal react stuff, right?