🏍️ Adds motionservice with data sync

app/src/routes/+layout.svelte

@@ -13,7 +13,7 @@
 	import Menu from './menu.svelte';
 	import Statusbar from './statusbar.svelte';
 	import Login from './login.svelte';
-	import { mode, outControllerData, servoAnglesOut, socket } from '$lib/stores';
+	import { ModesEnum, mode, outControllerData, servoAngles, servoAnglesOut, socket } from '$lib/stores';
 	import type { Analytics, Battery, DownloadOTA } from '$lib/types/models';
 
 	onMount(async () => {
@@ -25,9 +25,9 @@
 
 		addEventListeners();
 
-        outControllerData.subscribe((data) => socket.sendEvent("input", data));
-        mode.subscribe((data) => socket.sendEvent("mode", data));
-        servoAnglesOut.subscribe((data) => socket.sendEvent("angles", data));
+        outControllerData.subscribe((data) => socket.sendEvent("input", {data}));
+        mode.subscribe((data) => socket.sendEvent("mode", {data}));
+        servoAnglesOut.subscribe((data) => socket.sendEvent("angles", {data}));
 	});
 
     onDestroy(() => {
@@ -43,6 +43,8 @@
 		socket.on('successToast', handleSuccessToast);
 		socket.on('warningToast', handleWarningToast);
 		socket.on('errorToast', handleErrorToast);
+		socket.on('mode', (data:ModesEnum) => mode.set(data));
+		socket.on('angles', (angles:number[]) => { if (angles.length) servoAngles.set(angles)});
 		if ($page.data.features.analytics) socket.on('analytics', handleAnalytics);
 		if ($page.data.features.battery) socket.on('battery', handleBattery);
 		if ($page.data.features.download_firmware) socket.on('otastatus', handleOAT);

app/src/routes/controller/+layout.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import Controls from './Controls.svelte';
 	import { socket } from '$lib/stores';
+	import Spinner from '$lib/components/Spinner.svelte';
 </script>
 <div>
-    {#if $socket}
-        <Controls />
-        <slot/>
-    {:else}
-        <div class="flex justify-center items-center">
+    {#if !$socket}
+    <div class="flex flex-col h-full justify-center items-center">
+        <Spinner/>
             <h2>Waiting for connection</h2>
         </div>
+    {:else}
+        <Controls />
+        <slot/>
     {/if}
 </div>

app/src/routes/controller/Controls.svelte

@@ -10,7 +10,7 @@
 	let right: nipplejs.JoystickManager;
 
 	let throttle_timing = 40;
-	let data = new Int8Array(7);
+	let data = new Array(7);
 
 	onMount(() => {
 		left = nipplejs.create({