Make Intersection Observer / hydrate-client configurable

In some of my use cases the intersection observer used to lazy load components with hydrate-client kicked in a bit late. As I understand it @philipp-tailor had a similar issue in #12 in that he’d like components with hydrate-client to hydrate instantly.

For these use cases it would be great if the hydrate-client behavior would be configurable. I personally like the fact that lazy loading is the default. Maybe the behavior can be extended something like this:

<!-- Lazy load component when in view -->
<Component hydrate-client={{}} />

<!-- Hydrate instantly -->
<Component hydrate-client={{}} hydrate-lazy={ false } />

<!-- Lazy load component with specific intersection observer configuration -->
<Component hydrate-client={{}} hydrate-lazy={{ rootMargin: '500px' }} />

note: I see IntersectionObserver.ts already accepts a distancePx, but it’s not accessible from a Svelte template.

[jbmoelker]

Just another thought: to improve load time of a lazy component it would be nice if you could prioritize it using preloading:

<!-- Lazy load with preload directive -->
<Component hydrate-client={{}} hydrate-preload={ true } />

This would add a link[rel="preload"] to the head stack:

<link rel="preload" href="/svelte/entryComponent-[hash].js" as="script">

[nickreese]

@jbmoelker We’ll rock “eager” and “lazy” then to match the spec. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading