ICEN UI

加载态

spec.loading：true 时渲染骨架 shimmer（复用全库共享 keyframes icen-skeleton-pulse，类 .icen-chart.is-loading + .icen-chart-skeleton-bar），优先于空态（loading 期间不出现 .icen-chart-em…

切换 loading 看骨架 shimmer 与数据渲染互替（loading 优先于空态）

html
<p class="demo-label" style="margin:0 0 10px">切换 loading 看骨架 shimmer 与数据渲染互替（loading 优先于空态）</p><div class="icen-toolbar" style="margin:0 0 10px">  <button class="icen-btn icen-btn-sm icen-btn-primary" type="button" id="charts-loading-toggle">切换加载态</button></div><div class="icen-chart" id="demo-charts-loading" style="border:1px solid var(--icen-token-line-soft);border-radius:var(--icen-radius-md);padding:12px"></div>
行为与接口说明

spec.loading：true 时渲染骨架 shimmer（复用全库共享 keyframes icen-skeleton-pulse，类 .icen-chart.is-loading + .icen-chart-skeleton-bar），优先于空态（loading 期间不出现 .icen-chart-empty）；update 切回 false 即恢复数据渲染。与 downsample/zoom/marks 同开时加载态优先生效（数据就绪前不做几何计算）。

安装

bun add @icen.ai/ui

用法

js
const handle = renderChart(el, { type: 'line', labels: [], values: [], loading: true });/* 骨架 shimmer（icen-skeleton-pulse）：.icen-chart.is-loading > .icen-chart-body > .icen-chart-skeleton-bar   ——loading 优先于 emptyLabel（空数据 + loading 也只显示骨架） */fetchData().then((data) => {  handle.update({ type: 'line', labels: data.labels, values: data.values, loading: false });});