Show a loading state on settings save buttons (#387)

Co-authored-by: Coracle-Bot <npub1klq6260@nostr.local>

src/routes/settings/content/+page.svelte

@@ -10,6 +10,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Card from "@lib/components/Card.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {blossomServerLists, deriveUserItem, muteLists} from "@app/core"
@@ -31,16 +32,25 @@
   }
 
   const onsubmit = preventDefault(async () => {
-    await publishSettings($settings)
+    loading = true
 
-    await $muteLists.setMutes({publicTags: mutedPubkeys.map(pubkey => ["p", pubkey])}).then(publish)
+    try {
+      await publishSettings($settings)
 
-    await $blossomServerLists.setUrls($state.snapshot(blossomServers)).then(publish)
+      await $muteLists
+        .setMutes({publicTags: mutedPubkeys.map(pubkey => ["p", pubkey])})
+        .then(publish)
 
-    pushToast({message: "Your settings have been saved!"})
+      await $blossomServerLists.setUrls($state.snapshot(blossomServers)).then(publish)
+
+      pushToast({message: "Your settings have been saved!"})
+    } finally {
+      loading = false
+    }
   })
 
   const settings = createSettingsForm()
+  let loading = $state(false)
   let mutedPubkeys = $state($userMuteList?.pubkeys() ?? [])
   let blossomServers = $state($userBlossomServerList?.urls() ?? [])
 </script>
@@ -128,8 +138,11 @@
       </Field>
     </Card>
     <Card class="sticky -bottom-3 shadow-md flex flex-row items-center justify-between gap-4">
-      <Button class="button button-neutral" onclick={reset}>Discard Changes</Button>
+      <Button class="button button-neutral" onclick={reset} disabled={loading}
-      <Button class="button button-primary" type="submit">Save Changes</Button>
+        >Discard Changes</Button>
+      <Button class="button button-primary" type="submit" disabled={loading}>
+        <Spinner {loading}>Save Changes</Spinner>
+      </Button>
     </Card>
   </PageContent>
 </form>

src/routes/settings/privacy/+page.svelte

@@ -23,7 +23,7 @@
   }
 
   const send = async () => {
-    loading = true
+    sendingLogs = true
 
     try {
       const thunk = await sendLogs()
@@ -35,7 +35,7 @@
         pushToast({message: "Your logs have been sent. Thank you!"})
       }
     } finally {
-      loading = false
+      sendingLogs = false
     }
   }
 
@@ -44,13 +44,20 @@
   }
 
   const onsubmit = preventDefault(async () => {
-    await publishSettings($settings)
+    loading = true
 
-    pushToast({message: "Your settings have been saved!"})
+    try {
+      await publishSettings($settings)
+
+      pushToast({message: "Your settings have been saved!"})
+    } finally {
+      loading = false
+    }
   })
 
   const settings = createSettingsForm()
   let loading = $state(false)
+  let sendingLogs = $state(false)
 </script>
 
 <form {onsubmit}>
@@ -89,8 +96,8 @@
           <p>Something went wrong?</p>
         {/snippet}
         {#snippet input()}
-          <Button class="button button-neutral" onclick={send} disabled={loading}>
+          <Button class="button button-neutral" onclick={send} disabled={sendingLogs}>
-            <Spinner {loading}>Send Logs</Spinner>
+            <Spinner loading={sendingLogs}>Send Logs</Spinner>
           </Button>
         {/snippet}
         {#snippet info()}
@@ -101,8 +108,11 @@
       </FieldInline>
     </Card>
     <Card class="sticky -bottom-3 shadow-md flex flex-row items-center justify-between gap-4">
-      <Button class="button button-neutral" onclick={reset}>Discard Changes</Button>
+      <Button class="button button-neutral" onclick={reset} disabled={loading}
-      <Button class="button button-primary" type="submit">Save Changes</Button>
+        >Discard Changes</Button>
+      <Button class="button button-primary" type="submit" disabled={loading}>
+        <Spinner {loading}>Save Changes</Spinner>
+      </Button>
     </Card>
   </PageContent>
 </form>

src/routes/settings/profile/+page.svelte

@@ -178,7 +178,7 @@
     <SignerStatus />
     {#if pomadeEmail}
       <div class="flex flex-col lg:flex-row gap-4 lg:gap-2 justify-end">
-        <Button class="button button-neutral" onclick={startPasswordReset}>
+        <Button class="button button-neutral" onclick={startPasswordReset} disabled={loading}>
           <Spinner {loading}>Update your password</Spinner>
         </Button>
         <Button class="button button-primary" onclick={startRecovery}