Better loading feedback on button with promise actions.

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>
 

src/components/project/Collaborators.svelte

@@ -66,6 +66,3 @@
         flags={project.flags}
     />
 </Dialog>
-
-<style>
-</style>

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>

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;