Enhancement: Lazy & Manual Loading

[jhildenbiddle]

Original discussion: val-town/val-town-product#88

---

The idea would be to load a lightweight script first which displays a placeholder in the DOM until the element meets or exceeds some viewport proximity threshold (perhaps configurable via an attribute), then load the full playground script and render the element.

For example:

<!-- Initialize immediately -->
<vt-playground>...</vt-playground>

<!-- Show placeholder, lazy load and render using default viewport threshold -->
<vt-playground loading="lazy">...</vt-playground>

<!-- Show placeholder, lazy load and render when element is <= 200px from viewport boundary -->
<vt-playground loading="lazy" threshold="200px">...</vt-playground>

Additionally, allowing users to initialize the component (loading and rendering) by clicking a button in the placeholder would provide an efficiency-first option (similar to CodePen's "Click-to-Load" embed option):

<!-- Show placeholder, lazy load and render on click -->
<vt-playground loading="user">...</vt-playground>