How to Paginate Repeating Groups in Bubble.io Without Loading All Data at Once?

Excessive WUs consumption issue in most pagination setup of the Repeating Group in bubble.io

A common mistake developers make is thinking they’ve implemented pagination just because data is displayed page by page. But behind the scenes, Bubble still loads the entire dataset into the browser on page load. Suppose there are 1,000 records and your app shows 10 records per page. If a user only browses the first 3 pages, you still pay the WU cost for fetching all 1,000 records, not just the 30 that were actually viewed.

If your Bubble app feels slow or is using more workload units (WUs) than expected, the problem might be how you're handling data in repeating groups. Loading an entire list of items at once can slow down your app and increase your resource usage, especially when dealing with a large database.

In this article, you will learn how to paginate repeating groups in Bubble.io to load data in smaller chunks. This approach improves performance, reduces workload unit consumption, and creates a better experience for your users. Whether you're working on an MVP or scaling an existing application, these techniques will help you build smarter and more efficient apps.

Now I am considering that repeating group is ready and now you are implementing pagination. Here is the best practice to do that.

Step 1: Setup Hidden Variables

Create a popup named Popup Hidden variables and create following Groups shown in the image below:

Set all these group’s type of content as number.

Here is the data source for each group:

• Group Item_from - 1

• Group Total_count - Do a search for:count [Do a search for:Count will not load all data. If you inspect, you will find out in network tab → maggregate that this will return number only from server]

• Group Current_page - 1

• Group Item_until - 10

• Group Show_per_page - 10

Step 2: Setup UI for Pagination

After, The Show per page: is a dropdown which will static values like shown in the image below

Add Toolbox plugin (It’s free!) Here is the link.

Add List of Numbers element of toolbox plugin on the page and configure it as shown in the image below:

Between Prev and Next button there will be Repeating Group of page numbers which has List of numbers as data source shown below:

Setup View 1-50 of 2,500 results as per the image below:

With this, UI setup of Pagination Group is completed.

Step 3: Setup Repeating Group Source

Here I am loading Email templates in Repeating Group, so the data source setup will be as per shown in the image below:

Remember, Use :items until# before using :items from#. Here is the logic behind it given by bubble.io

Step 4: Setup Pagination Workflows

I don’t recommend using display data in repeating group action as in my experience, It is not good practice for performance! But it is ok to use display data in group as the number of item will always be one!

Create 2 custom events:

1. update-page:

   This event will update page number in Group Current_page as shown in the image below

   

2. update-list:

   This event will update from and until number in Group Item_from and Group Item_until as shown in the image below

   

   Here is the formula for data update of Group Item_from: [{( Current page number * Show per page number ) - Show per page number} + 1]

   Here is the formula for data update of Group Item_until: Current page number * Show per page number

Create Dropdown Show per page value change workflow event:

On the UI of pagination, there is the dropdown from where user can select how many entries per page user wants to see like 10 or 30 entries per page. User can change the value from the dropdown as we have seen in Step 2. Now when user changes the value of dropdown, this workflow will trigger as per shown in the image below

So here there are 3 actions:

• Display data in Group Show_per_page

• Trigger update-page

• Trigger update list

Create Page number click workflow event:

Page numbers are part of Repeating group List of numbers’ numbers so on click of this Repeating Group’s group, this workflow will trigger as per image shown below

This will set current page as whatever number user has clicked

Create Previous and Next button click workflow event:

And here your optimised performant Pagination Ready:

UX Suggestion:

To improve UX when User is clicking and Repeating Group is loading, you can add skeleton loading for better UX. Here is the article link about How to create Skeleton Loading in Bubble?

🔚 Conclusion

Pagination in Bubble.io isn’t just about showing fewer records per page — it’s about how the data is fetched and rendered. Most developers unknowingly fall into the trap of client-side pagination, where the entire dataset is loaded up front, leading to slow performance and unnecessary workload unit (WU) consumption.

By implementing true server-side pagination, as outlined in this article, you can dramatically reduce WUs, improve load times, and scale your app more efficiently. Using hidden variables, structured pagination logic, and smart workflows, your repeating groups will load only the data that’s actually needed — no more, no less.

If you care about performance, cost optimization, and creating a seamless user experience, building pagination the right way is a must. Apply this setup to your current and future projects, and you’ll see the difference in both speed and server costs.