feat(loader): ajout d'un loader à la place du bouton lorsque l'on publie un document

targets/frontend/src/components/button/PublishButton.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Button, CircularProgress as Spinner } from "@mui/material";
+
+type Props = {
+  disabled?: boolean;
+  isPublishing: boolean;
+  onClick: () => void;
+  children: JSX.Element | string | undefined;
+};
+
+export function PublishButton({
+  disabled=false,
+  onClick,
+  children,
+  isPublishing,
+}: Props) {
+  return isPublishing ? (
+    <Spinner />
+  ) : (
+    <Button
+      variant="contained"
+      type="button"
+      color="success"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+}

targets/frontend/src/components/contributions/answers/AnswerForm.tsx

@@ -1,4 +1,4 @@
-import { Button, FormControl, Stack, Alert } from "@mui/material";
+import { Alert, Button, FormControl, Stack } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -16,6 +16,7 @@ import {
 } from "./references";
 import { getNextStatus, getPrimaryButtonLabel } from "../status/utils";
 import { FicheSpDocumentInput } from "./references/FicheSpDocumentInput";
+import { PublishButton } from "src/components/button/PublishButton";
 
 const answerFormBaseSchema = answerRelationSchema
   .pick({
@@ -314,34 +315,30 @@ export const AnswerForm = ({
               : undefined
           }
         />
-        {!submitting && (
-          <Stack direction="row" justifyContent="end" spacing={2} padding={2}>
-            <Button
-              type="button"
-              onClick={() => submit("REDACTING")}
-              disabled={status === "TODO" || status === "REDACTING"}
-            >
-              Remettre en rédaction
-            </Button>
-            <Button
-              variant="text"
-              type="button"
-              disabled={isNotEditable(answer)}
-              onClick={() => submit("REDACTING")}
-            >
-              Sauvegarder
-            </Button>
-            <Button
-              variant="contained"
-              type="button"
-              color="success"
-              onClick={() => submit(getNextStatus(status))}
-              disabled={submitting || status === "PUBLISHED"}
-            >
-              {getPrimaryButtonLabel(status)}
-            </Button>
-          </Stack>
-        )}
+        <Stack direction="row" justifyContent="end" spacing={2} padding={2}>
+          <Button
+            type="button"
+            onClick={() => submit("REDACTING")}
+            disabled={status === "TODO" || status === "REDACTING" || submitting}
+          >
+            Remettre en rédaction
+          </Button>
+          <Button
+            variant="text"
+            type="button"
+            disabled={isNotEditable(answer) || submitting}
+            onClick={() => submit("REDACTING")}
+          >
+            Sauvegarder
+          </Button>
+          <PublishButton
+            onClick={() => submit(getNextStatus(status))}
+            disabled={submitting || status === "PUBLISHED"}
+            isPublishing={submitting}
+          >
+            {getPrimaryButtonLabel(status)}
+          </PublishButton>
+        </Stack>
       </Stack>
     </form>
   );

targets/frontend/src/components/contributions/questions/EditQuestionAnswerList.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   Checkbox,
   Paper,
   Stack,
@@ -19,6 +18,7 @@ import { Answer } from "../type";
 import { StatusContainer } from "../status";
 import { useRouter } from "next/router";
 import { fr } from "@codegouvfr/react-dsfr";
+import { PublishButton } from "../../button/PublishButton";
 
 type EditQuestionAnswerListProps = {
   answers: Answer[];
@@ -76,8 +76,10 @@ export const QuestionAnswerList = ({
     )
   );
   const [displayPublish, setDisplayPublish] = useState(false);
+  const [isPublishing, setIsPublishing] = useState(false);
 
   const publishAll = async () => {
+    setIsPublishing(true);
     const ids = Object.entries(answersCheck).reduce<string[]>(
       (arr, [id, checked]) => {
         if (checked) {
@@ -88,7 +90,12 @@ export const QuestionAnswerList = ({
       []
     );
     const promises = ids.map((id) => onPublish(id));
-    await Promise.all(promises);
+    try {
+      await Promise.all(promises).finally(() => setIsPublishing(false));
+    } catch (e) {
+      setIsPublishing(false);
+      throw e;
+    }
   };
   const redirectToAnswer = (id: string) => {
     router.push(`/contributions/answers/${id}`);
@@ -103,15 +110,13 @@ export const QuestionAnswerList = ({
     <Stack alignItems="stretch">
       <Stack>
         <Stack direction="row" alignItems="start" spacing={2}>
-          <Button
-            variant="contained"
-            type="button"
-            color="success"
+          <PublishButton
             disabled={!displayPublish}
             onClick={publishAll}
+            isPublishing={isPublishing}
           >
             Publier
-          </Button>
+          </PublishButton>
         </Stack>
         <TableContainer component={Paper}>
           <Table size="small" aria-label="purchases">

targets/frontend/src/components/layout/Navigation.tsx

@@ -127,6 +127,7 @@ export function Navigation() {
           ) : (
             href && (
               <Stack
+                key={key}
                 direction="row"
                 justifyContent="space-between"
                 alignItems="center"

targets/frontend/src/modules/agreements/components/Common/Form.tsx

@@ -1,16 +1,13 @@
 import { AlertColor, Button, FormControl, Stack } from "@mui/material";
-import {
-  FormAutocompleteChips,
-  FormSwitch,
-  FormTextField,
-} from "src/components/forms";
+import { FormAutocompleteChips, FormTextField } from "src/components/forms";
 
 import { useForm } from "react-hook-form";
 import { Agreement, agreementSchema } from "../../type";
 import React, { useState } from "react";
 import { SnackBar } from "src/components/utils/SnackBar";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
+import { PublishButton } from "../../../../components/button/PublishButton";
 
 type FormData = Partial<z.infer<typeof agreementSchemaUpsert>>;
 
@@ -86,6 +83,7 @@ export const AgreementForm = ({
       });
     }
   };
+  const [isPublishing, setIsPublishing] = useState(false);
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -199,29 +197,30 @@ export const AgreementForm = ({
             {agreement ? "Sauvegarder" : "Créer"}
           </Button>
           {onPublish && (
-            <Button
-              type="button"
-              variant="contained"
-              color="success"
+            <PublishButton
+              isPublishing={isPublishing}
               onClick={async () => {
+                setIsPublishing(true);
                 try {
                   await onPublish();
                   setSnack({
                     open: true,
                     severity: "success",
                     message: "La convention collective a été publiée",
                   });
+                  setIsPublishing(false);
                 } catch (e: any) {
                   setSnack({
                     open: true,
                     severity: "error",
                     message: `Erreur lors de la publication de la convention collective: ${e.message}`,
                   });
+                  setIsPublishing(false);
                 }
               }}
             >
               Publier
-            </Button>
+            </PublishButton>
           )}
         </Stack>
       </Stack>

targets/frontend/src/modules/informations/components/informationsEdit/InformationsForm.tsx

@@ -1,14 +1,15 @@
-import { Stack, Button, FormControl, Typography } from "@mui/material";
-import React from "react";
-import { useForm, useFieldArray } from "react-hook-form";
+import { Button, FormControl, Stack, Typography } from "@mui/material";
+import React, { useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { FormTextField, FormRadioGroup } from "src/components/forms";
+import { FormRadioGroup, FormTextField } from "src/components/forms";
 
 import { InformationsResult } from "./Informations.query";
 import { Information, informationSchema } from "../../type";
 import { InformationsContent } from "./InformationsContent";
 import { InformationsReference } from "./InformationsReference";
 import { FormCheckbox } from "src/components/forms/Checkbox";
+import { PublishButton } from "../../../../components/button/PublishButton";
 
 export type InformationsFormProps = {
   data?: InformationsResult;
@@ -23,12 +24,7 @@ export const InformationsForm = ({
   onDelete,
   onPublish,
 }: InformationsFormProps): JSX.Element => {
-  const {
-    control,
-    handleSubmit,
-    trigger,
-    formState: { errors },
-  } = useForm<Information>({
+  const { control, handleSubmit } = useForm<Information>({
     defaultValues: data ?? { title: "", dismissalProcess: false },
     resolver: zodResolver(informationSchema),
     shouldFocusError: true,
@@ -56,6 +52,7 @@ export const InformationsForm = ({
   const [expandedContent, setExpandedContent] = React.useState<string | false>(
     false
   );
+  const [isPublishing, setIsPublishing] = useState(false);
 
   return (
     <>
@@ -222,19 +219,21 @@ export const InformationsForm = ({
               Supprimer
             </Button>
             <Button type="submit">Sauvegarder</Button>
-            <Button
-              type="button"
-              variant="contained"
-              color="success"
-              disabled={!onPublish}
-              onClick={async () => {
-                if (onPublish && data?.id) {
-                  await onPublish();
-                }
-              }}
-            >
-              Publier
-            </Button>
+            {onPublish && (
+              <PublishButton
+                disabled={!onPublish}
+                onClick={async () => {
+                  if (data?.id) {
+                    setIsPublishing(true);
+                    await onPublish();
+                    setIsPublishing(false);
+                  }
+                }}
+                isPublishing={isPublishing}
+              >
+                Publier
+              </PublishButton>
+            )}
           </Stack>
         </Stack>
       </form>

targets/frontend/src/modules/models/components/Common/Form.tsx

@@ -26,6 +26,7 @@ import { LegiReferenceInput } from "src/components/contributions/answers/referen
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { FormOtherReferences } from "../../../../components/forms/OtherReferences";
+import { PublishButton } from "../../../../components/button/PublishButton";
 
 type FormData = Partial<z.infer<typeof modelSchemaUpsert>>;
 
@@ -144,6 +145,7 @@ export const ModelForm = ({
       });
     }
   };
+  const [isPublishing, setIsPublishing] = useState(false);
 
   const convertToHTML = async (file: File) => {
     setIsLoadingPreview(true);
@@ -300,31 +302,31 @@ export const ModelForm = ({
             {model ? "Sauvegarder" : "Créer"}
           </Button>
           {onPublish && (
-            <Button
-              type="button"
-              variant="contained"
-              color="success"
+            <PublishButton
+              isPublishing={isPublishing}
               onClick={async () => {
-                if (onPublish) {
-                  try {
-                    await onPublish();
-                    setSnack({
-                      open: true,
-                      severity: "success",
-                      message: "Le modèle de document a été publiée",
-                    });
-                  } catch (e: any) {
-                    setSnack({
-                      open: true,
-                      severity: "error",
-                      message: `Erreur lors de la publication du document: ${e.message}`,
-                    });
-                  }
+                setIsPublishing(true);
+
+                try {
+                  await onPublish();
+                  setSnack({
+                    open: true,
+                    severity: "success",
+                    message: "Le modèle de document a été publiée",
+                  });
+                  setIsPublishing(false);
+                } catch (e: any) {
+                  setSnack({
+                    open: true,
+                    severity: "error",
+                    message: `Erreur lors de la publication du document: ${e.message}`,
+                  });
+                  setIsPublishing(false);
                 }
               }}
             >
               Publier
-            </Button>
+            </PublishButton>
           )}
         </Stack>
       </Stack>

targets/frontend/src/pages/themes/edit/[id].js

@@ -126,10 +126,8 @@ export function EditThemePage() {
     });
   }
 
-  // const notFound = !fetching && !deleteResult.fetching && !theme?.cdtnId;
-
   return (
-    <Layout /* errorCode={(notFound && 404) || null} */ title="Éditer le theme">
+    <Layout title="Éditer le theme">
       <Stack>
         {fetching ? (
           <Spinner />