<h1>
	Lazy loading JS by visibility
</h1>

<p>
	Here’s a neat trick.
</p>

<p>
	<a href="https://twitter.com/FredKSchott">Fred K. Schott</a>
	gives an impressive presentation of
	<a href="https://www.youtube.com/watch?v=mgkwZqVkrwo">Astro</a>,
	a framework-agnostic architecture for building web sites and web apps.
</p>

<iframe
	title="YouTube video player"
	width="560"
	height="315"
	src="https://www.youtube-nocookie.com/embed/mgkwZqVkrwo?rel=0&controls=0&fs=0&start=2356&end=2373"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen
></iframe>

<blockquote>
	<p>
		We add a script to the end of your page.
		It’s inline. It essentially runs almost immediately,
		and that is what is going to create that
		<a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a>.
		It’s going to do a dynamic import of the things that you need,
		and it’s going to call React render on that component.
	</p>
</blockquote>

<p>
	During the presentation, Fred demonstrates dynamically loading JS using
	<a href="https://jasonformat.com/islands-architecture/">"Islands Architecture"</a>,
	a strategy
	where small HTML placeholders are progressively upgraded with dynamic or interactive content as-needed.
</p>

<p>
	The demonstration involves
	waiting on the viewport visibility of a <code>div</code> placeholder before loading some JS.
</p>

<p>
	The entire setup contributes less than 200 bytes to the page when gzipped.
</p>

<pre><code>&lt;div data-astro-id="3459833264469372"&gt;&lt;/div&gt;
&lt;script type="module"&gt;

<b -com>/* scaffolding put before the code */</b>
<mark>((o=new IntersectionObserver((([{isIntersecting,target}])=>{isIntersecting&&(o.disconnect(),</mark>

<b -com>/* code run when the section is visible */</b>
<b -var>Promise</b>.<b -ent>all</b>([
	<b -key>import</b>(<b -str>'https://cdn.skypack.dev/react'</b>),
	<b -key>import</b>(<b -str>'https://cdn.skypack.dev/react-dom'</b>),
]).<b -ent>then</b>( ([
	{ <b -con>default</b>: <b -var>React</b> },
	{ <b -con>default</b>: <b -var>ReactDOM</b> },
]) => <b -var>ReactDOM</b>.<b -ent>render</b>(
	<b -var>React</b>.<b -ent>createElement</b>(<b -str>'strong'</b>, {},
		<b -str>'This was rendered with React!'</b>,
	),
	<b -ent>target</b>,
) )

<b -com>/* scaffolding put after the code */</b>
<mark>)})))=>{o.observe(document.querySelector('[data-astro-id="3459833264469372"]'))})()</mark>
&lt;/script&gt;</code></pre>

<p>
	Neat trick, right?
</p>

<p>
	It can be used once, or multiple times in different places.
	JS can be loaded by <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/observe">element visibility</a>,
	a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia">media query</a>,
	a <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe">container query</a>,
	any <a href="https://developer.mozilla.org/en-US/docs/Web/Events">event</a>,
	any <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/observe">asset</a>,
	any <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback">idle period</a>,
	or any mix of these,
	and any other condition that’s helpful.
</p>

<p>
	Below is a live demonstration.
</p>
<p style="margin:25vh 0">👇</p>

<div data-astro-id="3459833264469372">&nbsp;</div>
<script type="module">
((
	o = new IntersectionObserver(
		([{ isIntersecting, target }]) => {
			if (isIntersecting) {
				o.disconnect()
				Promise.all([
					import('https://cdn.skypack.dev/react'),
					import('https://cdn.skypack.dev/react-dom')
				]).then(
					([{ default: React }, { default: ReactDOM }]) => ReactDOM.render(
						React.createElement('strong', {},
							'This was rendered with React!'
						),
						target
					)
				)
			}
		}
	),
	f = document.createDocumentFragment(),
) => o.observe(
	document.querySelector('[data-astro-id="3459833264469372"]')
))()
</script>

<p style="margin:25vh 0">👆</p>

<p>
	Above is a live demonstration.
</p>

<hr />

<p>
	That’s all.
</p>

<p>
	It just seems like a neat trick.
</p>