feat(integram-table): show AJAX spinner while waiting on the server (closes #2778)

[konard]

Summary

Closes #2778. Adds an AJAX spinner inside .integram-table-controls so the user can see when the table is waiting on the server (record count, filter, sort, grouping, paging). The spinner is placed to the left of the existing refresh / filter / settings icons and shows a bracketed counter (N) when more than one request is in flight.

Implementation

• js/integram-table/01-core.js — new pendingRequests counter on the instance, plus three helpers:
  • beginRequest() / endRequest() — increment / decrement (clamped at 0) and call updateAjaxSpinner().
  • updateAjaxSpinner() — toggles .active on .integram-table-ajax-spinner and writes the counter text. Mutates only the spinner DOM, so concurrent requests never cause a full re-render of the table.
  • loadData() is wrapped: beginRequest() before the try, endRequest() in finally. That single wrap covers filters, sorting, grouping, scrolling, and refresh because they all flow through loadData().
• js/integram-table/02-format-helpers.js — fetchTotalCount() is wrapped the same way so the record-count request also drives the spinner.
• js/integram-table/04-render-table.js — renders the spinner as the first child of .integram-table-controls, before the refresh icon, so it appears at the left of the toolbar. The element survives full re-renders because its initial .active and counter text are derived from pendingRequests.
• css/integram-table.css — .integram-table-ajax-spinner is display: none by default and switches to inline-flex when .active is present. The counter uses a slightly smaller font and --md-primary color matching the rest of the toolbar.
• js/integram-table.js — auto-regenerated by bash build.sh (the bundle that index.php actually loads).

Test plan

Two standalone harnesses are shipped under experiments/ so the behavior can be reproduced without a full CRM server:

• experiments/test-issue-2778-ajax-spinner.html — four static scenarios (idle, 1 request, 3 requests, and a live +/- counter button) verifying the CSS rules and counter-text logic.
• experiments/test-issue-2778-integration.html — boots a real IntegramTable instance with a mocked window.fetch (1.2 s delay), exposes buttons to fire loadData(), fetchTotalCount(), and both concurrently.

Manual verification with Playwright on the integration harness:

• Idle table — spinner hidden.
• 1 pending request — spinner visible, no counter text.
• 3 pending requests — spinner visible, shows (3).
• Spinner sits to the LEFT of refresh / filter / settings icons.
• Counter returns to hidden when all requests resolve.
• loadData() and fetchTotalCount() both drive the spinner.

Screenshots

1 pending request — spinner only, no counter:

3 pending requests — spinner with (3) counter, to the left of the other icons:

All four states from the standalone harness (idle / 1 / 3 / live):

[konard]

Working session summary

Done. PR #2779 is updated, out of draft, and ready for review.

Summary of what shipped:

• pendingRequests counter + beginRequest() / endRequest() / updateAjaxSpinner() in js/integram-table/01-core.js
• Wrapped loadData() (catches filter / sort / group / scroll / refresh) and fetchTotalCount() (record-count) in 02-format-helpers.js
• Spinner DOM rendered as the first child of .integram-table-controls in 04-render-table.js, so it appears at the left of the toolbar
• CSS in css/integram-table.css (hidden by default, inline-flex when .active, counter styled in --md-primary)
• js/integram-table.js regenerated via bash build.sh
• Two reproduction harnesses in experiments/ and three verification screenshots in docs/screenshots/

No CI checks are configured for this branch.

---

This summary was automatically extracted from the AI working session output.

[konard]

🤖 Solution Draft Log

This log file contains the complete execution trace of the AI solution draft process.

💰 Cost: $5.878188

📊 Context and tokens usage:

Claude Opus 4.7: (2 sub-sessions)

1. 115.6K / 1M (12%) input tokens, 26.0K / 128K (20%) output tokens
2. 51.9K / 1M (5%) input tokens, 8.2K / 128K (6%) output tokens

Total: (2.1K new + 176.5K cache writes + 7.5M cache reads) input tokens, 41.0K output tokens, $5.878188 cost

🤖 Models used:

• Tool: Anthropic Claude Code
• Requested: opus
• Model: Claude Opus 4.7 (claude-opus-4-7)

📎 Log file uploaded as Gist (3390KB)

• View complete solution draft log

---

Now working session is ended, feel free to review and add any feedback on the solution draft.

[konard]

✅ Ready to merge

This pull request is now ready to be merged:

• No CI/CD checks are configured for this repository
• No merge conflicts
• No pending changes

---

Monitored by hive-mind with --auto-restart-until-mergeable flag