# Loading

加载状态组件，用于数据加载或异步操作时提供视觉反馈，支持内容包裹模式与全屏模态模式。

## 适用场景

- 包裹内容区域，在数据加载时叠加 loading 遮罩
- 全屏模态 loading，阻止用户交互
- 需要自定义加载图示和提示信息的场景
- 利用 `delay` / `minDuration` 避免加载状态闪烁

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| visible | `boolean` | `-` | 否 | 是否显示 loading |
| mode | `"normal" \| "modal"` | `"normal"` | 否 | 模式 |
| type | `"spin" \| "bounce"` | `"spin"` | 否 | 动画样式 |
| delay | `number` | `-` | 否 | 延迟显示，以避免闪烁，单位：毫秒 |
| minDuration | `number` | `300` | 否 | 最小 loading 时间，以避免闪烁，单位：毫秒 |
| spinner | `ReactNode` | `-` | 否 | 自定义加载图示 |
| message | `ReactNode` | `-` | 否 | 提示信息 |

## 典型用法

### 包裹内容区域

```tsx
<Loading visible={loading}>
    <Section headlinePrimary={'百度'}>
        <p>全球最大的中文搜索引擎。</p>
    </Section>
</Loading>
```

### 独立 loading 指示器

```tsx
<Loading visible={loading} message={'正在加载中'} />
<Loading type={'bounce'} visible={loading} message={'正在加载中'} />
```

### 全屏模态 loading

```tsx
<Loading
    mode={'modal'}
    visible={loading}
    message={'正在加载中'}
/>
```

### 自定义图示和操作

```tsx
const spinner = <Icon svg={SvgGear} spin />
const message = (
    <>
        <p>努力运行中</p>
        <Button size={'lg'} type={'plain'} icon={SvgSignX} onClick={cancel} />
    </>
)

<Loading
    mode={'modal'}
    visible={loading}
    spinner={spinner}
    message={message}
/>
```

## 注意事项

- 旧版 `props.note` 已废弃，请使用 `props.message`
- `minDuration` 默认 300ms，避免 loading 一闪而过的体验问题
- `delay` 可延迟显示 loading，适合快速请求不必展示 loading 的场景
- 自定义样式时可通过 `.brick-loading-content` 类名调整 loading 容器样式