From f26cfdc830467f14e05a8a2d0022905aa55bfe61 Mon Sep 17 00:00:00 2001
From: xiaomai <xsbugh@gmail.com>
Date: Wed, 6 May 2026 16:35:03 +0800
Subject: [PATCH] refactor(frontend): remove top-level await from useAsyncData

Transition to non-blocking data fetching to prevent navigation delays.
Initial data is now applied via immediate watchers instead of blocking setup.
---
 frontend/src/views/AncientArtifactList.vue | 30 ++++++++++++++-----
 frontend/src/views/HabitatDetail.vue       | 14 +++++++--
 frontend/src/views/HabitatList.vue         | 22 +++++++++-----
 frontend/src/views/ItemDetail.vue          | 14 +++++++--
 frontend/src/views/ItemsList.vue           | 30 ++++++++++++++-----
 frontend/src/views/PokemonDetail.vue       | 16 +++++++---
 frontend/src/views/PokemonList.vue         | 35 +++++++++++++++++-----
 frontend/src/views/RecipeDetail.vue        | 14 +++++++--
 frontend/src/views/RecipeList.vue          | 30 ++++++++++++++-----
 9 files changed, 153 insertions(+), 52 deletions(-)

diff --git a/frontend/src/views/AncientArtifactList.vue b/frontend/src/views/AncientArtifactList.vue
index 3984629..af3312a 100644
--- a/frontend/src/views/AncientArtifactList.vue
+++ b/frontend/src/views/AncientArtifactList.vue
@@ -48,7 +48,7 @@ type AncientArtifactListInitialData = {
   page: ListPage<AncientArtifact> | null;
 };
 
-const { data: initialData } = await useAsyncData<AncientArtifactListInitialData>(
+const { data: initialData } = useAsyncData<AncientArtifactListInitialData>(
   `ancient-artifact-list-initial:${locale.value}`,
   async () => {
     const [optionsResult, artifactsResult] = await Promise.allSettled([
@@ -68,13 +68,25 @@ const { data: initialData } = await useAsyncData<AncientArtifactListInitialData>
   { default: () => ({ options: null, page: null }) }
 );
 
-const initialPage = initialData.value?.page ?? null;
-options.value = initialData.value?.options ?? null;
-artifacts.value = initialPage?.items ?? [];
-const initialPageLoaded = ref(initialPage !== null);
-loading.value = !initialPageLoaded.value;
-nextCursor.value = initialPage?.nextCursor ?? null;
-hasMoreArtifacts.value = initialPage?.hasMore ?? false;
+const initialPageLoaded = ref(false);
+
+function applyInitialData(data: AncientArtifactListInitialData | null | undefined) {
+  if (!data) return;
+
+  if (!options.value && data.options) {
+    options.value = data.options;
+  }
+
+  if (initialPageLoaded.value || !data.page) {
+    return;
+  }
+
+  artifacts.value = data.page.items;
+  nextCursor.value = data.page.nextCursor;
+  hasMoreArtifacts.value = data.page.hasMore;
+  initialPageLoaded.value = true;
+  loading.value = false;
+}
 
 const showEditor = computed(() => route.name === 'ancient-artifact-new');
 const canCreateArtifact = computed(() => currentUser.value?.permissions.includes('items.create') === true);
@@ -160,6 +172,8 @@ onMounted(async () => {
 watch(artifactQuery, () => {
   void loadArtifacts();
 });
+
+watch(initialData, applyInitialData, { immediate: true });
 </script>
 
 <template>
diff --git a/frontend/src/views/HabitatDetail.vue b/frontend/src/views/HabitatDetail.vue
index 4150572..451881f 100644
--- a/frontend/src/views/HabitatDetail.vue
+++ b/frontend/src/views/HabitatDetail.vue
@@ -34,7 +34,7 @@ const detailTabs = computed<TabOption[]>(() => [
   { value: 'history', label: t('history.editHistory') }
 ]);
 
-const { data: initialHabitat } = await useAsyncData<HabitatDetail | null>(
+const { data: initialHabitat } = useAsyncData<HabitatDetail | null>(
   `habitat-detail:${activeHabitatRouteId() ?? 'none'}:${locale.value}`,
   async () => {
     const routeId = activeHabitatRouteId();
@@ -51,8 +51,7 @@ const { data: initialHabitat } = await useAsyncData<HabitatDetail | null>(
   { default: () => null }
 );
 
-habitat.value = initialHabitat.value;
-const initialHabitatLoaded = ref(initialHabitat.value !== null);
+const initialHabitatLoaded = ref(false);
 const habitatSeo = computed(() =>
   habitat.value && route.meta.editorModal !== true
     ? resolveSeo({
@@ -66,6 +65,13 @@ const habitatSeo = computed(() =>
 
 useHead(() => (habitatSeo.value ? resolvedSeoHead(habitatSeo.value) : {}));
 
+function applyInitialHabitat(value: HabitatDetail | null | undefined) {
+  if (!value || initialHabitatLoaded.value) return;
+
+  habitat.value = value;
+  initialHabitatLoaded.value = true;
+}
+
 type PokemonRow = {
   id: number;
   name: string;
@@ -219,6 +225,8 @@ watch(
     void loadHabitatDetail();
   }
 );
+
+watch(initialHabitat, applyInitialHabitat, { immediate: true });
 </script>
 
 <template>
diff --git a/frontend/src/views/HabitatList.vue b/frontend/src/views/HabitatList.vue
index 4fed4d7..dbb3673 100644
--- a/frontend/src/views/HabitatList.vue
+++ b/frontend/src/views/HabitatList.vue
@@ -29,7 +29,7 @@ const query = computed(() => ({
   isEventItem: props.eventOnly ? 'true' : 'false'
 }));
 
-const { data: initialData } = await useAsyncData<ListPage<Habitat> | null>(
+const { data: initialData } = useAsyncData<ListPage<Habitat> | null>(
   `${props.eventOnly ? 'event-habitat-list-initial' : 'habitat-list-initial'}:${locale.value}`,
   async () => {
     try {
@@ -45,12 +45,18 @@ const { data: initialData } = await useAsyncData<ListPage<Habitat> | null>(
   { default: () => null }
 );
 
-const initialPage = initialData.value;
-habitats.value = initialPage?.items ?? [];
-const initialPageLoaded = ref(initialPage !== null);
-const loading = ref(!initialPageLoaded.value);
-nextCursor.value = initialPage?.nextCursor ?? null;
-hasMoreHabitats.value = initialPage?.hasMore ?? false;
+const initialPageLoaded = ref(false);
+const loading = ref(true);
+
+function applyInitialData(page: ListPage<Habitat> | null | undefined) {
+  if (!page || initialPageLoaded.value) return;
+
+  habitats.value = page.items;
+  nextCursor.value = page.nextCursor;
+  hasMoreHabitats.value = page.hasMore;
+  initialPageLoaded.value = true;
+  loading.value = false;
+}
 
 const showEditor = computed(() => route.name === 'habitat-new' || route.name === 'event-habitat-new');
 const canCreateHabitat = computed(() => currentUser.value?.permissions.includes('habitats.create') === true);
@@ -134,6 +140,8 @@ onMounted(async () => {
 watch(query, () => {
   void loadHabitats();
 });
+
+watch(initialData, applyInitialData, { immediate: true });
 </script>
 
 <template>
diff --git a/frontend/src/views/ItemDetail.vue b/frontend/src/views/ItemDetail.vue
index 790721c..de9dc90 100644
--- a/frontend/src/views/ItemDetail.vue
+++ b/frontend/src/views/ItemDetail.vue
@@ -73,7 +73,7 @@ const possibleTagEvidenceSections = computed(() => [
   { key: 'neutral', title: t('pages.pokemon.tradingNeutral'), rows: item.value?.possibleTags?.evidence.neutral ?? [] }
 ]);
 
-const { data: initialItem } = await useAsyncData<ItemDetail | null>(
+const { data: initialItem } = useAsyncData<ItemDetail | null>(
   `item-detail:${String(route.name)}:${activeItemRouteId() ?? 'none'}:${locale.value}`,
   async () => {
     const routeId = activeItemRouteId();
@@ -91,8 +91,7 @@ const { data: initialItem } = await useAsyncData<ItemDetail | null>(
   { default: () => null }
 );
 
-item.value = initialItem.value;
-const initialItemLoaded = ref(initialItem.value !== null);
+const initialItemLoaded = ref(false);
 const itemSeo = computed(() =>
   item.value && route.meta.editorModal !== true
     ? resolveSeo({
@@ -106,6 +105,13 @@ const itemSeo = computed(() =>
 
 useHead(() => (itemSeo.value ? resolvedSeoHead(itemSeo.value) : {}));
 
+function applyInitialItem(value: ItemDetail | null | undefined) {
+  if (!value || initialItemLoaded.value) return;
+
+  item.value = value;
+  initialItemLoaded.value = true;
+}
+
 const customization = computed(() => {
   if (!item.value) {
     return [];
@@ -195,6 +201,8 @@ watch(
     void loadItemDetail();
   }
 );
+
+watch(initialItem, applyInitialItem, { immediate: true });
 </script>
 
 <template>
diff --git a/frontend/src/views/ItemsList.vue b/frontend/src/views/ItemsList.vue
index 85783da..85d7c8e 100644
--- a/frontend/src/views/ItemsList.vue
+++ b/frontend/src/views/ItemsList.vue
@@ -110,7 +110,7 @@ type ItemListInitialData = {
   page: ListPage<Item> | null;
 };
 
-const { data: initialData } = await useAsyncData<ItemListInitialData>(
+const { data: initialData } = useAsyncData<ItemListInitialData>(
   `${props.eventOnly ? 'event-item-list-initial' : 'item-list-initial'}:${locale.value}`,
   async () => {
     const [optionsResult, itemsResult] = await Promise.allSettled([
@@ -130,13 +130,25 @@ const { data: initialData } = await useAsyncData<ItemListInitialData>(
   { default: () => ({ options: null, page: null }) }
 );
 
-const initialPage = initialData.value?.page ?? null;
-options.value = initialData.value?.options ?? null;
-items.value = initialPage?.items ?? [];
-const initialPageLoaded = ref(initialPage !== null);
-loading.value = !initialPageLoaded.value;
-nextCursor.value = initialPage?.nextCursor ?? null;
-hasMoreItems.value = initialPage?.hasMore ?? false;
+const initialPageLoaded = ref(false);
+
+function applyInitialData(data: ItemListInitialData | null | undefined) {
+  if (!data) return;
+
+  if (!options.value && data.options) {
+    options.value = data.options;
+  }
+
+  if (initialPageLoaded.value || !data.page) {
+    return;
+  }
+
+  items.value = data.page.items;
+  nextCursor.value = data.page.nextCursor;
+  hasMoreItems.value = data.page.hasMore;
+  initialPageLoaded.value = true;
+  loading.value = false;
+}
 
 const showEditor = computed(() => route.name === 'item-new' || route.name === 'event-item-new');
 const canCreateItem = computed(() => currentUser.value?.permissions.includes('items.create') === true);
@@ -543,6 +555,8 @@ onBeforeUnmount(() => {
 watch(itemQuery, () => {
   void loadItems();
 });
+
+watch(initialData, applyInitialData, { immediate: true });
 watch(itemCreateDefaults, persistItemCreateDefaults, { deep: true });
 watch(showEditor, () => {
   closeCreateDefaultsMenu();
diff --git a/frontend/src/views/PokemonDetail.vue b/frontend/src/views/PokemonDetail.vue
index 94d7ff4..4858c3e 100644
--- a/frontend/src/views/PokemonDetail.vue
+++ b/frontend/src/views/PokemonDetail.vue
@@ -41,7 +41,7 @@ const weathers = ['晴天', '阴天', '雨天'];
 const relatedPokemonLimit = 6;
 const pokemonDetailRouteNames = new Set(['pokemon-detail', 'pokemon-edit']);
 
-const { data: initialPokemon } = await useAsyncData<PokemonDetail | null>(
+const { data: initialPokemon } = useAsyncData<PokemonDetail | null>(
   `pokemon-detail:${activePokemonRouteId() ?? 'none'}:${locale.value}`,
   async () => {
     const routeId = activePokemonRouteId();
@@ -58,9 +58,7 @@ const { data: initialPokemon } = await useAsyncData<PokemonDetail | null>(
   { default: () => null }
 );
 
-pokemon.value = initialPokemon.value;
-relatedHabitatTab.value = initialPokemon.value ? habitatTabValue(initialPokemon.value.environment.id) : '';
-const initialPokemonLoaded = ref(initialPokemon.value !== null);
+const initialPokemonLoaded = ref(false);
 const pokemonSeo = computed(() =>
   pokemon.value && route.meta.editorModal !== true
     ? resolveSeo({
@@ -74,6 +72,14 @@ const pokemonSeo = computed(() =>
 
 useHead(() => (pokemonSeo.value ? resolvedSeoHead(pokemonSeo.value) : {}));
 
+function applyInitialPokemon(value: PokemonDetail | null | undefined) {
+  if (!value || initialPokemonLoaded.value) return;
+
+  pokemon.value = value;
+  relatedHabitatTab.value = habitatTabValue(value.environment.id);
+  initialPokemonLoaded.value = true;
+}
+
 type HabitatRow = {
   id: number;
   name: string;
@@ -518,6 +524,8 @@ watch(
     void loadPokemonDetail();
   }
 );
+
+watch(initialPokemon, applyInitialPokemon, { immediate: true });
 </script>
 
 <template>
diff --git a/frontend/src/views/PokemonList.vue b/frontend/src/views/PokemonList.vue
index 14611bb..993ddfe 100644
--- a/frontend/src/views/PokemonList.vue
+++ b/frontend/src/views/PokemonList.vue
@@ -45,7 +45,7 @@ const query = computed(() => ({
   favoriteThingMode: favoriteThingMode.value
 }));
 
-const { data: initialData } = await useAsyncData<PokemonListInitialData>(
+const { data: initialData } = useAsyncData<PokemonListInitialData>(
   `${props.eventOnly ? 'event-pokemon-list-initial' : 'pokemon-list-initial'}:${locale.value}`,
   async () => {
     const [optionsResult, pokemonResult] = await Promise.allSettled([
@@ -65,15 +65,14 @@ const { data: initialData } = await useAsyncData<PokemonListInitialData>(
   { default: () => ({ options: null, page: null }) }
 );
 
-const initialPage = initialData.value?.page ?? null;
-const options = ref<Options | null>(initialData.value?.options ?? null);
-const pokemon = ref<Pokemon[]>(initialPage?.items ?? []);
+const options = ref<Options | null>(null);
+const pokemon = ref<Pokemon[]>([]);
 const currentUser = ref<AuthUser | null>(null);
-const initialPageLoaded = ref(initialPage !== null);
-const loading = ref(!initialPageLoaded.value);
+const initialPageLoaded = ref(false);
+const loading = ref(true);
 const loadingMore = ref(false);
-const nextCursor = ref<string | null>(initialPage?.nextCursor ?? null);
-const hasMorePokemon = ref(initialPage?.hasMore ?? false);
+const nextCursor = ref<string | null>(null);
+const hasMorePokemon = ref(false);
 const showEditor = computed(() => route.name === 'pokemon-new' || route.name === 'event-pokemon-new');
 const canCreatePokemon = computed(() => currentUser.value?.permissions.includes('pokemon.create') === true);
 const pageTitle = computed(() => t(props.eventOnly ? 'pages.eventPokemon.title' : 'pages.pokemon.title'));
@@ -82,6 +81,24 @@ const pageKicker = computed(() => t(props.eventOnly ? 'pages.eventPokemon.kicker
 const newPokemonPath = computed(() => (props.eventOnly ? '/event-pokemon/new' : '/pokemon/new'));
 const loadingListLabel = computed(() => t(props.eventOnly ? 'pages.eventPokemon.loadingList' : 'pages.pokemon.loadingList'));
 
+function applyInitialData(data: PokemonListInitialData | null | undefined) {
+  if (!data) return;
+
+  if (!options.value && data.options) {
+    options.value = data.options;
+  }
+
+  if (initialPageLoaded.value || !data.page) {
+    return;
+  }
+
+  pokemon.value = data.page.items;
+  nextCursor.value = data.page.nextCursor;
+  hasMorePokemon.value = data.page.hasMore;
+  initialPageLoaded.value = true;
+  loading.value = false;
+}
+
 async function loadPokemon(reset = true) {
   if (!reset && (loading.value || loadingMore.value || !hasMorePokemon.value)) {
     return;
@@ -163,6 +180,8 @@ onMounted(async () => {
 watch(query, () => {
   void loadPokemon();
 });
+
+watch(initialData, applyInitialData, { immediate: true });
 </script>
 
 <template>
diff --git a/frontend/src/views/RecipeDetail.vue b/frontend/src/views/RecipeDetail.vue
index f83f4f2..6f7b651 100644
--- a/frontend/src/views/RecipeDetail.vue
+++ b/frontend/src/views/RecipeDetail.vue
@@ -42,7 +42,7 @@ const recipeSubtitle = computed(() => {
   return categoryName ?? t('pages.recipes.detailSubtitle');
 });
 
-const { data: initialRecipe } = await useAsyncData<RecipeDetail | null>(
+const { data: initialRecipe } = useAsyncData<RecipeDetail | null>(
   `recipe-detail:${String(route.params.id)}:${locale.value}`,
   async () => {
     try {
@@ -54,8 +54,7 @@ const { data: initialRecipe } = await useAsyncData<RecipeDetail | null>(
   { default: () => null }
 );
 
-recipe.value = initialRecipe.value;
-const initialRecipeLoaded = ref(initialRecipe.value !== null);
+const initialRecipeLoaded = ref(false);
 const recipeSeo = computed(() =>
   recipe.value && route.meta.editorModal !== true
     ? resolveSeo({
@@ -69,6 +68,13 @@ const recipeSeo = computed(() =>
 
 useHead(() => (recipeSeo.value ? resolvedSeoHead(recipeSeo.value) : {}));
 
+function applyInitialRecipe(value: RecipeDetail | null | undefined) {
+  if (!value || initialRecipeLoaded.value) return;
+
+  recipe.value = value;
+  initialRecipeLoaded.value = true;
+}
+
 async function loadRecipeDetail() {
   try {
     const nextRecipe = await api.recipeDetail(String(route.params.id));
@@ -119,6 +125,8 @@ watch(
     void loadRecipeDetail();
   }
 );
+
+watch(initialRecipe, applyInitialRecipe, { immediate: true });
 </script>
 
 <template>
diff --git a/frontend/src/views/RecipeList.vue b/frontend/src/views/RecipeList.vue
index 2acf4d4..58554d9 100644
--- a/frontend/src/views/RecipeList.vue
+++ b/frontend/src/views/RecipeList.vue
@@ -52,7 +52,7 @@ type RecipeListInitialData = {
   page: ListPage<Item> | null;
 };
 
-const { data: initialData } = await useAsyncData<RecipeListInitialData>(
+const { data: initialData } = useAsyncData<RecipeListInitialData>(
   `recipe-list-initial:${locale.value}`,
   async () => {
     const [optionsResult, itemsResult] = await Promise.allSettled([
@@ -72,13 +72,25 @@ const { data: initialData } = await useAsyncData<RecipeListInitialData>(
   { default: () => ({ options: null, page: null }) }
 );
 
-const initialPage = initialData.value?.page ?? null;
-options.value = initialData.value?.options ?? null;
-items.value = initialPage?.items ?? [];
-const initialPageLoaded = ref(initialPage !== null);
-loading.value = !initialPageLoaded.value;
-nextCursor.value = initialPage?.nextCursor ?? null;
-hasMoreItems.value = initialPage?.hasMore ?? false;
+const initialPageLoaded = ref(false);
+
+function applyInitialData(data: RecipeListInitialData | null | undefined) {
+  if (!data) return;
+
+  if (!options.value && data.options) {
+    options.value = data.options;
+  }
+
+  if (initialPageLoaded.value || !data.page) {
+    return;
+  }
+
+  items.value = data.page.items;
+  nextCursor.value = data.page.nextCursor;
+  hasMoreItems.value = data.page.hasMore;
+  initialPageLoaded.value = true;
+  loading.value = false;
+}
 
 const showEditor = computed(() => route.name === 'recipe-new');
 const canCreateRecipe = computed(() => currentUser.value?.permissions.includes('recipes.create') === true);
@@ -180,6 +192,8 @@ onMounted(async () => {
 watch(itemQuery, () => {
   void loadItems();
 });
+
+watch(initialData, applyInitialData, { immediate: true });
 </script>
 
 <template>