如何在 Astro 中显示加载指示器，提升用户体验？

2024-03-18 18:00:53

在 Astro 中优雅地处理组件加载：显示加载指示器

导言

在现代 Web 应用程序中，用户体验至关重要。页面加载时间和组件呈现速度可能会影响用户的满意度和参与度。在获取和编译组件时显示加载指示器可以显著改善用户体验，提供正在进行操作的视觉提示。

Astro 中实现加载指示器

Astro 是一个现代的前端框架，它提供了构建快速且响应式的 Web 应用程序所需的一切。它支持各种集成，包括 Vue、Svelte 和 React。在本指南中，我们将重点介绍如何在 Astro Island Vue 和 AstroJS 中实现加载指示器。

创建加载指示器组件

第一步是创建一个 Vue 组件来表示加载指示器。它可以是一个简单的旋转加载器或任何其他视觉指示。

// Loading.vue
<template>
  <div class="loading">
    <svg>
      <use href="#loading-icon" />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Loading'
}
</script>

在 Astro 组件中使用加载指示器

接下来，在 Astro 组件中使用加载指示器。这涉及在框架内容加载之前显示加载指示器。

// ListadoProfesionales.vue
<template>
  <div>
    <Loading v-if="loading" />
    <template v-else>
      <!-- 你的组件内容 -->
    </template>
  </div>
</template>

<script>
import Loading from "../Loading.vue";

export default {
  name: 'ListadoProfesionales',
  components: { Loading },
  data() {
    return {
      loading: true
    }
  },
  async mounted() {
    // 你的获取数据并填充组件内容的代码
    this.loading = false;
  }
}
</script>

利用 Astro 的客户端渲染

最后，使用 Astro 的 client:only 指令，确保加载指示器仅在客户端呈现。

// 页面文件
---
import BaseLayout from '../../layouts/BaseLayout.astro';
import ListadoProfesionales from "../../components/pages/ListadoProfesionales/ListadoProfesionales.vue";

---
<BaseLayout title="Listado de profesionales">
    <main class="container py-6">
        <ListadoProfesionales client:only="vue" />
    </main>
</BaseLayout>