From c98c55b9935f399943360a7c38d0c73a7b620fab Mon Sep 17 00:00:00 2001
From: "Amy J. Ko" <ajko@uw.edu>
Date: Sat, 14 Oct 2023 11:42:19 -0700
Subject: [PATCH] Better loading feedback on button with promise actions.

---
 src/components/app/Spinning.svelte          |  4 ++-
 src/components/project/Collaborators.svelte |  3 --
 src/components/widgets/Button.svelte        | 38 +++++++++++++--------
 src/components/widgets/ConfirmButton.svelte |  2 +-
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/components/app/Spinning.svelte b/src/components/app/Spinning.svelte
index 59821c515..db9382d17 100644
--- a/src/components/app/Spinning.svelte
+++ b/src/components/app/Spinning.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-    export let label: string;
+    import { locale } from '@db/Database';
+
+    export let label = $locale.ui.widget.loading.message;
     export let large = false;
 </script>
 
diff --git a/src/components/project/Collaborators.svelte b/src/components/project/Collaborators.svelte
index 870cab6ed..9b591225a 100644
--- a/src/components/project/Collaborators.svelte
+++ b/src/components/project/Collaborators.svelte
@@ -66,6 +66,3 @@
         flags={project.flags}
     />
 </Dialog>
-
-<style>
-</style>
diff --git a/src/components/widgets/Button.svelte b/src/components/widgets/Button.svelte
index 426494f08..45c77b9ec 100644
--- a/src/components/widgets/Button.svelte
+++ b/src/components/widgets/Button.svelte
@@ -1,8 +1,10 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
+    import Spinning from '../app/Spinning.svelte';
+
     export let tip: string;
-    export let action: () => void;
+    export let action: () => any;
     export let active = true;
     export let stretch = false;
     export let submit = false;
@@ -13,9 +15,12 @@
     export let large = false;
     export let background = false;
 
+    let loading = false;
+
     async function doAction(event: Event) {
         if (active) {
-            action();
+            const result = action();
+            if (result instanceof Promise) loading = true;
             event?.stopPropagation();
         }
     }
@@ -36,19 +41,22 @@
     aria-disabled={!active}
     bind:this={view}
     on:dblclick|stopPropagation
-    on:pointerdown={(event) =>
-        event.button === 0 && active ? doAction(event) : undefined}
-    on:keydown={(event) =>
-        (event.key === 'Enter' || event.key === ' ') &&
-        // Only activate with no modifiers down. Enter is used for other shortcuts.
-        !event.shiftKey &&
-        !event.ctrlKey &&
-        !event.altKey &&
-        !event.metaKey
-            ? doAction(event)
-            : undefined}
->
-    <slot />
+    on:pointerdown={loading
+        ? null
+        : (event) =>
+              event.button === 0 && active ? doAction(event) : undefined}
+    on:keydown={loading
+        ? null
+        : (event) =>
+              (event.key === 'Enter' || event.key === ' ') &&
+              // Only activate with no modifiers down. Enter is used for other shortcuts.
+              !event.shiftKey &&
+              !event.ctrlKey &&
+              !event.altKey &&
+              !event.metaKey
+                  ? doAction(event)
+                  : undefined}
+    >{#if loading}<Spinning />{:else}<slot />{/if}
 </button>
 
 <style>
diff --git a/src/components/widgets/ConfirmButton.svelte b/src/components/widgets/ConfirmButton.svelte
index 07f72d003..4c088baab 100644
--- a/src/components/widgets/ConfirmButton.svelte
+++ b/src/components/widgets/ConfirmButton.svelte
@@ -3,7 +3,7 @@
     import Button from './Button.svelte';
 
     export let tip: string;
-    export let action: () => void;
+    export let action: () => any;
     export let enabled = true;
     export let prompt: string;
     export let background = false;