From 3881930e8218eb55078c165d951301befe0932c6 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 17 Mar 2025 17:17:18 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8(frontend)=20block=20button=20when?=
 =?UTF-8?q?=20creating=20doc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the user clicks on the button to create a new doc,
the button is disabled to prevent multiple clicks.
Multiple clicks on the button could create multiple docs
and create a error about duplicated paths.
---
 CHANGELOG.md                                                | 4 ++++
 .../src/features/left-panel/components/LeftPanelHeader.tsx  | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4dc767f6..c1f1f5ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+## Changed
+
+- 🚨(frontend) block button when creating doc #749
+
 ## Fixed
 
 - 🐛(back) validate document content in serializer #822
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
index a3fcb7a9..e2358f22 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
@@ -33,7 +33,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
   useCmdK(openSearchModal);
   const { togglePanel } = useLeftPanelStore();
 
-  const { mutate: createDoc } = useCreateDoc({
+  const { mutate: createDoc, isPending: isCreatingDoc } = useCreateDoc({
     onSuccess: (doc) => {
       router.push(`/docs/${doc.id}`);
       togglePanel();
@@ -81,7 +81,9 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
               )}
             </Box>
             {authenticated && (
-              <Button onClick={createNewDoc}>{t('New doc')}</Button>
+              <Button onClick={createNewDoc} disabled={isCreatingDoc}>
+                {t('New doc')}
+              </Button>
             )}
           </Box>
         </SeparatedSection>