Skip to content

v0.7.1 — Reactive in-flight loading indicators

Choose a tag to compare

View all tags
@paulomtts paulomtts released this 09 Jun 19:41
· 234 commits to master since this release
v0.7.1
1076bdc

Adds in-flight loading indicators for reactive regions, fixes an out-of-band trigger bug, and ships a polished demo. No breaking changes — the public API is unchanged.

✨ New — loading indicators (#36)

Reactive regions can show a skeleton (silhouette shimmer) or spinner (dim, blurred overlay + circular progress) while a reactive update is on the wire, then clear when the fresh HTML swaps in.

  • Declared in the template — put data-pjx-loading="skeleton" or "spinner" on any element (the component root or an inner element). pjx.js matches it via its enclosing reactive root, so it auto-triggers off reacts_to with no per-route wiring, and can target specific elements.
  • OOB-aware + instance-scoped — lights the swap target and its out-of-band dependents, predicted from the dependency graph. Instance-keyed rows are scoped by the triggering instance, so clicking one row doesn't shimmer its siblings.
  • data-pjx-loading-extra="<selector>" — let a trigger flag regions the dependency walk can't predict (e.g. the rows a bulk "clear completed" removes).
  • Overridable styling — both styles read --pjx-* CSS custom properties (color, track, overlay, blur, size, thickness, speed, radius) with sane defaults. Use a custom data-pjx-loading="…" value and style .pjx-loading--… yourself for anything bespoke.
  • Robust lifecycle — ref-counted per region across overlapping requests, re-applied across swaps, and released on the xhr's loadend, so a shared indicator stays lit until the last in-flight request finishes.

See the new Loading indicators section in the reactivity guide.

🐛 Fixes

  • Out-of-band trigger is no longer excluded (#37) — a clicked region that depends on the dirtied keys now updates itself (e.g. a “Clear completed (N)” button refreshing its own count). Previously the trigger was excluded from OOB swaps.

💅 Demo (examples/reactive_todo)

  • A terminal/mono design system (IBM Plex Mono, dark panel, lime accent) showcasing the loading states.
  • Toggling one row no longer re-renders the whole list (the list reacts to a composition key, not the per-item key) — fixes a detach race between overlapping toggles.
  • Adding a todo stays instant; the artificial demo latency now lives on the toggle/clear routes only (env-gated via PJX_DEMO_LATENCY).

Full changelog: v0.7.0...v0.7.1

Assets 2
Loading