google / playground-elements

Serverless coding environments for the web.
BSD 3-Clause "New" or "Revised" License
549 stars 55 forks source link

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

Open tomasts248 opened 8 months ago

tomasts248 commented 8 months ago

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
<script defer type="module">
 import playgroundElements from 'https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm'
</script>
  1. 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);
  });