From be463ae56a8eaa920f84fd1e30c70dbd3eaa07ee Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Sat, 11 Oct 2025 22:30:25 +0200
Subject: [PATCH] Add error page Add loading skeleton

---
 website/app/error.vue       | 16 ++++++++++++++++
 website/app/pages/index.vue |  4 +++-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 website/app/error.vue

diff --git a/website/app/error.vue b/website/app/error.vue
new file mode 100644
index 0000000..d6e188c
--- /dev/null
+++ b/website/app/error.vue
@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <h1>{{ error?.statusCode }}</h1>
+        <p>{{ error?.message }}</p>
+        <NuxtLink to="/">Go back home</NuxtLink>
+        <NuxtLink to="https://github.com/C9Glax/tranga-website/issues/new"><Icon name="i-lucide-github" />Report this issue</NuxtLink>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+defineProps({
+    error: Object as () => NuxtError,
+})
+</script>
\ No newline at end of file
diff --git a/website/app/pages/index.vue b/website/app/pages/index.vue
index 3f83ff4..52688d7 100644
--- a/website/app/pages/index.vue
+++ b/website/app/pages/index.vue
@@ -1,6 +1,8 @@
 <template>
     <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
+        <USkeleton v-if="status !== 'success'" class="max-w-[600px] w-full h-[350px]" />
         <MangaCard
+            v-else
             v-for="(m, i) in manga"
             :manga="m"
             :expanded="i === expanded"
@@ -13,6 +15,6 @@
 </template>
 
 <script setup lang="ts">
-const { data: manga } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All });
+const { data: manga, status } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All, lazy: true });
 const expanded = ref(-1);
 </script>