Using several sandbox code the initial load makes the page unresponsive for several second which is bad for performance and overall use experience.
Further setup details:
in head
<script defer type="module">
import playgroundElements from 'https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm'
</script>
Proposed solution: lazy loading each inline sandbox instance and not all the instances at once.
In addition the following code could be used, which improves loading of the library upon entering the viewport of any inline Playground code. Unfortunately it cannot load only the specific sandbox but loads all of them.
<script defer type="module">
const observerPlayground = new IntersectionObserver((entries, observerRef) => {
entries.forEach(async (entry) => {
// `isIntersecting` will be `true` if any part of the element is currently visible
if (entry.isIntersecting) {
//entry.target.removeAttribute("hidden");
// Remove the observer from the current element
//observerRef.unobserve(entry.target);
entry.target.querySelector('playground-ide');
const playgroundElementsModule = import('https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm')
}
});
});
// Observe all components with the desired class
const els = document.querySelectorAll('playground-ide');
els.forEach((el) => {
observerPlayground.observe(el);
});
Using several sandbox code the initial load makes the page unresponsive for several second which is bad for performance and overall use experience. Further setup details:
Proposed solution: lazy loading each inline sandbox instance and not all the instances at once. In addition the following code could be used, which improves loading of the library upon entering the viewport of any inline Playground code. Unfortunately it cannot load only the specific sandbox but loads all of them.