(Draft) Add intersection observer to skeleton

radix-ui / themes

Radix Themes is an open-source component library optimized for fast development, easy maintenance, and accessibility. Maintained by @workos.

https://radix-ui.com/themes

MIT License

5.33k stars 190 forks source link

(Draft) Add intersection observer to skeleton #541

Closed tresabhi closed 2 months ago

tresabhi commented 2 months ago

Description

Add intersection observer API directly into Skeleton. When onIntersection is passed, an observer is created. Passing intersectionOptions is also supported.

Testing steps

Figuring this out as we speak.

Relates issues / PRs

N/A

vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
themes-playground	❌ Failed (Inspect)			Jul 7, 2024 1:53am

vladmoroz commented 2 months ago

Why is this PR created? What are you trying to achieve?

tresabhi commented 2 months ago

@vladmoroz I am working on implementing the intersection observer right into the skeleton component. This would be very useful in many of my chases where I lazy load components as soon as the skeleton is visible on screen on scroll. So, instead of setting up an intersection observer wrapper, I was thinking of adding an onIntersection event directly to skeleton.

vladmoroz commented 2 months ago

@tresabhi what does your design look like when things are loading? Do you granularly fetch data at the node level?

So far I'm not sure whether this makes sense in the Skeleton itself:

If it's a large chunk of data that renders something like a big list or table, then the responsibilities wouldn't fall on an individual Skeleton element. The data loading and viewport intersection responsibilities would probably make more sense at the parent level
If it's a single element off screen, it's either not worth the optimisation to lazy load a small piece of data, or is a pretty niche case