add skeleton placeholders

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;
+}

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">
+<div class="flex flex-col gap-2 text-center justify-center">
-  <p class="text-xl font-medium">
+  <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>

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>
 

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>

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-6xl" class:placeholder class:width-limit={placeholder}>
-  <div class="text-2xl font-medium">MPH</div>
+    {placeholder ? '-----' : formatted}
+  </div>
+  <div
+    class="text-2xl font-medium"
+    class:placeholder={speed === Math.hypot(-999, -999)}
+  >
+    MPH
+  </div>
 </div>

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">

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>