search

AppFederation / cloud-time-ion

Timers in the Clouds, Timers everywhere! By the Time+Tasks+Cloud People!
https://lifesuite.vercel.app
2 stars 0 forks source link

Load-more (infinite scroll) based on IntersectionObserver #52

Open karol-depka opened 3 years ago

karol-depka commented 3 years ago

https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin (for buffer - can try smth like 100% instead of px)

https://github.com/gatsbyjs/gatsby/issues/14033

https://www.sitepoint.com/intersectionobserver-api/ (OLD)

karol-depka commented 3 years ago

https://www.telerik.com/blogs/intersection-observer-api-makes-lazy-loading-a-snap

karol-depka commented 3 years ago

It should be a separate component from the manual-load-more-via-button ()

karol-depka commented 3 years ago

If rootMargin (in px or smth like 100% (extra screen-height)) causes problems, then we can just increase the number-of-items-to-load-ahead-of-time, to have more buffer.

karol-depka commented 3 years ago

Let's not forget to destroy/unsubscribe the IntersectionObserver, in ngOnDestroy(), to avoid performance/memleak problem.

karol-depka commented 3 years ago

keep in mind: trackBy

karol-depka commented 3 years ago

Let's first try: https://github.com/orizens/ngx-infinite-scroll in separate list/scroll implementation sub-component (switchable via options component)

karol-depka commented 3 years ago

Example with IntersectionObserver:

https://netbasal.com/build-an-infinite-scroll-component-in-angular-a9c16907a94d