switch crypto implementation and add spinner

src/views/EnterCredentials.svelte

@@ -7,6 +7,7 @@
     import { navigate } from '../lib/routing.js';
     import Link from '../ui/Link.svelte';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
+    import Spinner from '../ui/Spinner.svelte';
 
 
     let errorMsg = null;
@@ -19,6 +20,7 @@
         }
     }
 
+    let saving = false;
     async function save() {
         if (passphrase !== confirmPassphrase) {
             alert.shake();
@@ -27,6 +29,7 @@
 
         let credentials = {AccessKeyId, SecretAccessKey};
         try {
+            saving = true;
             await invoke('save_credentials', {credentials, passphrase});
             if ($appState.currentRequest) {
                 navigate('Approve');
@@ -47,6 +50,8 @@
             if (alert) {
                 alert.shake();
             }
+
+            saving = false;
         }
     }
 </script>
@@ -65,7 +70,13 @@
     <input type="password" placeholder="Passphrase" bind:value="{passphrase}" class="input input-bordered" />
     <input type="password" placeholder="Re-enter passphrase" bind:value={confirmPassphrase} class="input input-bordered" on:change={confirm} />
 
-    <input type="submit" class="btn btn-primary" />
+    <button type="submit" class="btn btn-primary">
+        {#if saving}
+            <Spinner class="w-5 h-5" color="primary-content" thickness="2px"/>
+        {:else}
+            Submit
+        {/if}
+    </button>
     <Link target="Home" hotkey="Escape">
         <button class="btn btn-sm btn-outline w-full">Cancel</button>
     </Link>

src/views/Unlock.svelte

@@ -7,12 +7,14 @@
     import { getRootCause } from '../lib/errors.js';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
     import Link from '../ui/Link.svelte';
+    import Spinner from '../ui/Spinner.svelte';
 
 
     let errorMsg = null;
     let alert;
     let passphrase = '';
     let loadTime = 0;
+    let saving = false;
     async function unlock() {
         // The hotkey for navigating here from homepage is Enter, which also
         // happens to trigger the form submit event
@@ -21,6 +23,7 @@
         }
 
         try {
+            saving = true;
             let r = await invoke('unlock', {passphrase});
             $appState.credentialStatus = 'unlocked';
             if ($appState.currentRequest) {
@@ -43,6 +46,8 @@
             if (alert) {
                 alert.shake();
             }
+
+            saving = true;
         }
     }
 
@@ -62,7 +67,14 @@
     <!-- svelte-ignore a11y-autofocus -->
     <input autofocus name="password" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" class="input input-bordered" />
 
-    <input type="submit" class="btn btn-primary" />
+    <button type="submit" class="btn btn-primary">
+        {#if saving}
+            <Spinner class="w-5 h-5" color="primary-content" thickness="2px"/>
+        {:else}
+            Submit
+        {/if}
+    </button>
+
     <Link target="Home" hotkey="Escape">
         <button class="btn btn-outline btn-sm w-full">Cancel</button>
     </Link>