HIsheR
40 lines
2.0 KiB
TypeScript
40 lines
2.0 KiB
TypeScript
import { effect, h } from '@ui-arch/frame';
|
|
import { spinner } from './spinner.js';
|
|
import type { LoadingProps } from './types.js';
|
|
|
|
// 缺省延迟：120ms 内的请求不闪遮罩，否则「点了就闪一下」比不显示更闹
|
|
const DELAY = 120;
|
|
|
|
/*** 区域加载遮罩：包住一块内容，active 为真时盖上层遮罩 + 转圈 + 文案；带延迟出场，快请求不闪、慢请求必有反馈 ***/
|
|
export function loading(props: LoadingProps, ...children: unknown[]): HTMLElement {
|
|
const delay = props.delay ?? DELAY; // 延迟毫秒
|
|
let timer = 0; // 延迟计时器
|
|
const read = (): boolean => (typeof props.active === 'function' ? Boolean(props.active()) : props.active === true); // 布尔与信号同一口径
|
|
const mask = h(
|
|
'div',
|
|
{ class: 'ua-loading-mask' },
|
|
spinner({ size: props.spinnerSize ?? 20, label: props.text ?? '内容加载中' }), // 转圈自带 role=status，这里只用它的可访问名
|
|
props.text ? h('span', { class: 'ua-loading-text' }, props.text) : null,
|
|
);
|
|
const wrap = h(
|
|
'div',
|
|
{ class: 'ua-loading' },
|
|
h('div', { class: 'ua-loading-body' }, ...children), // 内容层：遮罩出现时整体降透明度，但仍留在原位不塌陷
|
|
mask,
|
|
);
|
|
if (props.minHeight !== undefined) wrap.style.minHeight = `${props.minHeight}px`; // 内容为空时也要撑出高度，遮罩才盖得住
|
|
|
|
/*** 状态落点：is-active 控制遮罩显隐，aria-busy 让读屏知道这块在等数据 ***/
|
|
const paint = (on: boolean): void => {
|
|
wrap.classList.toggle('is-active', on);
|
|
wrap.setAttribute('aria-busy', String(on));
|
|
};
|
|
effect(() => {
|
|
window.clearTimeout(timer);
|
|
if (!read()) { paint(false); return; } // 关得快：立刻收，不等延迟
|
|
timer = window.setTimeout(() => paint(true), delay); // 开得慢：先等一会儿，避免快速请求闪一下
|
|
});
|
|
paint(read()); // 首帧：初值为真时直接亮（延迟只管后续变化）
|
|
return wrap;
|
|
}
|