[Vertical Alphabetical Scroll] Infinite scroll

Forge Component
Published on 4 May by Henrique Batista
8 votes
Published on 4 May by Henrique Batista


I'm trying to implement this widget with the infinite scroll pattern but I'm having some issues. Can you share some thoughts on this?


Hi Joao,

Can you describe more what issue you are getting.

some screenshots of issues.


Rahul Sahu

Issues integrating the component or loading the content or any specific error?

So. if you implement the component, you know that for the component be able to scrolls you to the right section, the section letter must be loaded on the screen. Imagine a list with 500 people and you click on the letter T. The letter T section must be loaded BUT, if you implement an infinite scroll, you will load your content some records at a time (example 20 records at a time), which is how OutSystems implement the pattern. And because of this, when the user clicks on T, it won't scroll down to the desired section, which is people that begin with that letter and report a defect, as they should. My question is, how would you implement this having this in mind.


Hi João,

I don't see a way to implementing the scroll without having the DOM elements in there, and I think it doesn't really makes sense.

I think the behavior of the pattern is not compatible with infinite loading on a UX perspective, otherwise you'd have a user scrolling to a letter that he would have to wait and then maybe it doesn't even have any records on it.


Hi Henrique,

Thanks in advance. I understand it, and it makes sense, but I would you mitigate the toll on load time when loading a bunch of records with images? 

This is my approach so far but I'm still facing some issues regarding load time, with only 200 records.

So, I have a query that fetches the distinct first letter of each record. With this, I get all the letters to scroll to.

Created a web block that receives the current letter and gets the first 10 people that start with that letter and have lazy load here.

I also already try not having lazy load and in the previous step, instead of fetching all the data I need to display, I only fetch the records Ids, and create a web block that receives the ID and fetches the data needed, and in the screen added the same technique Facebook and Microsoft Teams implements when they are still fetching data (the blurry content) so the user knows what is going on, but this still was kind of slow in mobile.

The images are currently being fetched inside a web block, so it only queries the database with Binary files after the record has been rendered.