From 4d8e4061b3e5b11987991a3efd57f73b9fb3195c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 2 Oct 2020 19:09:19 +0100
Subject: [PATCH] Disable modal confirm button while async callbacks are being
 processed to avoid multiple executions

---
 .../common/Modal/ModalFooter.svelte           | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/common/Modal/ModalFooter.svelte b/packages/builder/src/components/common/Modal/ModalFooter.svelte
index 39c2652ead..fb85a1cbb2 100644
--- a/packages/builder/src/components/common/Modal/ModalFooter.svelte
+++ b/packages/builder/src/components/common/Modal/ModalFooter.svelte
@@ -10,31 +10,50 @@
   export let onConfirm
 
   const modalContext = getContext(ContextKey)
+  let loading = false
 
   function hide() {
     modalContext.hide()
   }
 
   async function confirm() {
+    loading = true
     if (!onConfirm || (await onConfirm()) !== false) {
       hide()
     }
+    loading = false
   }
 </script>
 
-{#if showCancelButton || showConfirmButton}
-  <footer>
+<footer>
+  <div class="content">
+    <slot />
+  </div>
+  <div class="buttons">
     {#if showCancelButton}
       <Button secondary on:click={hide}>{cancelText}</Button>
     {/if}
     {#if showConfirmButton}
-      <Button primary {...$$restProps} on:click={confirm}>{confirmText}</Button>
+      <Button
+        primary
+        {...$$restProps}
+        disabled={$$props.disabled || loading}
+        on:click={confirm}>
+        {confirmText}
+      </Button>
     {/if}
-  </footer>
-{/if}
+  </div>
+</footer>
 
 <style>
   footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+  .buttons {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;