🚨(frontend) block button when creating doc

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.

Author: AntoLC

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

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>