Curious about a security issue - NextJs course 2

Hi! In the second course of nextjs we built the new issue form page.

In order to prevent the user from submitting multiple times the same issue we use the disabled={isSubmitting} on the Button component. However I have noticed that if I spam click on the button I can submit form 1 up to 3 times the same issue before I am redirected to the next page.

Do you know how I can prevent this security issue?
(Which I understand in this application it doesn’t matter however I am still curious about it :wink: )

Here is the code:

type IssueForm = z.infer<typeof issueSchema>;

const NewIssue = () => {
  const {
  } = useForm<IssueForm>({
  const [isSubmitting, setIsSubmitting] = useState(false);

  const createNewIssue = async (data: IssueForm) => {


    try {

      await'/api/issue', data);
      //removed the setIsSubmitting to false
    } catch (error) {

      setError('An error has happened!');


  return (
      className='max-w-lg ml-8 space-y-4'
      onSubmit={handleSubmit((data: IssueForm) => createNewIssue(data))}
      {/* text field component */}
        <TextField.Input placeholder='Issue title' {...register('title')} />
      {/* description field component */}
        render={({ field }) => (
          <SimpleMDE placeholder='Issue description' {...field} />
      <Button disabled={isSubmitting}>

        Create issue {isSubmitting && <Loading />}


export default NewIssue;

Your onClick function can set/check a state variable with the current datetime. Then refuse to submit if new request within past time limit. This would allow you to configure the cooldown time.