Commit graph

3 commits

Author SHA1 Message Date
infinite-persistence f7cf21b661 useLazyLoading: start loading when near viewport
## Issue
#6332 <Thumbnail lazy-loader is too slow || Use browser-level lazy-loading>

## Change
Switch from "threshold-based check" to "viewport distance comparison" using the `rootMargin` parameter. The root is the viewport.

This change makes it closer to the native `loading="lazy"` behavior, where it starts to load when approaching the viewport. Chrome I believe uses 3000px distance -- I think 500px is a good compromise for now. Can adjust further.

## Future
- We are currently creating N instances of IntersectionObserver.
  - https://developers.google.com/web/updates/2016/04/intersectionobserver
  - "If you need to observe multiple elements, it is both possible and advised to observe multiple elements using the same IntersectionObserver instance by calling observe() multiple times."

This would probably need a refactor to make ClaimList (or something higher) own the IntersectionObserver.
2021-07-12 17:06:30 -04:00
infinite-persistence 4dc333de41
Fix blank gif avatars (#6060)
## Issue
6010: hyperchat send display issues with GIF profiles

The FreezeFrameWrapper have no `src` to freeze due to the lazy loading.

## Fix
Delay the freezing by making the lazy-load effect return a state to indicate when then `src` has been loaded.

Since the lazy-loader will `unobserve` after loading, the state will never go back to false, so we don't need to handle the case of preventing `new FreezeFrameWrapper` from being called multiple times from it's effect.
2021-05-14 11:00:07 -04:00
Sean Yesmunt e4a3e54613 move lazy loading effect into effects/ 2021-04-14 15:25:19 -04:00
Renamed from ui/util/useLazyLoading.js (Browse further)