LoadingState 加载状态

说明未知时长任务正在进行并提供可访问状态反馈。

Beta

示例

直接操作示例,查看组件在具体任务中的状态与反馈。

未知时长校验从运行中开始;取消只更新当前示例,并明确回报任务已停止。
本地校验任务
正在整理公开组件资料
正在校验 API、示例源码与搜索索引。任务耗时取决于待处理组件数量。
任务状态:正在校验
短任务可以只显示标题,较长任务补充对等待有帮助的说明。
简短等待
正在保存
带说明
正在生成预览
这通常需要几秒钟,完成后会自动更新。
只有任务可安全取消或转入后台时才提供等待期间动作。
导出任务
正在准备导出文件
可以继续等待,或取消这次本地任务。

使用建议

用于未知时长任务

当总量不可计算但任务确实进行中时使用 LoadingState,并在 title 中说明正在处理什么。

保持一次清晰宣告

默认 status 与 polite live 适合非阻塞加载;不要在频繁更新的父容器重复创建状态节点。

为长任务提供退出路径

超过短暂等待的任务应由宿主提供取消、后台运行或查看详情等真实操作。

引入方式

从已验证的公开子路径导入组件;全局样式接入方式见安装指南。

import { BaseLoadingState } from '@inf-monkeys-tech/monkeys-design/components/base';

当前限制

  • LoadingState 只管理组件内部默认本地化和状态语义;任务取消、超时、重试及错误恢复由宿主业务负责。
  • Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
export interface BaseLoadingStateProps
  extends Omit<
    HTMLAttributes<HTMLDivElement>,
    'children' | 'className' | 'style' | 'title'
  > {
  icon?: ReactNode;
  title?: ReactNode;
  description?: ReactNode;
  actions?: ReactNode;
  appearance?: BaseAppearance;
  className?: string;
  classNames?: BaseStateClassNames;
  style?: CSSProperties;
}
属性说明类型默认值
icon显示在主要内容旁的图标。ReactNode
title加载状态显示的主标题。ReactNode
description用于补充标题或标签含义的说明内容。ReactNode
actions在主要内容旁呈现的一组操作。ReactNode
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance
className追加到组件根元素的 CSS 类名。string
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseStateClassNames
style追加到组件根元素的内联样式。CSSProperties