google / google/playground-elements
Feature request: allow for lazy loading each playground inline instance, instead of all them at once
- Dominant language
- TypeScript
- Stars
- 648
- Forks
- 61
- PR merge metrics
- No merged PRs in 30d
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:
1. in head
```
import playgroundElements from 'https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm'
```
2. and for each sandbox instance:
```
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="mi-hoja-de-estilos.css">
</head>
<body>
<p>just an example</p>
</body>
</html>
/* code css*/
```
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.
```
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);
});
```
Contributor guide
Assessment
This issue has not been assessed yet.