用 AI 写代码，不知道怎么说？
一天一个 vibe coding 术语课，今天讲 loading。
一、什么是 loading？
你点下「恢复备份」，系统没有立刻完成。界面中间出现「正在恢复备份」和一个不停旋转的小圆圈，让你知道它没有卡住。
系统正在处理一件事，还不能马上给出结果。为了让用户知道界面没有卡住，这种等待状态就叫 loading。
界面上用来显示这个状态的反馈，叫加载指示器，英文 loading indicator。
如果加载指示器是一圈不断旋转的动画，它还有一个常见名字，叫转圈图标，英文 spinner。
spinner 可以放进按钮，也可以放在界面中央。它出现在哪里，哪些操作会暂时被锁住，就能看出这次 loading 影响了多大范围。
判断一次 loading 影响多大范围，不能只看有没有转圈，还要看哪些地方因此不能继续操作。
接下来，就从影响范围最小的按钮 loading 说起。
二、按钮点下去以后还没做完，叫按钮 loading
你写完一篇文章，点下「发布」。系统没有立刻完成，按钮里的文字变成了「发布中」，旁边还有一个小圆圈不停地转。
按钮还在原来的位置，但暂时不能再点。等发布结束，它才恢复正常，或者告诉你发布失败了。
这种只发生在按钮里的等待状态，叫按钮 loading，英文是 button loading state。
它回答了两个问题：刚才那一下点到了，系统现在还在处理。
要是按钮点完以后什么都不变，用户不知道系统有没有收到，很容易再点一次。一次发布就可能变成重复发布，一次提交也可能变成重复提交。
如果页面没有另外拦住重复点击，用户每多点一次，都可能把同一个操作重新交给服务器。开发里，这叫又发了一次接口请求。
按钮进入 loading 以后暂时不能再次点击，既能阻止重复操作，也能减少不必要的接口请求和服务器处理。
就算服务器已经做了幂等或者防重复处理，按钮 loading 仍然有用。
幂等的意思是：同一个操作就算被重复请求，最终产生的效果也和只请求一次相同。它不会因为请求重复，就把结果一遍遍叠加。
这两种保护不能互相代替。按钮 loading 负责挡住用户在界面上的误点。服务器上的幂等或防重复处理，负责兜住网络重试带来的重复请求，以及其他没有被按钮拦住的调用。
三、按钮里的反馈要留在按钮里
你点下「保存设置」，只有这次保存正在处理。页面上的返回、查看说明和其他不相关操作，仍然可以正常使用。
这时候，按钮 loading 就够了。
按钮里的文字可以从「保存设置」变成「正在保存」，也可以在原来的文字旁边加上 spinner。文字是在告诉用户正在处理什么，动画是在告诉用户处理还没有结束。
如果场景非常清楚，等待时间也很短，只显示 spinner 也能看懂。但动作稍微复杂一点，保留「正在发布」「正在保存」这样的状态文字，会比只让一个圈在那里转更明确。
按钮进入 loading 以后，加载反馈最好留在原来的位置，并和周围内容保持原来的对齐。不要一换文字，按钮突然移位，旁边的内容也跟着跳一下。
四、整个界面都不能继续时，才用阻断式 loading
如果恢复备份会替换当前内容，在完成之前，旧内容已经不适合继续编辑，其他按钮也不能安全操作。
这时，一层半透明的遮罩会盖住整个界面，中间放着 spinner 和「正在恢复备份」这样的状态文字。后面的内容既点不到，也不能通过键盘继续操作。
这种覆盖在界面上方的等待层，常叫加载遮罩，英文 loading overlay。它造成的整页等待状态，可以叫界面阻断式 loading。
这层遮罩是在告诉用户：当前界面暂时不可用，必须等这一步处理结束。
阻断式 loading 会把所有操作一起停住，所以它只适合整个界面确实都不能继续的情况。
五、每一次 loading，都必须有开始和结束
按钮 loading 和阻断式 loading 锁住的范围不同，但完整过程是一样的。
用户发起操作，loading 开始。系统还在处理，loading 继续。系统给出成功或者失败的结果，loading 结束，界面进入下一种明确的状态。
文章发布成功，按钮可以恢复正常，也可以直接进入发布后的页面。发布失败，按钮要重新变得可以点击，同时告诉用户这次没有成功。
恢复备份成功，遮罩消失，界面显示恢复后的内容。恢复失败，遮罩同样不能一直挡着。系统要明确告诉用户恢复失败；可以重试时给出重试入口，能够安全取消时给出取消入口。
如果处理已经失败，或者等了很久仍然没有结果，spinner 却还在一直转，用户就分不清系统究竟还在处理，还是已经卡住了。
loading 不是放上一个动画就结束了。它必须跟着任务开始，也必须在任务成功、失败或者无法继续时结束。
这个开始和结束也不能只靠画面表达。靠软件把屏幕内容读出来的人，同样要知道系统什么时候开始处理，什么时候已经结束。
六、等待时间变长时，先说清，再改善等待感
一个没有文字的 spinner，只能说明「还没结束」，不能说明正在处理什么。
按钮里的「发布中」，能和用户刚才点下的「发布」对应起来。加载遮罩里的「正在恢复备份」，也比只有一句「Loading」更清楚。
有些操作确实要多等一会儿。只让用户盯着空白界面，或者看一个普通的圈不停地转，很容易让人失去耐心。
这时可以不用通用的 spinner，改成更符合产品和当前动作的加载动画，英文 loading animation。
小说阅读 App 可以让一本小书轻轻翻页；文件导出工具可以让几张纸依次收进文件夹；游戏保存进度时，也可以让角色做一段简短的循环动作。
这些动画给等待增加了变化，可以分散一部分对时间的注意，让主观感受没有那么漫长。加载动画可以用 GIF 实现，也可以由代码或矢量动效完成。GIF 只是实现格式，不是这类反馈的名字。
不过，好看的动画只是改善等待感，不会真的缩短处理时间。
七、最常见的一条用错
用户点了一次「保存」，按钮正在提交，整个页面却立刻被遮罩锁住。页面上的说明不能看，返回也不能点，只能等这个本来只属于按钮的动作结束。
这就是最常见的用错：不管哪里在等待，都直接上全屏 loading。
loading 的范围应该和真正不能操作的范围一样大。只等一个按钮，就只锁一个按钮；整个界面都不能继续，才锁整个界面。
