小小的加载状态，用心的细节

加载动画最有用的职责，是告诉某人系统仍在运转。

过多的动效会与内容争抢注意力，过少的反馈又会让几秒钟的等待感觉像是一次故障。一个好的状态指示器，恰恰找到两者之间舒适的位置。

让状态可被理解

转转圈旁边的一句简短描述，就能让人知道正在发生什么。

"正在读取文档"和"正在生成回复"描述的是不同的阶段。一点点上下文，能帮助人决定是继续等待还是采取行动。

把动效和应用逻辑分开

组件负责呈现状态，应用逻辑决定状态是什么。这种分离让同一个组件既能用于小小的演示，也能用于真实的请求流程。

下面的示例展示了状态的连接方式，假设组件已经注册。真实的数据源会在文本到达时调用 onChunk，在响应完成时调用 onFinish。

<script setup lang="ts">
import { ref } from 'vue'

const pending = ref(true)
const answer = ref('')

function onChunk(chunk: string) {
  answer.value += chunk
}

function onFinish() {
  pending.value = false
}
</script>

<template>
  <LoadingState v-if="pending" label="生成中" />
  <StreamingText :text="answer" mode="stream" :streaming="pending" />
</template>

为更少的动效留出余地

减弱动效是一种真实的系统偏好。组件应当尊重它——停掉非必要的动画，同时保留状态文字和最终内容。

一个用心的细节，不一定总要引人注目。有时候一次交互之所以感觉恰到好处，正是因为没有什么在碍事。