From 7b2bf7031fe1dc95538044650aa35391261b3884 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 18 Jul 2022 06:10:33 +0200
Subject: [PATCH] Make ToolToggleEditing uninteractable while save is running

---
 .../events/toolbar/toolToggleEditing.tsx      | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/components/events/toolbar/toolToggleEditing.tsx b/components/events/toolbar/toolToggleEditing.tsx
index 48c404d..afa1cd0 100644
--- a/components/events/toolbar/toolToggleEditing.tsx
+++ b/components/events/toolbar/toolToggleEditing.tsx
@@ -1,24 +1,41 @@
-import { faPencil, faSave } from "@fortawesome/free-solid-svg-icons"
+import { faAsterisk, faPencil, faSave } from "@fortawesome/free-solid-svg-icons"
 import { useTranslation } from "next-i18next"
 import { useDefinedContext } from "../../../utils/definedContext"
 import { EditingContext, EditingMode } from "../../generic/editable/base"
+import { usePromise, UsePromiseStatus } from "../../generic/loading/promise"
 import { FestaIcon } from "../../generic/renderers/fontawesome"
 import { Tool } from "../../generic/toolbar/tool"
+import cursor from "../../../styles/cursor.module.css"
 
 
 export type ToolToggleEditingProps = {
-    save: () => void,
+    save: () => Promise<void>,
 }
 
 
 /**
  * ToolBar {@link Tool} which switches between {@link EditingMode}s of the surrounding context.
+ * 
+ * It calls an async function to save data when switching from edit mode to view mode, preventing the user from switching back again until the data is saved, but allowing them to view the updated resource.
  */
-export function ToolToggleEditing({ save }: ToolToggleEditingProps) {
+export function ToolToggleEditing(props: ToolToggleEditingProps) {
     const { t } = useTranslation()
     const [editing, setEditing] = useDefinedContext(EditingContext)
 
-    if (editing === EditingMode.EDIT) {
+    const { run: save, status: saveStatus } = usePromise<void, void>(props.save)
+
+    if (saveStatus === UsePromiseStatus.PENDING) {
+        return (
+            <Tool
+                aria-label={t("toolToggleEditingSaving")}
+                disabled
+                className={cursor.loadingBlocking}
+            >
+                <FestaIcon icon={faAsterisk} spin />
+            </Tool>
+        )
+    }
+    else if (editing === EditingMode.EDIT) {
         return (
             <Tool
                 aria-label={t("toolToggleEditingSave")}