Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make Intersection Observer / hydrate-client configurable

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

jbmoelkercommented, Aug 23, 2020

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">
nickreesecommented, Aug 24, 2020

@jbmoelker We’ll rock “eager” and “lazy” then to match the spec.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Intersection Observer API - MDN Web Docs
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor ...
Read more >
Web Optimization using Intersection Observer API | by GP Lee
According to MDN, The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element ...
Read more >
JavaScript Intersection Observer Ultimate Guide
Intersection Observer is one of 3 observer based JavaScript APIs with the other two being Resize Observer and Mutation Observer.
Read more >
Learn Intersection Observer In 15 Minutes - YouTube
Intersection Observer is an amazing tool in JavaScript that allows you to easily and efficiently do pretty much anything based on the ...
Read more >
A guide to Intersection Observer | Uploadcare Blog
Let's see how to use Intersection Observer API to determine whether the DOM element ... options — an object with additional configuration.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found