From e447b133ca217eba969ed6ec3c749e41133083dd Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Fri, 23 Feb 2024 17:27:25 -0800
Subject: [PATCH] style: fix skeleton widths

---
 client/src/lib/Dashboard/Compass.svelte | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/src/lib/Dashboard/Compass.svelte b/client/src/lib/Dashboard/Compass.svelte
index a22fe28..86837a9 100644
--- a/client/src/lib/Dashboard/Compass.svelte
+++ b/client/src/lib/Dashboard/Compass.svelte
@@ -19,12 +19,22 @@
   $: placeholder = accx === -999 && accy === -999
 </script>
 
-<div class="flex flex-col gap-2 text-center justify-center">
-  <p class="text-xl font-medium" class:placeholder>
-    Heading {getDirection(orientation)} ({orientation.toFixed(2)}°)
+<div class="flex flex-col gap-2 text-center transition-all">
+  <p class="text-xl font-medium">
+    {#if !placeholder}
+      Heading {getDirection(orientation)} ({orientation.toFixed(2)}°)
+    {:else}
+      <span class="placeholder">--------------------------------</span>
+    {/if}
   </p>
-  <p class="text-lg font-medium" class:placeholder>
-    {getAcceleration(accResolved)} ({mpss2knps(accResolved).toFixed(2)}
-    kn/s)
+  <p class="text-lg font-medium">
+    {#if !placeholder}
+      {getAcceleration(accResolved)} ({mpss2knps(accResolved).toFixed(2)}
+      kn/s)
+    {:else}
+      <span class="placeholder"
+        >-----------------------------------------------------</span
+      >
+    {/if}
   </p>
 </div>