Skip to content

feat: Lazy load Lucee SQL views for faster profiler reports#59

Open
sfer79 wants to merge 1 commit intocoldbox-modules:developmentfrom
sfer79:feature/lazy-load-sql-panels
Open

feat: Lazy load Lucee SQL views for faster profiler reports#59
sfer79 wants to merge 1 commit intocoldbox-modules:developmentfrom
sfer79:feature/lazy-load-sql-panels

Conversation

@sfer79
Copy link

@sfer79 sfer79 commented Feb 28, 2026

Summary

The Lucee SQL panel currently renders all three SQL views (Grouped, Timeline, Slowest) server-side when a profiler report is opened. With many queries (50-200+), the prettySql() regex formatting applied to every query across all 3 views causes significant delays — 20+ seconds in real-world usage.

This PR introduces lazy loading for SQL views:

  • No SQL views are rendered on initial profiler report load
  • Views are fetched via AJAX only when the user clicks on a tab
  • Loaded views are cached client-side to prevent re-fetching
  • A loading indicator is shown while a view is being fetched

Result

Profiler report opens near-instantly instead of 20+ seconds. SQL data loads on-demand in ~1-2 seconds per view.

Changes

  1. handlers/Main.cfc — Added renderLuceeSqlView action that renders a single SQL view (grouped/timeline/slowest) and returns HTML
  2. views/main/panels/requestTracker/luceeSqlPanel.cfm — Refactored to use Alpine.js fetch() on tab click instead of server-side rendering all views. Uses data-profiler-id attribute and .then()/.catch() promise chain for broad browser compatibility
  3. views/main/panels/requestTracker/luceeSqlGrouped.cfm — Extracted grouped SQL view as a standalone partial (was previously rendered inline)

Technical Details

  • Uses existing Alpine.js appUrl from parent scope (Visualizer/Dock layout) for AJAX endpoint URL
  • Profiler ID passed via data-profiler-id HTML attribute (avoids encodeForJavaScript issues with UUIDs in x-data)
  • Promise-based fetch with .then()/.catch() instead of async/await for compatibility
  • loadedViews object caches which views have been fetched to prevent redundant requests
  • Content injected via $refs and innerHTML for each view container

Test Plan

  • Open debugger visualizer, click "Show" on a profiler — report should open instantly
  • Click "Grouped" tab — SQL grouped view should load via AJAX
  • Click "Timeline" tab — SQL timeline view should load via AJAX
  • Click "Slowest" tab — SQL slowest view should load via AJAX
  • Click same tab again — should toggle off without re-fetching
  • Click tab again — should show cached content without network request
  • Verify loading indicator appears briefly while view loads
  • Test with Lucee debugging disabled — appropriate warning message shown
  • Test with profiler that has 0 queries — "No queries executed" message shown

Previously, all three SQL views (Grouped, Timeline, Slowest) were rendered
server-side when opening a profiler report, causing significant delays
(20+ seconds with many queries) due to prettySql() regex formatting
applied to every query across all views.

Now SQL views are loaded on-demand via AJAX only when the user clicks
on a tab. Loaded views are cached client-side to prevent re-fetching.
This reduces initial profiler report load time from ~20s to near-instant.

Changes:
- Add renderLuceeSqlView handler action for lazy AJAX loading
- Refactor luceeSqlPanel.cfm to use Alpine.js fetch on tab click
- Extract luceeSqlGrouped.cfm as a standalone partial view
- Add loading indicator while SQL view is being fetched
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant