Feature request: allow for lazy loading each playground inline instance, instead of all them at once #396

tomasts248 · 2024-02-24T04:20:13Z

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>

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/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);
  });

The text was updated successfully, but these errors were encountered:

tomasts248 changed the title ~~How to lazy load or load the library only once per playground-ide instance~~ Feature request: allow for lazy loading each playground inline instance, instead of all them at once Mar 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature request: allow for lazy loading each playground inline instance, instead of all them at once #396

Feature request: allow for lazy loading each playground inline instance, instead of all them at once #396

tomasts248 commented Feb 24, 2024 •

edited

Feature request: allow for lazy loading each playground inline instance, instead of all them at once #396

Feature request: allow for lazy loading each playground inline instance, instead of all them at once #396

Comments

tomasts248 commented Feb 24, 2024 • edited

tomasts248 commented Feb 24, 2024 •

edited