Avoid interactive chart flashing first on mobile

Nachtzuster · Oct 30, 2024 · f6cd0e6 · f6cd0e6
1 parent 5a2e390
commit f6cd0e6
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/scripts/overview.php b/scripts/overview.php
@@ -313,7 +313,7 @@ function setModalText(iter, title, text, authorlink, photolink, licenseurl) {
 <div class="right-column">
 <div class="center-column">
 </div>
-<div class="chart">
+<div class="chart" style="visibility: hidden;">
 <?php
 $refresh = $config['RECORDING_LENGTH'];
 $dividedrefresh = $refresh/4;
@@ -331,9 +331,13 @@ function setModalText(iter, title, text, authorlink, photolink, licenseurl) {
 }
 ?>
 <script>
-    if (window.innerWidth <= 800) {
-        document.querySelector('.chart').innerHTML = '<img id="chart" src="Charts/<?php echo $chart; ?>?nocache=<?php echo $time; ?>">';
-    }
+    document.addEventListener("DOMContentLoaded", function() {
+        const chartContainer = document.querySelector('.chart');
+        if (window.innerWidth <= 800) {
+            chartContainer.innerHTML = '<img id="chart" src="Charts/<?php echo $chart; ?>?nocache=<?php echo $time; ?>">';
+        }
+        chartContainer.style.visibility = 'visible';
+    });
 </script>
 </div>