Any Bubble app that has a Repeating Group (list) would likely also display some “empty state” when the list is empty or when cannot find any item by a given filter.
There are different ways to display the empty state for Repeating Groups in your Bubble app, and they have their pros and cons (and consume different amounts of workflow units).
In this article, we’ll explore the most common approaches, and I’ll show you how to display an empty state without any WU (Workflow unit) usage.
Video guide
If you’d prefer a video guide, check it out below. If you prefer text format, just continue reading.
The Demo Bubble app link: https://empty-state-2.bubbleapps.io/version-test (username / password: “test” / “test”)
Bubble Editor app code: https://bubble.io/page?id=empty-state-2
Option 1: Checking “:count is 0”
Probably the most popular approach is to check if “:count is 0” for the list items inside the repeating group, and display an empty state if this condition is true.
However, this option is the least efficient and consumes the most WU (3.8 WUs per 1000 items in the list, as per AirDev report here. It’s caused by a bug in Bubble code, that leads to consuming so many WUs.
💡 Note: if you change the condition to “:count < 1” — it will consume only 0.2 WUs per 1000 items.
Option 2: Checking “:first item is empty”
Probably 2nd most common approach is to check “:first item is empty”. Meaning if the first item is not there — then the list has no items at all.
This approach consumes 0.69 WUs per 1000 items. It’s better than “:count is 0”, but worse than “:count < 1”.
We’d like ideally to not consume any WUs at all.
Option 3: Place the “Empty view” behind the Repeating Group
We can design our layout in a way that we won’t need to add any conditions at all. For example, we can group our Empty State and Repeating Group inside a “Alignt to parent” container and put the Empty view behind the Repeating Group.
Check “Behind” tab in the application.
Such an approach won’t consume any WUs (cos we don’t have any conditions at all).
However, it will work ONLY in the following cases:
- When the list item doesn’t have a transparent background (cos otherwise empty view will be visible behind).
- When the height of the first list item is bigger than the height of the empty view.
In other cases, the Empty view behind will be visible or partly visible. Plus, there might be a small blink during the first load (when the list items are not loaded yet).
Option 4: Place the “Empty view” behind and add frontend-only conditions
We can improve our previous cases by adding some conditions that will allow us to have any kind of empty views behind, regardless of the size or background of the list item.
For it, we’ll need to make our Repeating Group “Fit height to content” (in the “Layout” tab). And the following conditions:
- Page loaded above fold (it waits for the initial page to load)
- RG: is loading is no (it waits for the RG to finish loading)
- RG’s height < 10 (it checks the height of the RG. If no item — its height will be zero (or a very small number).
If these conditions pass, you now have full control over your empty state, don’t consume any WUs, and provide your users with a snappier experience (since your app makes fewer requests).
This approach can have a meaningful effect if you have many rows in your database or many repeating groups on the page.
In any case, measure and check what works best for your app and use the approach that suits you best.
Conclusion
Bubble is a powerful no-code platform. However, by not following its best practices and not understanding how it works, you can easily overload your Bubble app with redundant requests. Follow these best practices to improve your apps’ performance, and speed, and save costs on less WU consumption.
Hope it helps 🙌.
Links to explore:
The Demo Bubble app link: https://empty-state-2.bubbleapps.io/version-test (username / password: “test” / “test”)
Bubble Editor app code: https://bubble.io/page?id=empty-state-2
For an enhanced upgrade to your Bubble app, explore our Natively no-code development tool, which effortlessly converts Bubble apps into Android and iOS versions, ready for quick publishing on app stores.
Check out more of the plugins and templates created by our Sommo team here.
