Merge branch '352-ajouter-un-loader-sur-la-modale-du-bouton-sauvegarder-partager' into 'master'

Resolve "Ajouter un loader sur la modale du bouton Sauvegarder/partager"

Closes #352

See merge request !288

src/routes/+page.svelte

@@ -244,6 +244,8 @@
   let variablesHistory: string[] = $state([])
   let windowInnerWidth: number | undefined = $state(undefined)
 
+  let saveButtonClicked: boolean = $state(false)
+
   function auditSimulationQuery(
     audit: Audit,
     query: URLSearchParams,
@@ -1246,12 +1248,30 @@
             </ul>
             {#if (displayMode.parametersVariableName !== undefined || displayMode.testCasesIndex.length > 0) && (mobileLawTab || !displayMode.budget) && displayMode.edit === undefined}
               <button
-                class="absolute -bottom-4 right-2 z-30 flex items-center gap-2 rounded border border-le-bleu bg-white px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] text-le-bleu shadow-lg transition-all duration-200 ease-out-back hover:bg-gray-100 active:bg-gray-200 disabled:scale-90 disabled:opacity-0 lg:right-5 xl:right-10"
-                onclick={shareTestCaseSimulationLink}
+                class="absolute -bottom-4 right-2 z-30 flex items-center gap-2 rounded border bg-white px-5 py-2 text-sm font-bold tracking-[0.085em] shadow-lg transition-all duration-200 ease-out-back hover:bg-gray-100 active:bg-gray-200 disabled:scale-90 disabled:opacity-0 lg:right-5 xl:right-10"
+                class:text-gray-700={saveButtonClicked}
+                class:border-gray-700={saveButtonClicked}
+                class:text-le-bleu={!saveButtonClicked}
+                class:border-le-bleu={!saveButtonClicked}
+                class:uppercase={!saveButtonClicked}
+                onclick={async () => {
+                  if (saveButtonClicked) {
+                    return
+                  }
+                  saveButtonClicked = true
+                  await shareTestCaseSimulationLink()
+                  saveButtonClicked = false
+                }}
                 id="situation_savebutton"
               >
-                <span class="hidden lg:inline">Enregistrer / partager</span>
-                <iconify-icon class="text-lg" icon="ri:share-fill"
+                <span class="hidden lg:inline"
+                  >{saveButtonClicked
+                    ? "Lien en cours de création…"
+                    : "Enregistrer / partager"}</span
+                >
+                <iconify-icon
+                  class="text-lg"
+                  icon={saveButtonClicked ? "ri-loader-line" : "ri:share-fill"}
                 ></iconify-icon>
               </button>