From 4f8c2e16d18fb83198cfb46959d30557af950b7c Mon Sep 17 00:00:00 2001
From: Hardeep Asrani <hardeepasrani@gmail.com>
Date: Tue, 17 Mar 2026 17:12:02 +0530
Subject: [PATCH] fix: render lazy charts already in viewport on page load

The scroll listener for lazy charts never fired if the chart was already
visible on page load, causing it to remain blank until the user scrolled.
Extracted the logic into a named function with a viewport bounds check and
call it once at page load in addition to on scroll.
---
 js/render-facade.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/js/render-facade.js b/js/render-facade.js
index 9ff2a90c..0636c8d5 100644
--- a/js/render-facade.js
+++ b/js/render-facade.js
@@ -129,7 +129,7 @@ window['vizClipboard2'] = window['vizClipboard2'] || null;
     }
 
     function displayChartsOnFrontEnd() {
-        $(window).on('scroll', function() {
+        function renderVisibleLazyCharts() {
             $('div.visualizer-front:not(.viz-facade-loaded):not(.visualizer-lazy):not(.visualizer-cw-error):empty').each(function(index, element){
                 // Do not render charts that are intentionally hidden.
                 const style = window.getComputedStyle(element);
@@ -137,13 +137,25 @@ window['vizClipboard2'] = window['vizClipboard2'] || null;
                     return;
                 }
 
+                // Only render charts that are currently within the viewport.
+                const rect = element.getBoundingClientRect();
+                const inViewport = rect.bottom >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight);
+                if (!inViewport) {
+                    return;
+                }
+
                 const id = $(element).addClass('viz-facade-loaded').attr('id');
                 setTimeout(function(){
                     // Add a short delay between each chart to avoid overloading the browser event loop.
                     showChart(id);
                 }, ( index + 1 ) * 100);
             });
-        });
+        }
+
+        $(window).on('scroll', renderVisibleLazyCharts);
+
+        // Run once on page load to render any lazy charts already in the viewport.
+        renderVisibleLazyCharts();
 
         $('div.visualizer-front-container:not(.visualizer-lazy-render)').each(function(index, element){
             // Do not render charts that are intentionally hidden.