From 44e76144dda0d39e256d099e6bd4c0b955952914 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Fri, 23 Feb 2024 17:22:50 -0800
Subject: [PATCH] add skeleton placeholders

---
 client/src/app.css                                  |  4 ++++
 client/src/lib/Dashboard/Compass.svelte             |  7 ++++---
 client/src/lib/Dashboard/Dashboard.svelte           |  2 +-
 client/src/lib/Dashboard/SpeedLimit.svelte          | 11 ++++++++---
 client/src/lib/Dashboard/Speedometer.svelte         | 13 +++++++++++--
 .../src/lib/Dashboard/TopBar/BatteryDisplay.svelte  |  8 ++++++--
 client/src/lib/Dashboard/TopBar/GearSelector.svelte |  5 ++++-
 7 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/client/src/app.css b/client/src/app.css
index 809c4f0..9342690 100644
--- a/client/src/app.css
+++ b/client/src/app.css
@@ -17,3 +17,7 @@
     @apply bg-black text-white;
   }
 }
+
+.placeholder {
+  @apply text-neutral-300 bg-neutral-300 animate-pulse rounded-lg;
+}
diff --git a/client/src/lib/Dashboard/Compass.svelte b/client/src/lib/Dashboard/Compass.svelte
index de3a3a2..a22fe28 100644
--- a/client/src/lib/Dashboard/Compass.svelte
+++ b/client/src/lib/Dashboard/Compass.svelte
@@ -16,13 +16,14 @@
   export let orientation: number
 
   $: accResolved = Math.hypot(accx, accy)
+  $: placeholder = accx === -999 && accy === -999
 </script>
 
-<div class="flex flex-col gap-2 text-center transition-all">
-  <p class="text-xl font-medium">
+<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)}°)
   </p>
-  <p class="text-lg font-medium">
+  <p class="text-lg font-medium" class:placeholder>
     {getAcceleration(accResolved)} ({mpss2knps(accResolved).toFixed(2)}
     kn/s)
   </p>
diff --git a/client/src/lib/Dashboard/Dashboard.svelte b/client/src/lib/Dashboard/Dashboard.svelte
index 3319a41..56281eb 100644
--- a/client/src/lib/Dashboard/Dashboard.svelte
+++ b/client/src/lib/Dashboard/Dashboard.svelte
@@ -32,7 +32,7 @@
     <div class="h-0.5 mt-1 w-full bg-slate-300 border-0"></div>
     <div class="mt-8 flex justify-between">
       <Speedometer speed={speedResolved} />
-      <SpeedLimit />
+      <SpeedLimit speedLimit={-999} />
     </div>
   </div>
 
diff --git a/client/src/lib/Dashboard/SpeedLimit.svelte b/client/src/lib/Dashboard/SpeedLimit.svelte
index 5cd45e0..bb59b73 100644
--- a/client/src/lib/Dashboard/SpeedLimit.svelte
+++ b/client/src/lib/Dashboard/SpeedLimit.svelte
@@ -7,8 +7,6 @@
  -->
 <script lang="ts">
   export let speedLimit: number = 5.0
-
-  $: formatted = speedLimit.toFixed(1)
 </script>
 
 <div
@@ -16,8 +14,15 @@
 >
   <div
     class="px-3 py-1 border-black rounded-xl border-2 flex flex-col text-center gap-1"
+    class:speed-limit-placeholder={speedLimit === -999}
   >
     <div class="text-lg font-medium">SPEED<br />LIMIT</div>
-    <div class="text-2xl font-bold">{formatted}</div>
+    <div class="text-2xl font-bold">{speedLimit}</div>
   </div>
 </div>
+
+<style lang="postcss">
+  .speed-limit-placeholder {
+    @apply animate-pulse bg-neutral-300 text-neutral-300;
+  }
+</style>
diff --git a/client/src/lib/Dashboard/Speedometer.svelte b/client/src/lib/Dashboard/Speedometer.svelte
index 395949a..fdc8d69 100644
--- a/client/src/lib/Dashboard/Speedometer.svelte
+++ b/client/src/lib/Dashboard/Speedometer.svelte
@@ -12,9 +12,18 @@
   export let speed: number = 0.0
 
   $: formatted = mps2mph(speed).toFixed(1)
+
+  $: placeholder = speed === Math.hypot(-999, -999)
 </script>
 
 <div class="flex flex-col gap-4">
-  <div class="text-6xl">{formatted}</div>
-  <div class="text-2xl font-medium">MPH</div>
+  <div class="text-6xl" class:placeholder class:width-limit={placeholder}>
+    {placeholder ? '-----' : formatted}
+  </div>
+  <div
+    class="text-2xl font-medium"
+    class:placeholder={speed === Math.hypot(-999, -999)}
+  >
+    MPH
+  </div>
 </div>
diff --git a/client/src/lib/Dashboard/TopBar/BatteryDisplay.svelte b/client/src/lib/Dashboard/TopBar/BatteryDisplay.svelte
index deeddd0..839f2c9 100644
--- a/client/src/lib/Dashboard/TopBar/BatteryDisplay.svelte
+++ b/client/src/lib/Dashboard/TopBar/BatteryDisplay.svelte
@@ -2,13 +2,17 @@
   export let voltage: number
 
   $: formatted = voltage.toFixed(1)
+
+  $: placeholder = voltage === -999
 </script>
 
 <span class="flex gap-1">
-  <div class="text-lg font-medium">
+  <div class="text-lg font-medium" class:placeholder>
     {formatted} V
   </div>
-  <span class="material-symbols-outlined battery-icon">battery_horiz_075</span>
+  <span class="material-symbols-outlined battery-icon" class:placeholder
+    >battery_horiz_075</span
+  >
 </span>
 
 <style lang="postcss">
diff --git a/client/src/lib/Dashboard/TopBar/GearSelector.svelte b/client/src/lib/Dashboard/TopBar/GearSelector.svelte
index 03770ff..6f034ed 100644
--- a/client/src/lib/Dashboard/TopBar/GearSelector.svelte
+++ b/client/src/lib/Dashboard/TopBar/GearSelector.svelte
@@ -3,7 +3,10 @@
 </script>
 
 <div class="flex justify-center w-full">
-  <div class="flex flex-row gap-2 text-neutral-400 text-xl font-bold">
+  <div
+    class="flex flex-row gap-2 text-neutral-400 text-xl font-bold"
+    class:placeholder={selectedGear === '-999'}
+  >
     <div class:highlighted={selectedGear === 'park'}>P</div>
     <div class:highlighted={selectedGear === 'reverse'}>R</div>
     <div class:highlighted={selectedGear === 'neutral'}>N</div>