用途:盘点应用里所有需要等待数据的界面(async surfaces)以及可能为空的视图,按预期延迟选择正确的加载、进度和空状态并实现,避免用户看到空白或像卡死的界面。核心理念:指示器由等待时长和布局是否已知决定,而非偏好;交付的是覆盖每个异步面的审计表加实现,而不是单个旋转组件。
主要能力:依据延迟阶梯选择状态——小于100ms 不显示;100ms至1s 用轻量内联提示(按钮内旋转、cursor: wait);1s至10s 已知布局用骨架屏,未知用旋转器;大于10s 用进度条(可测量时确定型带计数,否则不确定型加说明)。区分骨架屏与旋转器、变更与读取,并做防闪烁处理(延迟约150至200ms显示,显示后至少保持300至500ms)。还按类型设计空状态:首次使用、无结果、加载失败、成功为空,除成功为空外都需带操作入口。
使用方式:先检索代码库(fetch、axios、useQuery/useSWR、isLoading 等标志、Suspense、路由级加载器)盘点异步面,检查现有骨架与空状态组件以复用;无法推断时再向用户批量提问。随后按工作流实现,并模拟慢网络验证无空白帧、无布局位移、指示器不闪、空状态带操作。
适用场景:加载指示器、骨架屏、进度条、四类空状态,以及“应用看起来卡住”的反馈;需要缩短等待(乐观 UI、预加载、缓存)时应先移交给性能优化技能,复杂错误恢复移交给错误处理技能。
限制:示例中的延迟估计若无证据需标注为假设;不得向用户展示编造的时间估计;不为瞬间完成的操作加加载状态;模态框、提示和下拉不应使用骨架屏。详细实现参考见 references/patterns.md,该文件的具体内容资料未提供。