Add message deletion

src/lib/components/Confirm.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
 
@@ -9,10 +10,22 @@
   export let message
   export let confirm
 
+  let loading = false
+
+  const tryConfirm = async () => {
+    loading = true
+
+    try {
+      await confirm()
+    } finally {
+      loading = false
+    }
+  }
+
   const back = () => history.back()
 </script>
 
-<form class="column gap-4" on:submit|preventDefault={confirm}>
+<form class="column gap-4" on:submit|preventDefault={tryConfirm}>
   <ModalHeader>
     <div slot="title">{title}</div>
     <div slot="info">{subtitle}</div>
@@ -23,8 +36,8 @@
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary">
-      Confirm
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Confirm</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>
   </ModalFooter>