Improvement Request: Lazy Loading

I tried to submit this through the feature request app but kept getting error messages.

I’d really like the option to have lazy loading for collection lists. Pagination is OK, but it does potentially lead to users needing to click through a lot if they need to see all the items. On the other hand, I obviously don’t want to load a ton of data that aren’t needed, which will slow down the app.

2 Likes

Hi @kyanaloe, your request went through no worries. I’ll investigate why you got error messages though!

Thanks for flagging it here as well and making sure :slight_smile:

1 Like

Hi @Joyce, just wondering if this is something that your team decided to work on or not. I know that there’s already a lot in the roadmap (a lot of which I asked for!) so I’d understand if not. Just trying to decide if I should take a different approach or wait for this.

1 Like

Hi @kyanaloe! No, lazy loading collection lists is not on the roadmap yet.

For now, we recommend adding a “Load more” button as a workaround.

Users still have to click through to see additional but they don’t have to click back to see ones that were already loaded.

OK, that makes sense.

I am also looking through this post: Conflict of "Load More" and frontend filters/search - #4 by dorilama

Question: If I add filters to the collection in WeWeb, does that cut down on the amount that gets served to the user’s browser? If not, then I guess I’ll need to add page filters to a Xano api workflow, and then implement backend pagination. Right?

Hi all, just providing an update here because I found a solution that works well for me, and figure it might help others, too.

In summary, I wanted to:

  1. Limit the number of records loaded at a time to prevent users’ browsers from crashing/loading very slowly
  2. Allow users to manipulate the collection list with multiple filters
  3. Add a “Load More” button so that users can see more records if they want, without reloading the list everytime.

Here’s the solution I used:

  1. I used backend pagination (📜 Pagination in the Backend) in my Xano stack to only send a certain number of records at a time. I also allowed the page override, so that I could tell Xano what page to send when I call the Get API
  2. I added external filtering (External Filtering - Xano Documentation) information to the JSON I used for the pagination override. This means that Xano first filters the list according to user inputs, then sends the number of records I want, from the page I want. For example, if 10 records match the filter requirements, and I have the per_page value set at 5, I can ask Xano to send page 1 (rec 1 - 5) or page 2 (rec 6 - 10).
  3. I added a button at the bottom of my collection list that says “Load More”. Since I don’t want the full list to re-load every time I hit the button, I save the fetched files in an array variable, and bind the list to the array. Everytime a user hits “Load More”, the API gets the next page worth of records from Xano, and then I merge these new records in with the already loaded records in the array. I then reset the array and the “page” variable anytime I use a filter. I also only display the “Load More” button if there are, in fact, more records to load.

Here’s a quick Loom demonstrating the final product:

2 Likes