Fast page switching form one page apps


I have a big one-page app (going to the App Store and Google Play). To minimize the main page I rely heavily on Reusable elements. It’s the REs that actually show stuff.

To control data loading I pre-populate states in the REs will complete lists. The REs then filter out the data to show depending on the situation (what categories/products/stock to show).

However, I still have a hiding shape that I fade out after 0.5 secs. This so that the filter has time to complete and the browser has time to (re)render the Repeating groups that show the filtered data from the states (I don’t want any element showing from the prior list however briefly).

Since the categories, products, and stock can change I in the database and the states do not automatically get updated, I redo a load of data to the states every 60 secs. I think Bubble we discover that if the data is the same and do nothing.

Even if I were to use populate the RGs in the REs with normal searches, I still as a complementary precaution, do a forced check (search) on the availability of the product in the database when the customer selects it. This to ensure the customer cannot put an item in the shopping cart even if it went out of stock just moments ago.

Cheers, Peter


thanks for sharing

just curious, do you prepopulate states using “on page load” or “do when entire page is loaded” or using what workflow?

On Page Load, to do it asap.

1 Like

For clarity; One could use RGs that with searches in them. That would make Bubble responsible for keeping the updated. However, that means that there RGs must be visible at page load to actually load the data. I can not do that since I have a one page app that relies on showing/hiding groups that collapse their height when hidden so that the page will not be longer than needed for any group shown. So all groups need to stay hidden until they are wanted by the user.

Yes, it would be possible to put the three groups in another master group and put that behind the rest to allow them to show initially and hide when loaded. But, that would in my view make the already delicate alignment of 17 groups even harder to maintain.

i understand.

even if you had only one RG but 10 filter buttons for results, loading states for these 10 most common filters is also a way to make bubble faster.

i might compare the performance of on page load with do when condition is true page loaded entire. the second should speed up initial page load as bubble (the browser) will not immediately have to compute all those states

That could be an interesting comparison. I my case the page load time is not a problem since we want to show a splash screen for a second or two. So I want to use that time as much as possible.

Could you elaborate on how you’re able to make a list mimic/replace repeating groups? I have a twitter style app that uses repeating groups for the feed, but if there’s a faster way then I’m all for it. Currently I’m just changing the data of the repeating group.

You can preload data to make populating your RG faster. This preloaded data you can have in another RG or in a state which is a list of things.

Note however, my use case above is for quite small finite list.

This is the current system. Is this the type of structure you’re referencing? Our repeating group’s data source is indeed from a custom state. The data source changes when a different condition is met. The states all exist in a custom event, and are triggered whenever a category is selected.

Is this what you were talking about, and if so, is there any way to make it faster? :sweat_smile:

btw sorry to have hijacked your question thread with my own questions.

NW mate. Good to help out.

The key is when you populate the state lists.

Btw; Looking at your first pic maybe explore_humor and explore_entertainment you could be of the same data type adding a type to it. That could lessen the need for having a lot of conditions.

Thanks for the tip. I need to do this too. Do you just briefly show a shape that blocks the data?

I’m considering adding shapes to build a skeleton screen, similar to how linkedin does it.