Hi team, Any way for me to fetch a specific number of results and lazy load the rest as a user scrolls? or should i upgrade my plan ? The API returns over 22,000+ products for a tool i'm building. I upgrade to scale up plan, but still having issues.
Lucas G
7 months ago
This is solved now right?
Just infinite scroll next to check off
β€οΈ1
TCG.Store
7 months ago
Yeah this is solved π-- just need to figure out the infinite scroll piece. Currently experimenting now to see how i can tackle this
function infiniteScroller (args, ctx) { const observer = new IntersectionObserver((entries, observer) => { for (const entry of entries) { if (entry.isIntersecting) { ctx.triggerActionEvent('loadNextPage', true); } } }); const scrollSentinel = document.getElementById("scroll-sentinel"); observer.observe(scrollSentinel); }
π1
π₯1
π«Ά1
π‘1
The loadNextPage event would trigger your API/pagination workflow
Which would depend on your setup
Ah, I should clarify. In the code you'll see a 'scroll sentinel'
Lucas G
7 months ago
I placed an empty div after the main content div which has that as its id
Basically, when the page hits that div it triggers your pagination workflow
nathandh
7 months ago
What is the {ctx} parameter?
TCG.Store
7 months ago
Thank you so much for sharing this @Lucas G and no worries on the delay. This is beyond super helpful. Iβm going to give this a try when I get back home! π‘
needtheanswers
7 months ago
Thanks for sharing the code @Lucas G. Would be curious to know how your page setup looks like. Would you mind sharing your project link?
Xioteer
4 months ago
Hey @Lucas G, can you elaborate a bit on the general concept on this? I assume I need the intersectionobserver package for your code?
Xioteer
4 months ago
It is a bit bold of me to go directly for infinite scroll, when I do not know how to handle the API calls yet either, but I am trying to piece everything together
Lucas G
4 months ago
You do not need the observer package but I do recommend you use it
The package has a better action which cleans up the observer, etc.
Lucas G
4 months ago
I should probably update that action, that was for a proof of concept
But anyways, the basic idea is to generate an event whenever the user reaches the end of the list
With that event you can then either trigger a call to fetch more data or render the new data if you already have it
Xioteer
4 months ago
Okay cool, I will look into that. Thanks! Still need to work out how everything works, so I will probably come to you with one or two really basic questions.
One way is to keep track of the amount of data rendered in a variable and add to it whenever you want to render the next "page"
Lucas G
4 months ago
For example, you can keep track of the number of items (ie. 25 per page) rendered and add an offset to the API call to get the next set
Or if you already fetched all the data and didn't render it all, you can calculate how many pages you want to display and render the data in chunks accordingly
Just from a concept perspective. How would one batch the already received items? That sounds super complicated. probably slicing up a stored array then?
Lucas G
4 months ago
You can take a simply approach. Let's say take the size of the array and divide it by the number of items you want per page
That would give you the number of pages
Then you could track the number of pages loaded in a variable
Increasing page every time the observer event is triggered
Xioteer
4 months ago
Wow, I think I did it
That was actually super straight forward! Thanks for the help @Lucas G
Xioteer
4 months ago
Now the autofetch search function is creating weird behaviour. Just need to work that through
Xioteer
4 months ago
That one is driving me crazy though. haha
Xioteer
4 months ago
So autofetch is no good when you have infinite scroll, Simply because of the fact that you need to keep track of pagenumbers, append arrays, reset them with search input changes and everything needs to happen in order