Skeletons

Two flavours

A chart skeleton signals "data is loading, the chart will appear here". There are two ways to produce one:

• ECharts loading spinner — pass loading: true when creating phaChart. The factory calls chart.showLoading() until the first setOption completes.
• PatternFly skeleton — render a PF v6 skeleton sized to match the chart, then HTMX-swap the wrapper in once data arrives. Best for SSR-first pages where the chart arrives after the page paint.

ECharts loading spinner

The spinner sits inside the chart canvas and disappears the moment the first option is set.

PatternFly skeleton placeholder

Render this from the server when you know the chart will need extra time to load. Swap it for the real pha-c-chart wrapper via HTMX: hx-get="/api/data/latency-chart", hx-trigger="load", hx-swap="outerHTML".

Grayscale chart skeletons

A third option sits between the two: render the real chart shape in all-gray as the placeholder, so the loading state already has the chart's silhouette. Pass theme: 'skeleton' (registered in chart.js alongside patternfly) and make the series silent with no tooltip or legend. Four representative shapes:

Which to use

Spinner when the chart is already mounted and you're waiting on follow-up data (HTMX hx-get + Alpine setOption).
PF skeleton when the chart wrapper itself isn't mounted yet and you want layout stability before the swap.