1<div id="querystats-container" class="h-full">
 2    <div class="px-6 py-4 text-center">
 3        <p>Loading querystats...</p>
 4    </div>
 5</div>
 6<script>
 7(function() {
 8    var container = document.getElementById('querystats-container');
 9    var loaded = false;
10    var parent = container.parentNode;
11    var observer = new IntersectionObserver(function(entries) {
12        entries.forEach(function(entry) {
13            if (entry.isIntersecting && !loaded) {
14                loaded = true;
15                var iframe = document.createElement('iframe');
16                iframe.src = "{{ url('admin:querystats:querystats') }}";
17                iframe.frameBorder = "0";
18                iframe.style.width = "100%";
19                iframe.style.height = "100%";
20                container.innerHTML = '';
21                container.appendChild(iframe);
22                observer.disconnect();
23            }
24        });
25    }, { root: parent, threshold: 0 });
26    observer.observe(container);
27})();
28</script>