astro-podcast website. How to make more episodes keep showing up as you scroll

How can I implement this effect: Eg: https://hubermanlab.com/ (The podcast episodes keep showing up as you scroll.) The Spotify api fetches only 20 episodes.
Huberman Lab
Huberman Lab
The Huberman Lab podcast discusses science and science-based tools for everyday life. New episodes are released every Monday.
5 Replies
Jochem
Jochem16mo ago
it's called an infinite scroll, you'll want to use the Intersection Observer API to detect when the user is at the bottom and then load more items and insert them into the DOM
Jochem
Jochem16mo ago
Intersection Observer API - Web APIs | MDN
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
JOY
JOY16mo ago
https://codepen.io/Sup-the-builder/pen/eYQxPjL?editors=1010 in this i want to apply inifinite scrolling, ihave app.js(api call) and episode.astro(index of episodes) its fetching the episodes in the console but i cant make it appear on the frontend
Sup
CodePen
eYQxPjL
...
JOY
JOY16mo ago
how to append
Jochem
Jochem16mo ago
considering Astro is mostly SSR, I think you may have to do it manually using vanilla JS You can use the cloneNode method to get a copy of an element, then adjust the contents as needed. You can also take a look at the template element to store an easily reused copy of the element you need to clone
Want results from more Discord servers?
Add your server