如何在AstroJS获取并编译Astro Island（Vue组件）时显示加载Spinner？

针对你使用client:only="vue"的Vue组件，有两种简单的方式实现加载状态显示：

方法一：Astro模板中添加静态占位Spinner #

直接在Astro页面里放一个静态Spinner，作为Vue组件加载完成前的占位，组件挂载后再隐藏它。

修改Astro页面代码 #

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import ListadoProfesionales from "../../components/pages/ListadoProfesionales/ListadoProfesionales.vue";

---
<BaseLayout title="Listado de profesionales">
    <main class="container py-6">
        <div class="profesionales-wrapper" style="min-height: 200px; position: relative;">
            <!-- 加载Spinner -->
            <div id="prof-spinner" class="spinner">
                <div class="spinner-circle"></div>
            </div>
            <!-- Vue客户端组件 -->
            <ListadoProfesionales client:only="vue" />
        </div>
    </main>
</BaseLayout>

<style>
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.spinner-circle {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
</style>

在Vue组件中隐藏Spinner #

在ListadoProfesionales.vue的挂载钩子中，获取并隐藏Spinner：

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
    const spinner = document.getElementById('prof-spinner');
    if (spinner) spinner.style.display = 'none';
});
</script>

<!-- 组件原有内容 -->

方法二：Vue组件内部用Suspense处理加载状态 #

如果你的Vue组件需要异步获取数据，可以直接用Vue内置的<Suspense>组件，把Spinner作为加载 fallback：

修改Vue组件代码 #

<template>
    <Suspense>
        <template #default>
            <!-- 组件核心内容，比如异步数据渲染的列表 -->
            <div v-if="profesionales.length" class="prof-list">
                <!-- 遍历渲染专业人员列表 -->
                <div v-for="prof in profesionales" :key="prof.id" class="prof-item">
                    {{ prof.name }}
                </div>
            </div>
        </template>
        <template #fallback>
            <!-- 加载状态UI -->
            <div class="spinner">
                <div class="spinner-circle"></div>
                <p>Cargando profesionales...</p>
            </div>
        </template>
    </Suspense>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const profesionales = ref([]);

// 模拟异步数据请求
onMounted(async () => {
    await new Promise(resolve => setTimeout(resolve, 1200));
    // 替换成实际的API请求
    profesionales.value = [
        { id: 1, name: 'Dr. Juan Pérez' },
        { id: 2, name: 'Dra. María Gómez' }
    ];
});
</script>

<style scoped>
.spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 200px;
    justify-content: center;
}

.spinner-circle {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.prof-list {
    display: grid;
    gap: 16px;
}
</style>

这两种方式都能解决你的需求：方法一适合单纯等待组件加载的场景，方法二更适合组件本身需要异步获取数据的情况。

内容的提问来源于stack exchange，提问作者Lucas David Ferrero