fix: lazy loading not working without mouse action

Author: HardeepAsrani

classes/Visualizer/Module/Frontend.php

@@ -734,6 +734,7 @@ public function printFooterScripts() {
 		if ( $this->lazy_render_script ) {
 			?>
 		<script type="text/javascript">
+			var visualizerScriptsLoaded = false;
 			var visualizerUserInteractionEvents = [
 				"scroll",
 				"mouseover",
@@ -747,13 +748,17 @@ public function printFooterScripts() {
 			});
 
 			function visualizerTriggerScriptLoader() {
-				visualizerLoadScripts();
 				visualizerUserInteractionEvents.forEach(function(event) {
 					window.removeEventListener(event, visualizerTriggerScriptLoader, { passive: true });
 				});
+				visualizerLoadScripts();
 			}
 
 			function visualizerLoadScripts() {
+				if ( visualizerScriptsLoaded ) {
+					return;
+				}
+				visualizerScriptsLoaded = true;
 				document.querySelectorAll("script[data-visualizer-script]").forEach(function(elem) {
 					jQuery.getScript( elem.getAttribute("data-visualizer-script") )
 					.done( function( script, textStatus ) {
@@ -776,6 +781,20 @@ function visualizerRefreshChart() {
 					} );
 				}
 			}
+
+			// This script tag is printed before the enqueued script tags (data-visualizer-script),
+			// so defer the viewport check until after the full DOM is parsed and those elements exist.
+			setTimeout( function() {
+				var charts = document.querySelectorAll( '.visualizer-front' );
+				var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+				for ( var i = 0; i < charts.length; i++ ) {
+					var rect = charts[ i ].getBoundingClientRect();
+					if ( rect.bottom >= 0 && rect.top <= viewportHeight ) {
+						visualizerLoadScripts();
+						return;
+					}
+				}
+			}, 0 );
 		</script>
 			<?php
 		}