use svg animation for spinner

src-tauri/src/app.rs

@@ -74,13 +74,16 @@ pub async fn connect_db() -> Result<SqlitePool, SetupError> {
 async fn setup(app: &mut App) -> Result<(), Box<dyn Error>> {
     APP.set(app.handle()).unwrap();
 
+    let is_first_launch = config::get_or_create_db_path()?.exists();
+
     let pool = connect_db().await?;
     let conf = AppConfig::load(&pool).await?;
     let session = Session::load(&pool).await?;
     let srv = Server::new(conf.listen_addr, conf.listen_port, app.handle()).await?;
 
     config::set_auto_launch(conf.start_on_login)?;
-    if !conf.start_minimized {
+    // if session is empty, this is probably the first launch, so don't autohide
+    if !conf.start_minimized || is_first_launch {
         app.get_window("main")
             .ok_or(HandlerError::NoMainWindow)?
             .show()?;

src-tauri/src/errors.rs

@@ -57,8 +57,12 @@ where
     E: Error,
     M: serde::ser::SerializeMap,
 {
-    let src = err.source().map(|s| format!("{s}"));
-    map.serialize_entry("source", &src)
+    let msg = err.source().map(|s| format!("{s}"));
+    map.serialize_entry("msg", &msg)?;
+    map.serialize_entry("code", &None::<&str>)?;
+    map.serialize_entry("source", &None::<&str>)?;
+
+    Ok(())
 }
 
 

src/ui/Spinner.svelte

@@ -1,113 +1,42 @@
 <script>
-    export let color = 'base-content';
-    export let thickness = '2px';
+    export let thickness = 8;
     let classes = '';
     export { classes as class };
 
-    const colorVars = {
-        'primary': 'p',
-        'primary-focus': 'pf',
-        'primary-content': 'pc',
-        'secondary': 's',
-        'secondary-focus': 'sf',
-        'secondary-content': 'sc',
-        'accent': 'a',
-        'accent-focus': 'af',
-        'accent-content': 'ac',
-        'neutral': 'n',
-        'neutral-focus': 'nf',
-        'neutral-content': 'nc',
-        'base-100': 'b1',
-        'base-200': 'b2',
-        'base-300': 'b3',
-        'base-content': 'bc',
-        'info': 'in',
-        'info-content': 'inc',
-        'success': 'su',
-        'success-content': 'suc',
-        'warning': 'wa',
-        'warning-content': 'wac',
-        'error': 'er',
-        'error-content': 'erc',
-    }
-
-    let arcStyle = `border-width: ${thickness};`;
-    arcStyle += `border-color: hsl(var(--${colorVars[color]})) transparent transparent transparent;`;
+    const radius = (100 - thickness) / 2;
+    // the px are fake, but we need them to satisfy css calc()
+    const circumference = `${2 * Math.PI * radius}px`;
 </script>
 
-<style>
-    #spinner {
-        position: relative;
 
-        animation: spin;
-        animation-duration: 1.5s;
-        animation-iteration-count: infinite;
-        animation-timing-function: linear;
+<svg 
+    style:--circumference={circumference}
+    class={classes}
+    viewBox="0 0 100 100"
+    stroke="currentColor"
+>
+    <circle cx="50" cy="50" r={radius} stroke-width={thickness} />
+</svg>
+
+
+<style>
+    circle {
+        fill: transparent;
+        stroke-dasharray: var(--circumference);
+        transform: rotate(-90deg);
+        transform-origin: center;
+        animation: chase 3s infinite,
+                   spin 1.5s linear infinite;
+    }
+
+    @keyframes chase {
+        0% { stroke-dashoffset: calc(-1 * var(--circumference)); }
+        50% { stroke-dashoffset: calc(-2 * var(--circumference)); }
+        100% { stroke-dashoffset: calc(-3 * var(--circumference)); }
     }
 
     @keyframes spin {
-        50% { transform: rotate(225deg); }
-        100% { transform: rotate(360deg); }
+        50% { transform: rotate(135deg); }
+        100% { transform: rotate(270deg); }
     }
-
-    .arc {
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: 9999px;
-    }
-
-    .arc-top {
-        transform: rotate(-45deg);
-    }
-
-    .arc-right {
-        animation: spin-right;
-        animation-duration: 3s;
-        animation-iteration-count: infinite;
-    }
-
-    .arc-bottom {
-        animation: spin-bottom;
-        animation-duration: 3s;
-        animation-iteration-count: infinite;
-    }
-
-    .arc-left {
-        animation: spin-left;
-        animation-duration: 3s;
-        animation-iteration-count: infinite;
-    }
-
-    @keyframes spin-top {
-        0% { transform: rotate(-45deg); }
-        50% { transform: rotate(315deg); }
-        100% { transform: rotate(-45deg); }
-    }
-
-    @keyframes spin-right {
-        0% { transform: rotate(45deg); }
-        50% { transform: rotate(315deg); }
-        100% { transform: rotate(405deg); }
-    }
-
-    @keyframes spin-bottom {
-        0% { transform: rotate(135deg); }
-        50% { transform: rotate(315deg); }
-        100% { transform: rotate(495deg); }
-    }
-
-    @keyframes spin-left {
-        0% { transform: rotate(225deg); }
-        50% { transform: rotate(315deg); }
-        100% { transform: rotate(585deg); }
-    }
-</style>
-
-
-<div id="spinner" class="w-6 h-6 {classes}">
-    <div class="arc arc-top w-full h-full" style={arcStyle}></div>
-    <div class="arc arc-right w-full h-full" style={arcStyle}></div>
-    <div class="arc arc-bottom w-full h-full" style={arcStyle}></div>
-    <div class="arc arc-left w-full h-full" style={arcStyle}></div>
-</div>
+</style>

src/views/EnterCredentials.svelte

@@ -39,14 +39,16 @@
             }
         }
         catch (e) {
-            if (e.code === "GetSession") {
-                let root = getRootCause(e);
+            window.error = e;
+            const root = getRootCause(e);
+            if (e.code === 'GetSession' && root.code) {
                 errorMsg = `Error response from AWS (${root.code}): ${root.msg}`;
             }
             else {
                 errorMsg = e.msg;
             }
 
+            // if the alert already existed, shake it
             if (alert) {
                 alert.shake();
             }
@@ -71,8 +73,8 @@
     <input type="password" placeholder="Re-enter passphrase" bind:value={confirmPassphrase} class="input input-bordered" on:change={confirm} />
 
     <button type="submit" class="btn btn-primary">
-        {#if saving}
-            <Spinner class="w-5 h-5" color="primary-content" thickness="2px"/>
+        {#if saving }
+            <Spinner class="w-5 h-5" thickness="12"/>
         {:else}
             Submit
         {/if}

src/views/Unlock.svelte

@@ -34,8 +34,8 @@
             }
         }
         catch (e) {
-            if (e.code === 'GetSession') {
-                let root = getRootCause(e);
+            const root = getRootCause(e);
+            if (e.code === 'GetSession' && root.code) {
                 errorMsg = `Error response from AWS (${root.code}): ${root.msg}`;
             }
             else {
@@ -69,7 +69,7 @@
 
     <button type="submit" class="btn btn-primary">
         {#if saving}
-            <Spinner class="w-5 h-5" color="primary-content" thickness="2px"/>
+            <Spinner class="w-5 h-5" thickness="12"/>
         {:else}
             Submit
         {/if}