Loadingpage

MangaCardList
Manga with Tag Page

website/app/pages/index.vue

@@ -1,17 +1,12 @@
 <template>
-    <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
-        <MangaCard v-for="(m, i) in manga" :key="m.key" :manga="m" :expanded="i === expanded" @click="expanded = expanded === i ? -1 : i">
-            <template #actions="formanga">
-                <UButton :to="`manga/${formanga.key}`">Details</UButton>
-            </template>
-        </MangaCard>
-    </UPageBody>
+    <LoadingPage :loading="status === 'pending'" class="p-4 flex flex-row flex-wrap gap-6 mt-0">
+        <MangaCardList :manga="manga" />
+    </LoadingPage>
 </template>
 
 <script setup lang="ts">
-const { data: manga, refresh } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All, lazy: true });
+const { data: manga, refresh, status } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All, lazy: true });
 onMounted(() => refresh());
-const expanded = ref(-1);
 
 useHead({ title: 'Tranga' });
 </script>

website/app/pages/manga/tag/[tag].vue

@@ -0,0 +1,15 @@
+<template>
+    <LoadingPage :loading="status === 'pending'" class="p-4 flex flex-row flex-wrap gap-6 mt-0">
+        <UButton variant="soft" to="/" icon="i-lucide-arrow-left">Home</UButton>
+        <h1 class="text-2xl">Manga with Tag <span class="text-primary font-semibold">{{ tag }}</span></h1>
+        <MangaCardList :manga="manga" />
+    </LoadingPage>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+const tag = route.params.tag as string;
+const { data: manga, status } = await useApi('/v2/Manga/WithTag/{Tag}', { path: { Tag: tag } });
+
+useHead({ title: 'Tranga' });
+</script>

website/app/pages/search.vue

@@ -85,16 +85,19 @@ const connectorClick = (c: MangaConnector) => {
 const searchResult = useState<MinimalManga[]>(() => []);
 const expanded = useState(() => -1);
 const searchQuery = useState<string>(() => '');
-const performSearch = () => {
+const performSearch = async () => {
     if (!query.value) return;
     busy.value = true;
     searchQuery.value = query.value;
-    search(query.value)
+    await search(query.value)
         .then((data) => {
             searchResult.value = data;
             activeStep.value = 2;
         })
-        .finally(() => (busy.value = false));
+        .finally(() => {
+            refreshNuxtData(FetchKeys.Manga.All);
+            busy.value = false;
+        });
 };
 
 const search = async (query: string): Promise<MinimalManga[]> => {