diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 09d8ec5e1e162fd02056077d6f77e7e20494d9ea..af48d771610a27cec08126a4608fec3cbcfe3afc 100644 --- a/src/routes/+page.svelte +++ b/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>