From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 18 Jul 2025 13:59:54 +0000 (+0000)
Subject: frontend: Re-use the loading indicator to show suspense
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=48e304072fdcb4e986b6c756ecc3072fc2bd175f;p=pbs.git

frontend: Re-use the loading indicator to show suspense

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/frontend/src/components/BuildBugs.vue b/frontend/src/components/BuildBugs.vue
index d542fb71..71e0d483 100644
--- a/frontend/src/components/BuildBugs.vue
+++ b/frontend/src/components/BuildBugs.vue
@@ -13,20 +13,28 @@
 		uuid: string,
 	}>();
 
+	const loading = ref(true);
+	const error = ref<Error | null>(null);
 	const bugs = ref<Bug[] | null>(null);
 
 	// Fetch the build
 	const { getBugs } = useBuild(props.uuid);
 
 	onMounted(async () => {
-		bugs.value = await getBugs();
-
-		console.log(bugs.value);
+		try {
+			bugs.value = await getBugs();
+		} catch (err) {
+			error.value = err as Error;
+		} finally {
+			loading.value = false;
+		}
 	});
 </script>
 
 <template>
 	<Section :title="$t('Fixed Bugs')">
-		<BugList :bugs="bugs" v-if="bugs" />
+		<Loader :loading="loading" :error="error">
+			<BugList :bugs="bugs" v-if="bugs" />
+		</Loader>
 	</Section>
 </template>
diff --git a/frontend/src/components/Loader.vue b/frontend/src/components/Loader.vue
index 9fbe9669..4fb4abc4 100644
--- a/frontend/src/components/Loader.vue
+++ b/frontend/src/components/Loader.vue
@@ -1,5 +1,21 @@
+<script setup lang="ts">
+	defineProps<{
+		loading: boolean,
+		error: string,
+	}>()
+</script>
+
 <template>
-	<div class="is-flex is-justify-content-center">
+	<!-- Show a loading indicator if we are still loading -->
+	<div v-if="loading" class="is-flex is-justify-content-center">
 		<div class="loader"></div>
 	</div>
+
+	<!-- Show an error message if there has been an error -->
+	<Notification v-else-if="error" is-danger>
+		{{ error }}
+	</Notification>
+
+	<!-- Otherwise show the content -->
+	<slot v-else />
 </template>