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 d542fb71c18bc32b489ba34b6a9af4a1b57b6ad7..71e0d4837fa671bb62874aa43fba675337bef240 100644 (file)
--- 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 9fbe96695a829e3e60547772e11377f0c4a8a450..4fb4abc41e4118c1a786cc3cd4b8477e3f81838a 100644 (file)
--- 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>