simplify fetch on edit page

frontend/src/routes/device/[id]/+page.svelte

@@ -1,35 +1,33 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { devices } from '$lib/stores/pocketbase';
+	import { pocketbase } from '$lib/stores/pocketbase';
 	import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 	import Alert from '$lib/components/Alert.svelte';
 	import DeviceForm from '$lib/components/DeviceForm.svelte';
-	import type { Device } from '$lib/types/device';
+	import type { Device, Port } from '$lib/types/device';
 
-	let waitingForDevices = true;
-	let device: Device | undefined;
-	let deviceClone: Device | undefined;
+	async function getDevice() {
+		const resp = await $pocketbase
+			.collection('devices')
+			.getOne($page.params.id, { expand: 'ports,groups' });
 
-	devices.subscribe((data) => {
-		if (waitingForDevices === false) return;
-		if (data.length === 0) return;
-
-		device = data.find((dev) => dev.id === $page.params.id);
-		if (device !== undefined) {
-			deviceClone = device;
-			if (deviceClone.expand.ports === undefined) {
-				deviceClone.expand.ports = [];
-			}
+		let device = resp as Device;
+		if (!device.expand.ports) {
+			device.expand.ports = [] as Port[];
 		}
-		waitingForDevices = false;
-	});
+
+		return resp as Device;
+	}
 </script>
 
-{#if waitingForDevices}
+{#await getDevice()}
 	<div class="container max-w-lg mx-auto text-center">
 		<span class="loading loading-dots loading-lg" />
 	</div>
-{:else if device === undefined || deviceClone === undefined}
+{:then device}
+	<h1 class="text-3xl font-bold mb-8">{device.name}</h1>
+	<DeviceForm {device} />
+{:catch}
 	<div class="container max-w-lg mx-auto">
 		<Alert
 			color="error"
@@ -37,7 +35,4 @@
 			icon={faTriangleExclamation}
 		/>
 	</div>
-{:else}
-	<h1 class="text-3xl font-bold mb-8">{device.name}</h1>
-	<DeviceForm device={deviceClone} />
-{/if}
+{/await}