Improvement Request: Lazy Loading

Ask us anything
1

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
2

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
3

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
4

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.

5

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?

6

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:

6 Likes
7

@Joyce is there a new and improved way to ‘load more’ records from xano? The shared links are broken and would appreciate any and all guidance to implement this in my app. Thank you!

8

Hi @jarryd,

Thanks for letting us know about the broken links!

We recommend adding a Load more button.

You could do it two ways:

  1. load all the collection in WeWeb and filter in the frontend with a slice formula to only display a few items by default (this is acceptable if your collection is not too heavy). This method is explained here. It’s the best option when your collection is not huge because it will provide a better user experience (faster) than making an API call to refetch the collection from Xano

  2. refetch your Xano collection to fetch additional items when the user clicks on the button. You can use the logic of the tutorial above combined with pagination setup in Xano to make sure WeWeb tells Xano which additional items it needs. This method is preferable if your collection is big and loading it all in your user’s browser would slow down the app.

If you’re interested in the topic, I talk a little bit about frontend vs backend filters in this video at around minute 7.