zuar-portal-mcp: Skill for Claude Code

Portal block overlay

Adds a spinner overlay that appears while the block's data loads and fades out once rendering is complete. Modelled on the Employee Utilization block pattern, which is the canonical reference.

The 1.18+ polling guard waits up to 60 s for query data (_pCount > 240 at 250 ms — raised from 15 s after a production incident where large payloads on slow connections outlived the old timeout and blanked the block). The overlay is what the user sees for that entire window, so on large-payload blocks it is effectively required — and it MUST handle the guard's timeout bail (touch point 4 below) or a timed-out block shows a spinner forever.

The overlay only works correctly when the block's root wrapper has position:relative. Without it position:absolute; inset:0 escapes to the wrong ancestor. Always verify before writing.

---

Pre-flight

ARGUMENTS: block: <name>, id: <uuid>

1. get_resource resource="block" id=<id> — read the live block.
2. Confirm the block is already on the 1.18+ pattern (currentBlock.queryResults, loadedCallback in finally). If not, run /portal-118-migration first — the overlay depends on a reliable entry-point (init() or equivalent) and a reliable finally path.
3. Check the root wrapper has position:relative. The typical pattern is <div … style="position:relative;…">. If missing, add it.
4. Check whether an overlay already exists (id containing loading-overlay). If found, ask the user: "An overlay already exists on this block — replace it with the standard pattern, or skip?"

---

What to add

HTML snippet

Insert immediately inside the position:relative root wrapper, before any content divs (header, filters, charts). Use a slug derived from the block name to keep IDs unique across a page.

  <!-- Loading overlay -->
  <div id="<SLUG>-loading-overlay">
    <div class="<SLUG>-spinner"></div>
    <p class="<SLUG>-loading-text">Loading dashboard data…</p>
    <p class="<SLUG>-loading-sub">Fetching data</p>
  </div>