From dabbf0ec703f2ba561563157c03ad24935ddef50 Mon Sep 17 00:00:00 2001
From: xiaomai <xsbugh@gmail.com>
Date: Thu, 30 Apr 2026 14:20:57 +0800
Subject: [PATCH] feat(ui): replace text loading states with skeleton loaders

Add skeleton CSS classes to main.css for consistent loading UI
Apply skeleton loading states to Admin, Habitat, Item, Pokemon, Recipe, and Auth views
Improve perceived performance and accessibility during data fetching
---
 frontend/src/styles/main.css           | 44 ++++++++++++++
 frontend/src/views/AdminView.vue       | 79 ++++++++++++++++++++------
 frontend/src/views/HabitatDetail.vue   | 48 +++++++++++++++-
 frontend/src/views/HabitatList.vue     | 19 ++++++-
 frontend/src/views/ItemDetail.vue      | 55 +++++++++++++++++-
 frontend/src/views/PokemonDetail.vue   | 59 ++++++++++++++++++-
 frontend/src/views/PokemonList.vue     | 31 +++++++++-
 frontend/src/views/RecipeDetail.vue    | 29 +++++++++-
 frontend/src/views/VerifyEmailView.vue |  9 ++-
 9 files changed, 341 insertions(+), 32 deletions(-)

diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index adc0517..45c1421 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -728,6 +728,50 @@ button:disabled,
   height: 28px;
 }
 
+.page-header--skeleton {
+  pointer-events: none;
+}
+
+.skeleton-detail-section {
+  pointer-events: none;
+}
+
+.skeleton-detail-section .detail-section__body {
+  gap: 14px;
+}
+
+.skeleton-row-list li {
+  min-height: 43px;
+}
+
+.skeleton-appearance-row {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 12px;
+}
+
+.skeleton-summary {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+}
+
+.skeleton-summary div {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 8px;
+}
+
+.skeleton-form-stack {
+  display: grid;
+  gap: 14px;
+}
+
+.skeleton-auth-state {
+  display: grid;
+  gap: 12px;
+}
+
 @keyframes shimmer {
   to {
     background-position: -200% 0;
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index 6f478ac..a806b27 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import PageHeader from '../components/PageHeader.vue';
+import Skeleton from '../components/Skeleton.vue';
 import StatusMessage from '../components/StatusMessage.vue';
 import TagsSelect from '../components/TagsSelect.vue';
 import {
@@ -64,6 +65,7 @@ const recipeRows = ref<Recipe[]>([]);
 const habitatRows = ref<Habitat[]>([]);
 const currentUser = ref<AuthUser | null>(null);
 const busy = ref(false);
+const contentLoading = ref(false);
 const message = ref('');
 const creatingSelect = ref('');
 
@@ -99,6 +101,7 @@ const pokemonSelectOptions = computed(() =>
   pokemonRows.value.map((pokemon) => ({ id: pokemon.id, name: pokemon.name, label: `#${pokemon.id} ${pokemon.name}` }))
 );
 const canEdit = computed(() => currentUser.value?.emailVerified === true);
+const showAdminSkeleton = computed(() => busy.value && !message.value && (!currentUser.value || contentLoading.value));
 
 function toIds(values: string[]): number[] {
   return values.map(Number).filter((item) => Number.isInteger(item) && item > 0);
@@ -168,18 +171,29 @@ async function loadHabitats() {
   habitatRows.value = await api.habitats();
 }
 
-async function loadCurrentTab() {
-  await loadOptions();
-  if (activeTab.value === 'config') await loadConfig();
-  if (activeTab.value === 'pokemon') await loadPokemon();
-  if (activeTab.value === 'items') {
-    await Promise.all([loadItems(), loadRecipes()]);
+async function loadCurrentTab(showSkeleton = false) {
+  const shouldShowSkeleton = showSkeleton || !options.value;
+  if (shouldShowSkeleton) {
+    contentLoading.value = true;
   }
-  if (activeTab.value === 'recipes') {
-    await Promise.all([loadRecipes(), loadItems()]);
-  }
-  if (activeTab.value === 'habitats') {
-    await Promise.all([loadHabitats(), loadPokemon(), loadItems()]);
+
+  try {
+    await loadOptions();
+    if (activeTab.value === 'config') await loadConfig();
+    if (activeTab.value === 'pokemon') await loadPokemon();
+    if (activeTab.value === 'items') {
+      await Promise.all([loadItems(), loadRecipes()]);
+    }
+    if (activeTab.value === 'recipes') {
+      await Promise.all([loadRecipes(), loadItems()]);
+    }
+    if (activeTab.value === 'habitats') {
+      await Promise.all([loadHabitats(), loadPokemon(), loadItems()]);
+    }
+  } finally {
+    if (shouldShowSkeleton) {
+      contentLoading.value = false;
+    }
   }
 }
 
@@ -190,7 +204,7 @@ function setTab(tab: AdminTab) {
   }
 
   activeTab.value = tab;
-  void run(loadCurrentTab);
+  void run(() => loadCurrentTab(true));
 }
 
 async function loadAdmin() {
@@ -202,7 +216,7 @@ async function loadAdmin() {
     return;
   }
 
-  await loadCurrentTab();
+  await loadCurrentTab(true);
 }
 
 function resetConfigForm() {
@@ -482,7 +496,36 @@ onMounted(() => {
 
     <StatusMessage v-if="message" variant="warning">{{ message }}</StatusMessage>
 
-    <section v-if="canEdit && activeTab === 'config'" class="admin-layout">
+    <section v-if="showAdminSkeleton" class="admin-layout" aria-busy="true" aria-label="正在加载管理内容">
+      <div class="detail-section skeleton-detail-section" aria-hidden="true">
+        <h2><Skeleton width="96px" height="24px" /></h2>
+        <div class="skeleton-form-stack">
+          <div v-for="index in 5" :key="index" class="field">
+            <Skeleton :width="index === 1 ? '52px' : '72px'" />
+            <Skeleton variant="box" height="44px" />
+          </div>
+          <div class="form-actions">
+            <Skeleton variant="box" width="64px" height="42px" />
+            <Skeleton variant="box" width="64px" height="42px" />
+          </div>
+        </div>
+      </div>
+
+      <div class="detail-section skeleton-detail-section" aria-hidden="true">
+        <h2><Skeleton width="120px" height="24px" /></h2>
+        <ul class="row-list skeleton-row-list">
+          <li v-for="index in 6" :key="index">
+            <Skeleton :width="index % 2 === 0 ? '180px' : '132px'" />
+            <span class="row-actions">
+              <Skeleton variant="box" width="50px" height="34px" />
+              <Skeleton variant="box" width="50px" height="34px" />
+            </span>
+          </li>
+        </ul>
+      </div>
+    </section>
+
+    <section v-else-if="canEdit && activeTab === 'config'" class="admin-layout">
       <form class="detail-section" @submit.prevent="saveConfig">
         <h2>系统配置</h2>
         <div class="field">
@@ -519,7 +562,7 @@ onMounted(() => {
       </div>
     </section>
 
-    <section v-if="canEdit && activeTab === 'pokemon' && options" class="admin-layout">
+    <section v-else-if="canEdit && activeTab === 'pokemon' && options" class="admin-layout">
       <form class="detail-section" @submit.prevent="savePokemon">
         <h2>Pokemon</h2>
         <div class="field"><label for="pokemon-id">ID</label><input id="pokemon-id" v-model="pokemonForm.id" type="number" /></div>
@@ -581,7 +624,7 @@ onMounted(() => {
       </div>
     </section>
 
-    <section v-if="canEdit && activeTab === 'items' && options" class="admin-layout">
+    <section v-else-if="canEdit && activeTab === 'items' && options" class="admin-layout">
       <form class="detail-section" @submit.prevent="saveItem">
         <h2>物品</h2>
         <div class="field"><label for="item-name">名称</label><input id="item-name" v-model="itemForm.name" /></div>
@@ -656,7 +699,7 @@ onMounted(() => {
       </div>
     </section>
 
-    <section v-if="canEdit && activeTab === 'recipes' && options" class="admin-layout">
+    <section v-else-if="canEdit && activeTab === 'recipes' && options" class="admin-layout">
       <form class="detail-section" @submit.prevent="saveRecipe">
         <h2>材料单</h2>
         <div class="field">
@@ -718,7 +761,7 @@ onMounted(() => {
       </div>
     </section>
 
-    <section v-if="canEdit && activeTab === 'habitats' && options" class="admin-layout">
+    <section v-else-if="canEdit && activeTab === 'habitats' && options" class="admin-layout">
       <form class="detail-section" @submit.prevent="saveHabitat">
         <h2>栖息地</h2>
         <div class="field"><label for="habitat-name">名称</label><input id="habitat-name" v-model="habitatForm.name" /></div>
diff --git a/frontend/src/views/HabitatDetail.vue b/frontend/src/views/HabitatDetail.vue
index 3991637..e369cdf 100644
--- a/frontend/src/views/HabitatDetail.vue
+++ b/frontend/src/views/HabitatDetail.vue
@@ -5,7 +5,7 @@ import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
-import StatusMessage from '../components/StatusMessage.vue';
+import Skeleton from '../components/Skeleton.vue';
 import { api, type HabitatDetail } from '../services/api';
 
 const route = useRoute();
@@ -81,7 +81,51 @@ onMounted(async () => {
 </script>
 
 <template>
-  <StatusMessage v-if="!habitat" :duration="0">加载中</StatusMessage>
+  <section v-if="!habitat" class="page-stack" aria-busy="true" aria-label="正在加载栖息地详情">
+    <div class="page-header page-header--skeleton" aria-hidden="true">
+      <div class="page-header__copy">
+        <Skeleton width="132px" />
+        <Skeleton width="240px" height="46px" />
+        <Skeleton width="120px" />
+        <Skeleton width="300px" />
+      </div>
+      <div class="page-header__actions">
+        <Skeleton variant="box" width="88px" height="36px" />
+      </div>
+    </div>
+
+    <div class="detail-grid" aria-hidden="true">
+      <section class="detail-section skeleton-detail-section">
+        <div class="detail-section__header">
+          <Skeleton width="92px" height="24px" />
+        </div>
+        <div class="detail-section__body">
+          <div class="skeleton-chip-row">
+            <Skeleton v-for="index in 4" :key="index" width="76px" class="skeleton-chip" />
+          </div>
+        </div>
+      </section>
+
+      <section class="detail-section skeleton-detail-section">
+        <div class="detail-section__header">
+          <Skeleton width="148px" height="24px" />
+        </div>
+        <div class="detail-section__body">
+          <ul class="row-list appearance-list skeleton-row-list">
+            <li v-for="index in 3" :key="index" class="skeleton-appearance-row">
+              <Skeleton width="104px" />
+              <div class="skeleton-summary">
+                <div v-for="line in 4" :key="line">
+                  <Skeleton width="56px" />
+                  <Skeleton :width="line === 4 ? '72%' : '46%'" />
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </section>
   <section v-else class="page-stack">
     <PageHeader :title="habitat.name" subtitle="栖息地详情">
       <template #kicker>Habitat Detail</template>
diff --git a/frontend/src/views/HabitatList.vue b/frontend/src/views/HabitatList.vue
index 7d4225d..67477a9 100644
--- a/frontend/src/views/HabitatList.vue
+++ b/frontend/src/views/HabitatList.vue
@@ -4,11 +4,12 @@ import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
 import EntityCard from '../components/EntityCard.vue';
 import PageHeader from '../components/PageHeader.vue';
-import StatusMessage from '../components/StatusMessage.vue';
+import Skeleton from '../components/Skeleton.vue';
 import { api, type Habitat } from '../services/api';
 
 const habitats = ref<Habitat[]>([]);
 const loading = ref(true);
+const skeletonCardCount = 6;
 
 onMounted(async () => {
   habitats.value = await api.habitats();
@@ -22,7 +23,21 @@ onMounted(async () => {
       <template #kicker>Habitats</template>
     </PageHeader>
 
-    <StatusMessage v-if="loading" :duration="0">加载中</StatusMessage>
+    <div v-if="loading" class="entity-grid" aria-busy="true" aria-label="正在加载栖息地列表">
+      <article v-for="index in skeletonCardCount" :key="index" class="entity-card entity-card--skeleton">
+        <Skeleton variant="box" width="42px" height="42px" class="skeleton-entity-mark" />
+        <div class="entity-card__content">
+          <Skeleton width="68%" height="24px" />
+          <Skeleton width="66%" />
+          <div class="skeleton-chip-row">
+            <Skeleton v-for="chipIndex in 3" :key="`recipe-${chipIndex}`" width="70px" class="skeleton-chip" />
+          </div>
+          <div class="skeleton-chip-row">
+            <Skeleton v-for="chipIndex in 2" :key="`pokemon-${chipIndex}`" width="82px" class="skeleton-chip" />
+          </div>
+        </div>
+      </article>
+    </div>
     <div v-else class="entity-grid">
       <EntityCard v-for="item in habitats" :key="item.id" :title="item.name" :to="`/habitats/${item.id}`" marker="◎">
         <EditMeta :entity="item" />
diff --git a/frontend/src/views/ItemDetail.vue b/frontend/src/views/ItemDetail.vue
index bc446f0..8e13a5e 100644
--- a/frontend/src/views/ItemDetail.vue
+++ b/frontend/src/views/ItemDetail.vue
@@ -5,7 +5,7 @@ import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
-import StatusMessage from '../components/StatusMessage.vue';
+import Skeleton from '../components/Skeleton.vue';
 import { api, type ItemDetail } from '../services/api';
 
 const route = useRoute();
@@ -29,7 +29,58 @@ onMounted(async () => {
 </script>
 
 <template>
-  <StatusMessage v-if="!item" :duration="0">加载中</StatusMessage>
+  <section v-if="!item" class="page-stack" aria-busy="true" aria-label="正在加载物品详情">
+    <div class="page-header page-header--skeleton" aria-hidden="true">
+      <div class="page-header__copy">
+        <Skeleton width="96px" />
+        <Skeleton width="260px" height="46px" />
+        <Skeleton width="220px" />
+        <Skeleton width="300px" />
+      </div>
+      <div class="page-header__actions">
+        <Skeleton variant="box" width="88px" height="36px" />
+      </div>
+    </div>
+
+    <div class="detail-grid" aria-hidden="true">
+      <section v-for="index in 3" :key="`chips-${index}`" class="detail-section skeleton-detail-section">
+        <div class="detail-section__header">
+          <Skeleton :width="index === 2 ? '68px' : '92px'" height="24px" />
+        </div>
+        <div class="detail-section__body">
+          <div class="skeleton-chip-row">
+            <Skeleton v-for="chipIndex in 3" :key="chipIndex" width="82px" class="skeleton-chip" />
+          </div>
+        </div>
+      </section>
+
+      <section class="detail-section skeleton-detail-section">
+        <div class="detail-section__header">
+          <Skeleton width="112px" height="24px" />
+        </div>
+        <div class="detail-section__body">
+          <Skeleton width="45%" />
+          <div class="skeleton-chip-row">
+            <Skeleton v-for="index in 3" :key="index" width="76px" class="skeleton-chip" />
+          </div>
+        </div>
+      </section>
+
+      <section class="detail-section skeleton-detail-section">
+        <div class="detail-section__header">
+          <Skeleton width="108px" height="24px" />
+        </div>
+        <div class="detail-section__body">
+          <ul class="row-list skeleton-row-list">
+            <li v-for="index in 3" :key="index">
+              <Skeleton width="120px" />
+              <Skeleton width="44px" />
+            </li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </section>
   <section v-else class="page-stack">
     <PageHeader :title="item.name" :subtitle="item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name">
       <template #kicker>Item Detail</template>
diff --git a/frontend/src/views/PokemonDetail.vue b/frontend/src/views/PokemonDetail.vue
index d3b59ed..338839a 100644
--- a/frontend/src/views/PokemonDetail.vue
+++ b/frontend/src/views/PokemonDetail.vue
@@ -5,7 +5,7 @@ import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
-import StatusMessage from '../components/StatusMessage.vue';
+import Skeleton from '../components/Skeleton.vue';
 import { api, type PokemonDetail } from '../services/api';
 
 const route = useRoute();
@@ -81,7 +81,62 @@ onMounted(async () => {
 </script>
 
 <template>
-  <StatusMessage v-if="!pokemon" :duration="0">加载中</StatusMessage>
+  <section v-if="!pokemon" class="page-stack" aria-busy="true" aria-label="正在加载 Pokemon 详情">
+    <div class="page-header page-header--skeleton" aria-hidden="true">
+      <div class="page-header__copy">
+        <Skeleton width="142px" />
+        <Skeleton width="280px" height="46px" />
+        <Skeleton width="220px" />
+        <Skeleton width="310px" />
+      </div>
+      <div class="page-header__actions">
+        <Skeleton variant="box" width="88px" height="36px" />
+      </div>
+    </div>
+
+    <div class="detail-grid" aria-hidden="true">
+      <section class="detail-section skeleton-detail-section">
+        <div class="detail-section__header">
+          <Skeleton width="56px" height="24px" />
+        </div>
+        <div class="detail-section__body">
+          <div class="skeleton-chip-row">
+            <Skeleton v-for="index in 2" :key="index" width="74px" class="skeleton-chip" />
+          </div>
+        </div>
+      </section>
+
+      <section class="detail-section skeleton-detail-section">
+        <div class="detail-section__header">
+          <Skeleton width="92px" height="24px" />
+        </div>
+        <div class="detail-section__body">
+          <div class="skeleton-chip-row">
+            <Skeleton v-for="index in 4" :key="index" width="82px" class="skeleton-chip" />
+          </div>
+        </div>
+      </section>
+
+      <section class="detail-section skeleton-detail-section">
+        <div class="detail-section__header">
+          <Skeleton width="68px" height="24px" />
+        </div>
+        <div class="detail-section__body">
+          <ul class="row-list appearance-list skeleton-row-list">
+            <li v-for="index in 3" :key="index" class="skeleton-appearance-row">
+              <Skeleton width="96px" />
+              <div class="skeleton-summary">
+                <div v-for="line in 4" :key="line">
+                  <Skeleton width="56px" />
+                  <Skeleton :width="line === 4 ? '70%' : '48%'" />
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </section>
   <section v-else class="page-stack">
     <PageHeader :title="`#${pokemon.id} ${pokemon.name}`" :subtitle="`喜欢的环境：${pokemon.environment.name}`">
       <template #kicker>Pokédex Detail</template>
diff --git a/frontend/src/views/PokemonList.vue b/frontend/src/views/PokemonList.vue
index 2efdf36..4937df3 100644
--- a/frontend/src/views/PokemonList.vue
+++ b/frontend/src/views/PokemonList.vue
@@ -5,7 +5,7 @@ import EntityChips from '../components/EntityChips.vue';
 import EntityCard from '../components/EntityCard.vue';
 import FilterPanel from '../components/FilterPanel.vue';
 import PageHeader from '../components/PageHeader.vue';
-import StatusMessage from '../components/StatusMessage.vue';
+import Skeleton from '../components/Skeleton.vue';
 import TagsSelect from '../components/TagsSelect.vue';
 import { api, type Options, type Pokemon } from '../services/api';
 
@@ -18,6 +18,8 @@ const skillIds = ref<string[]>([]);
 const skillMode = ref<'any' | 'all'>('any');
 const favoriteThingIds = ref<string[]>([]);
 const favoriteThingMode = ref<'any' | 'all'>('any');
+const filterSkeletonWidths = ['52px', '92px', '48px', '72px'];
+const skeletonCardCount = 6;
 
 const query = computed(() => ({
   search: search.value,
@@ -88,8 +90,33 @@ watch(query, loadPokemon);
         </div>
       </div>
     </FilterPanel>
+    <FilterPanel v-else class="filter-panel--skeleton" aria-hidden="true">
+      <div v-for="(width, index) in filterSkeletonWidths" :key="index" class="field">
+        <Skeleton :width="width" />
+        <Skeleton variant="box" height="44px" />
+        <div v-if="index > 1" class="segmented">
+          <Skeleton variant="box" width="52px" height="34px" />
+          <Skeleton variant="box" width="52px" height="34px" />
+        </div>
+      </div>
+    </FilterPanel>
 
-    <StatusMessage v-if="loading" :duration="0">加载中</StatusMessage>
+    <div v-if="loading" class="entity-grid" aria-busy="true" aria-label="正在加载 Pokemon 列表">
+      <article v-for="index in skeletonCardCount" :key="index" class="entity-card entity-card--skeleton">
+        <Skeleton variant="box" width="42px" height="42px" class="skeleton-entity-mark" />
+        <div class="entity-card__content">
+          <Skeleton width="76%" height="24px" />
+          <Skeleton width="58%" />
+          <Skeleton width="68%" />
+          <div class="skeleton-chip-row">
+            <Skeleton v-for="chipIndex in 2" :key="`skills-${chipIndex}`" width="64px" class="skeleton-chip" />
+          </div>
+          <div class="skeleton-chip-row">
+            <Skeleton v-for="chipIndex in 3" :key="`things-${chipIndex}`" width="72px" class="skeleton-chip" />
+          </div>
+        </div>
+      </article>
+    </div>
     <div v-else class="entity-grid">
       <EntityCard
         v-for="item in pokemon"
diff --git a/frontend/src/views/RecipeDetail.vue b/frontend/src/views/RecipeDetail.vue
index 980d4d6..df5e97c 100644
--- a/frontend/src/views/RecipeDetail.vue
+++ b/frontend/src/views/RecipeDetail.vue
@@ -5,7 +5,7 @@ import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
-import StatusMessage from '../components/StatusMessage.vue';
+import Skeleton from '../components/Skeleton.vue';
 import { api, type RecipeDetail } from '../services/api';
 
 const route = useRoute();
@@ -17,7 +17,32 @@ onMounted(async () => {
 </script>
 
 <template>
-  <StatusMessage v-if="!recipe" :duration="0">加载中</StatusMessage>
+  <section v-if="!recipe" class="page-stack" aria-busy="true" aria-label="正在加载材料单详情">
+    <div class="page-header page-header--skeleton" aria-hidden="true">
+      <div class="page-header__copy">
+        <Skeleton width="112px" />
+        <Skeleton width="260px" height="46px" />
+        <Skeleton width="128px" />
+        <Skeleton width="300px" />
+      </div>
+      <div class="page-header__actions">
+        <Skeleton variant="box" width="88px" height="36px" />
+      </div>
+    </div>
+
+    <div class="detail-grid" aria-hidden="true">
+      <section v-for="index in 2" :key="index" class="detail-section skeleton-detail-section">
+        <div class="detail-section__header">
+          <Skeleton :width="index === 1 ? '92px' : '88px'" height="24px" />
+        </div>
+        <div class="detail-section__body">
+          <div class="skeleton-chip-row">
+            <Skeleton v-for="chipIndex in index === 1 ? 3 : 4" :key="chipIndex" width="82px" class="skeleton-chip" />
+          </div>
+        </div>
+      </section>
+    </div>
+  </section>
   <section v-else class="page-stack">
     <PageHeader :title="recipe.name" subtitle="材料单详情">
       <template #kicker>Recipe Detail</template>
diff --git a/frontend/src/views/VerifyEmailView.vue b/frontend/src/views/VerifyEmailView.vue
index 3eb2bb7..26234d4 100644
--- a/frontend/src/views/VerifyEmailView.vue
+++ b/frontend/src/views/VerifyEmailView.vue
@@ -2,6 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import PageHeader from '../components/PageHeader.vue';
+import Skeleton from '../components/Skeleton.vue';
 import StatusMessage from '../components/StatusMessage.vue';
 import { api } from '../services/api';
 
@@ -37,11 +38,15 @@ onMounted(async () => {
         <template #kicker>Trainer Pass</template>
       </PageHeader>
 
-      <StatusMessage v-if="busy" :duration="0">正在验证邮箱</StatusMessage>
+      <div v-if="busy" class="skeleton-auth-state" aria-busy="true" aria-label="正在验证邮箱">
+        <Skeleton width="62%" />
+        <Skeleton width="84%" />
+        <Skeleton variant="box" width="110px" height="44px" />
+      </div>
       <StatusMessage v-else-if="message" variant="success">{{ message }}</StatusMessage>
       <StatusMessage v-else variant="danger">{{ errorMessage }}</StatusMessage>
 
-      <RouterLink class="ui-button ui-button--primary" to="/login">去登录</RouterLink>
+      <RouterLink v-if="!busy" class="ui-button ui-button--primary" to="/login">去登录</RouterLink>
     </div>
   </section>
 </template>