feat: improve responsiveness

src/lib/components/layout/GenericLayout.svelte

@@ -13,6 +13,8 @@
   import { getContext } from "svelte";
   import type { VisualLayoutConfig } from "./visual-layout.js";
   import { changes, ChangeType, layout } from "$lib/undo-redo";
+  import { fly } from "svelte/transition";
+  import { expoOut } from "svelte/easing";
 
   const { scale, margin, strokeWidth, fontSize, iconFontSize } =
     getContext<VisualLayoutConfig>("visual-layout-config");
@@ -194,6 +196,7 @@
   class="print"
   viewBox="0 0 {layoutInfo.size[0] * scale} {layoutInfo.size[1] * scale}"
   bind:this={groupParent}
+  transition:fly={{ y: 48, easing: expoOut }}
 >
   {#each layoutInfo.keys as key, i}
     <KeyboardKey

src/lib/components/layout/Layout.svelte

@@ -5,6 +5,7 @@
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
   import type { VisualLayout } from "$lib/serialization/visual-layout";
+  import { fade } from "svelte/transition";
 
   $: device = $serialPort?.device ?? "ONE";
   const activeLayer = getContext<Writable<number>>("active-layer");
@@ -32,20 +33,20 @@
 </script>
 
 <div class="container">
-  <fieldset>
-    {#each layers as [title, icon, value]}
-      <button
-        class="icon"
-        use:action={{ title, shortcut: `alt+${value + 1}` }}
-        on:click={() => ($activeLayer = value)}
-        class:active={$activeLayer === value}
-      >
-        {icon}
-      </button>
-    {/each}
-  </fieldset>
-
   {#await layouts[device]() then visualLayout}
+    <fieldset transition:fade>
+      {#each layers as [title, icon, value]}
+        <button
+          class="icon"
+          use:action={{ title, shortcut: `alt+${value + 1}` }}
+          on:click={() => ($activeLayer = value)}
+          class:active={$activeLayer === value}
+        >
+          {icon}
+        </button>
+      {/each}
+    </fieldset>
+
     <GenericLayout {visualLayout} />
   {/await}
 </div>

src/lib/serial/connection.ts

@@ -57,7 +57,7 @@ export async function initSerial(manual = false) {
   const device = get(serialPort) ?? new CharaDevice();
   await device.init(manual);
   serialPort.set(device);
-  sync();
+  await sync();
 }
 
 export async function sync() {