fix: preserve script order for lazy-rendered charts so the renderer registers before render-facade fires (#1319)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: lucadobrescu

classes/Visualizer/Module/Frontend.php

@@ -803,14 +803,20 @@ function visualizerTriggerScriptLoader() {
 
 			function visualizerLoadScripts() {
 				document.querySelectorAll("script[data-visualizer-script]").forEach(function(elem) {
-					jQuery.getScript( elem.getAttribute("data-visualizer-script") )
-					.done( function( script, textStatus ) {
-						elem.setAttribute("src", elem.getAttribute("data-visualizer-script"));
-						elem.removeAttribute("data-visualizer-script");
+					// Replace the placeholder with a real script tag using async=false:
+					// scripts download in parallel but execute in insertion order, which
+					// preserves the WordPress dependency order. Parallel jQuery.getScript
+					// calls could execute render-facade.js before the chart renderer had
+					// registered its render event listener, leaving charts blank.
+					var script = document.createElement("script");
+					script.src = elem.getAttribute("data-visualizer-script");
+					script.async = false;
+					script.onload = function() {
 						setTimeout( function() {
 							visualizerRefreshChart();
 						} );
-					} );
+					};
+					elem.parentNode.replaceChild(script, elem);
 				});
 			}
 

tests/e2e/specs/lazy-render.spec.js

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+/**
+ * Internal dependencies
+ */
+const { deleteAllCharts, createChartWithAdmin } = require( '../utils/common' );
+
+/**
+ * Regression tests for https://github.com/Codeinwp/visualizer/issues/1319
+ *
+ * Charts with lazy rendering enabled load their scripts only after the first
+ * user interaction, via `script[data-visualizer-script]` placeholders. The
+ * loader must preserve the WordPress dependency order: if render-facade.js
+ * executes before the chart renderer (render-google.js etc.) has registered
+ * its `visualizer:render:chart:start` listener, the render event is lost and
+ * the chart stays blank forever.
+ */
+test.describe( 'Lazy rendered charts (frontend)', () => {
+	test.beforeEach( async ( { requestUtils } ) => {
+		await deleteAllCharts( requestUtils );
+	} );
+
+	async function createChartOnPost( admin, page, requestUtils ) {
+		// New charts have lazy rendering enabled by default.
+		const chartId = await createChartWithAdmin( admin, page );
+
+		const post = await requestUtils.createPost( {
+			title: 'Lazy render',
+			content: `[visualizer id="${ chartId }" lazy="no" class=""]`,
+			status: 'publish',
+		} );
+
+		return { chartId, post };
+	}
+
+	async function triggerLazyLoader( page ) {
+		// Scripts are swapped to `data-visualizer-script` placeholders.
+		await expect( page.locator( 'script[data-visualizer-script]' ).first() ).toBeAttached();
+
+		// The loader starts on the first user interaction.
+		await page.evaluate( () => window.dispatchEvent( new Event( 'scroll' ) ) );
+	}
+
+	test( 'chart renders when the renderer script loads after render-facade.js', async ( { admin, page, requestUtils } ) => {
+		const { chartId, post } = await createChartOnPost( admin, page, requestUtils );
+
+		// Delay the chart renderer scripts so render-facade.js would win the
+		// load race — the deterministic reproduction of issue #1319.
+		await page.route( /js\/render-(google|chartjs|datatables)\.js/, async ( route ) => {
+			await new Promise( ( resolve ) => setTimeout( resolve, 2000 ) );
+			await route.continue();
+		} );
+
+		await page.goto( `/?p=${ post.id }` );
+		await triggerLazyLoader( page );
+
+		const chart = page.locator( `.visualizer-front-${ chartId }` ).first();
+		await expect( chart ).toHaveClass( /visualizer-chart-loaded/, { timeout: 15000 } );
+		await expect( chart.locator( 'svg, canvas, table' ).first() ).toBeVisible();
+	} );
+
+	test( 'chart renders without artificial script delay', async ( { admin, page, requestUtils } ) => {
+		const { chartId, post } = await createChartOnPost( admin, page, requestUtils );
+
+		await page.goto( `/?p=${ post.id }` );
+		await triggerLazyLoader( page );
+
+		const chart = page.locator( `.visualizer-front-${ chartId }` ).first();
+		await expect( chart ).toHaveClass( /visualizer-chart-loaded/, { timeout: 15000 } );
+		await expect( chart.locator( 'svg, canvas, table' ).first() ).toBeVisible();
+	} );
+} );