Ожидание отправки в NextJS

Давайте заблокируем повторную отправку, пока сервер обрабатывает форму. Хук useFormStatus из react-dom работает только внутри form и сообщает, идет ли сейчас отправка. Вынесем кнопку в дочерний клиентский компонент:

export let names = [];

'use server';

import { names } from './data';

export async function addName(formData) {
	let name = formData.get('name');
	names.push(String(name).trim());
}

'use client';

import { useFormStatus } from 'react-dom';

export default function SubmitButton() {
	let { pending } = useFormStatus();
	
	return (
		<button type="submit" disabled={pending}>
			{pending ? 'Saving' : 'Save'}
		</button>
	);
}

Подключим кнопку внутри формы на серверной странице:

import { names } from './data';
import { addName } from './actions';
import SubmitButton from './SubmitButton';

export default function NamesPage() {
	return (
		<div>
			<ul>
				{names.map(function (name, index) {
					return <li key={index}>{name}</li>;
				})}
			</ul>
			<form action={addName}>
				<input type="text" name="name" placeholder="Your name" />
				<SubmitButton />
			</form>
		</div>
	);
}

При сохранении комментария меняйте подпись на кнопке на английское Sending и отключайте ее до ответа сервера.