From 90baf0aef817ecfc6061d8a677985032f946dbd3 Mon Sep 17 00:00:00 2001
From: seriousm4x <maxi@quoss.org>
Date: Sat, 5 Aug 2023 14:08:26 +0200
Subject: [PATCH] improve home loading, remove $devices store

---
 frontend/src/lib/stores/pocketbase.ts |  2 -
 frontend/src/routes/+layout.svelte    |  2 +-
 frontend/src/routes/+page.svelte      | 57 ++++++++++++++++++---------
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/frontend/src/lib/stores/pocketbase.ts b/frontend/src/lib/stores/pocketbase.ts
index da2def28..a790f3f1 100644
--- a/frontend/src/lib/stores/pocketbase.ts
+++ b/frontend/src/lib/stores/pocketbase.ts
@@ -1,6 +1,5 @@
 import { writable } from 'svelte/store';
 import PocketBase from 'pocketbase';
-import type { Device } from '$lib/types/device';
 
 // set backend url based on environment
 export const backendUrl = import.meta.env.DEV ? 'http://127.0.0.1:8090/' : '/';
@@ -11,4 +10,3 @@ pb.autoCancellation(false);
 
 // export stores
 export const pocketbase = writable(pb);
-export const devices = writable<Device[]>([]);
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 4efbec97..d41aa75b 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -3,7 +3,7 @@
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { pocketbase, backendUrl, devices } from '$lib/stores/pocketbase';
+	import { pocketbase, backendUrl } from '$lib/stores/pocketbase';
 	import { settingsPub } from '$lib/stores/settings';
 	import Navbar from '$lib/components/Navbar.svelte';
 	import Transition from '$lib/components/Transition.svelte';
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index cc46c1a3..1ab80e10 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,36 +1,57 @@
 <script lang="ts">
-	import DeviceCard from '$lib/components/DeviceCard.svelte';
-	import { pocketbase, devices } from '$lib/stores/pocketbase';
 	import { onMount } from 'svelte';
+	import { pocketbase } from '$lib/stores/pocketbase';
+	import DeviceCard from '$lib/components/DeviceCard.svelte';
+	import Alert from '$lib/components/Alert.svelte';
 	import Fa from 'svelte-fa';
-	import { faPlus } from '@fortawesome/free-solid-svg-icons';
+	import { faPlus, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 	import type { Device } from '$lib/types/device';
 
-	onMount(async () => {
-		await getAllDevices();
+	let devices = [] as Device[];
+	let loading = true;
+	let err = false;
 
-		$pocketbase.collection('devices').subscribe('*', async () => {
-			await getAllDevices();
+	function getAllDevices() {
+		$pocketbase
+			.collection('devices')
+			.getFullList(1000, { sort: 'name', expand: 'ports,groups' })
+			.then((resp) => {
+				devices = resp as Device[];
+			})
+			.catch(() => {
+				err = true;
+			})
+			.finally(() => {
+				loading = false;
+			});
+	}
+
+	onMount(() => {
+		getAllDevices();
+
+		$pocketbase.collection('devices').subscribe('*', () => {
+			getAllDevices();
 		});
 
-		$pocketbase.collection('ports').subscribe('*', async () => {
-			await getAllDevices();
+		$pocketbase.collection('ports').subscribe('*', () => {
+			getAllDevices();
 		});
 	});
-
-	async function getAllDevices() {
-		const resp = await $pocketbase
-			.collection('devices')
-			.getFullList(1000, { sort: 'name', expand: 'ports,groups' });
-		devices.set(resp as Device[]);
-	}
 </script>
 
-{#if $devices.length > 0}
+{#if loading}
+	<div class="container max-w-lg mx-auto text-center">
+		<span class="loading loading-dots loading-lg" />
+	</div>
+{:else if err}
+	<div class="container max-w-lg mx-auto">
+		<Alert color="error" message="Failed to get devices from api." icon={faTriangleExclamation} />
+	</div>
+{:else if devices.length > 0}
 	<div
 		class="grid grid-flow-row-dense grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4"
 	>
-		{#each $devices as device}
+		{#each devices as device}
 			<DeviceCard {device} />
 		{/each}
 	</div>