When it comes to displaying data, Bubble makes it pretty easy for you.
You drag a Repeating Group on your page, plug it to your data and there you go.
But !
This is not always that easy. If you have a lot of data returned by your search and injected into your Repeating Group, it might end displaying hundreds or thousands of items at once.
The result ? A high loading and a high consumption of Workload Unit.
Not good.
Thankfully, there are solutions. You simply need to limit the number of items displayed in your Repeating Group to the "first X items" and give users the possibility to "Load More" with a click on a button.
And you're in luck, that's precisely what you're about to learn in this tutorial.
Step 1 - Configuring your Repeating Group
Obviously, the first step for this tutorial will be to have a Repeating Group setup and ready to be used.
It can display any type of data (products, hotels, blog posts.... you name it).
In my case, I'm using a Blog Posts section that I copied from Nocodable Component's Bubble.io UI Kit.
Nothing too crazy.
As you can see, I made a simply search for my Data Type into my Repeating Group.
Step 2 - Storing the number of items to display
Now comes the first important part, which is to actually track the number of items that we want to show to the users.
And how do we temporarily keep track of something ?
That's right, with a Custom State !
So let's go ahead and create one. When possible I like to attach my custom states to the page, which is what I did here. But you can attach it anywhere you like.
As you can see, I've set it's Type to "Number". This is really important to make sure that we can use it as an actual number.
Also, make sure to set a Default Value. In my case I set it to 5, but you can choose any number that corresponds your use case.
Step 3 - Limiting our Repeating Group's number of items to show
Now that we're effectively storing the number of items our Repeating Group needs to actually show, we can use it.
To do this, we'll simply add the ":items until #" operator directly after our Repeating Group data source.
And for the number, we'll use the value of our Custom States.
With this, Bubble will know that it should load only "the first X items" returned by your search. X being the value of the custom state we created earlier (which in my case is 5 by default).
Alright, now the number of items returned by our search is effectively being constrained.
If you hit preview you should see it (in my case I only get 5 items). If you don't make sure you set a Default Value on your custom state !
Step 4 - Making our Show More / Load More button work
Alright, now let's come to the important part, making our Load More button actually work.
If you understood what we did earlier, you know that the only thing we have to do is increasing the value stored in our Custom States.
Once that'll be done, our Repeating Group will display the corresponding number of items.
So basically, each time we click on the "Load More" button, we want our custom states to be increase by "X" (by 5 for example).
To do that, let's first add a Button under our Repeating Group (don't place it inside the RG, place it directly underneath it).
Once you've done this, let's add this workflow on it :
As you can see above, I've used a "Set State of an Element" action.
Now the interesting thing you need to see is that in my expression, I always start from the Custom state's value and then add 5 to it.
Now if you hit preview and try it, you'll see that it works perfectly !
Step 5 - Hiding the "Load more" button when there's no more results to show
Final step, we need to make sure to hide this "Load more" button when there's no more results to show.
Otherwise this would be a frustrating experience for your users, and we don't want that.
So let's add a conditional on our button to hide it when needed.
Basically, what we want to do is it hide our button when our Custom State's value (i.e the number of items to show) is Higher than or equal to the number of items we actually have in our database.
Here's how it looks :
Now, the tricky thing is to know that we actually have to use the exact same data source we're using in our Repeating Group.
Why ? Well because if we try to take the "Repeating Group's Items:Count", it won't give us the right number of results, because we constrained it.
So just go ahead and Copy the data source from your repeating group and add a ":count" operator.
And there you go ! You now have a fully functional Load more button !
Make sure to use it whenever possible. It's a great way to optimize your Workload Unit Consumption and your page load time.
