From 029177fa6907c6a9691d35351df96e3e0cad3ab4 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Wed, 27 Nov 2024 12:43:30 +0100
Subject: [PATCH] Fixed delete button being clickable multiple times (#21736)

REF
https://linear.app/ghost/issue/PLG-287/fix-double-click-on-delete-button-impacting-comment-count
---
 apps/comments-ui/src/components/popups/DeletePopup.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/comments-ui/src/components/popups/DeletePopup.tsx b/apps/comments-ui/src/components/popups/DeletePopup.tsx
index adb1b3a1b4..09bd5a1654 100644
--- a/apps/comments-ui/src/components/popups/DeletePopup.tsx
+++ b/apps/comments-ui/src/components/popups/DeletePopup.tsx
@@ -8,6 +8,7 @@ import {useState} from 'react';
 const DeletePopup = ({comment}: {comment: Comment}) => {
     const {dispatchAction, t} = useAppContext();
     const [progress, setProgress] = useState('default');
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
     let buttonColor = 'bg-red-600';
     if (progress === 'sent') {
@@ -44,6 +45,12 @@ const DeletePopup = ({comment}: {comment: Comment}) => {
     const submit = (event: React.MouseEvent) => {
         event.stopPropagation();
 
+        // Prevent multiple submissions
+        if (isSubmitting) {
+            return;
+        }
+
+        setIsSubmitting(true);
         setProgress('sending');
 
         setTimeout(() => {
@@ -66,6 +73,7 @@ const DeletePopup = ({comment}: {comment: Comment}) => {
                 <div className="mt-auto flex flex-col items-center justify-start gap-4 sm:mt-8 sm:flex-row">
                     <button
                         className={`text-md flex h-[44px] w-full items-center justify-center rounded-md px-4 font-sans font-medium text-white transition duration-200 ease-linear sm:w-fit ${buttonColor} opacity-100 hover:opacity-90`}
+                        disabled={isSubmitting}
                         type="button"
                         onClick={submit}
                     >