Add error page

Add loading skeleton

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>

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>