Feature request: allow for lazy loading each playground inline instance, instead of all them at once #396
Description
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/[email protected]/+esm'
</script>
- and for each sandbox instance:
<playground-ide defer resizable line-wrapping>
<script type="sample/html" filename="index.html">
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="mi-hoja-de-estilos.css">
</head>
<body>
<p>just an example</p>
</body>
</html>
</script>
<script type="sample/css" filename="mi-hoja-de-estilos.css">
/* code css*/
</script>
</playground-ide>
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/[email protected]/+esm')
}
});
});
// Observe all components with the desired class
const els = document.querySelectorAll('playground-ide');
els.forEach((el) => {
observerPlayground.observe(el);
});