I have pretty much a single-page app with a bunch of hidden groups that hold filtered RG’s. These groups are shown using custom states. The app is super snappy after each repeating group is loaded, but that only happens after I have made each group visible while using the app.
Does anyone have a solid way of loading all the RG’s on page load, where I would display some sort of loading gif until the page is fully loaded?
I’ve seen some forum posts on this topic, but I’m curious if anyone has achieved this in a fluid way without plugins.
I use an alternative approach @mark. I make only the things needed immediately a user logs in visible. I put what I call Pre-Load RGs into a hidden group and make all RGs in app groups Ext Vertical and have the Data Source point to the preloads as their data source. I then add a condition to the hidden group of RGs When page (entire) is loaded the element is visible.
The pre-load RGs are width 1, height 1, row 1, column 1, Full List :sorted or :filtered as needed with no shadow or background. I put no elements into the Pre-Load RG cells so nothing is ever visible. I put the hidden group on the right side of page or near bottom so it will not mess up responsive settings.
I get very fast responses this way. The user is not waiting longer than required and while they are looking at the screen content and orienting themselves the app is quietly loading those hidden preloads so when the real RGs are displayed they are fast. Hope that all makes sense.
I don’t mean to highjack the topic, but I would like to hear your opinion on the following.
I did a slow motion video of a situation I am having. The are two observations. First of all, Bubble is rather quick to identify the number of records and load the table of a repeating group. However, it gets slow when it populates the tables with content. In my case - text labels.
But here is where I want to ask your opinion. You can only address first level data, but what about nested data? For example, I have a table of records, where each record refers to another table of records. We can preload the second level of tables using (hidden) nested repeating group, but we cannot address a specific record. When user clicks on a record, Bubble would still need generate the repeating group for that specific record. The loading time will be added AND we would still have the time gap between showing the table and populating it with content.
It could be solved with arrays of data, but I wasn’t able to find anything like that within Bubble.
Funny you should say that. I was looking at that exact thing yesterday. It is bugging me. Even when the nested RG has very few records the load time is too slow. I was looking for some sort of array solution too but so far no dice.
What I had to do, and it is not the first time I had to use this hack, was to put text field(s) in the outer RG. The first is a combination of the outer RG text and the inner RG text selection (if item is already selected) which I then manipulate using Regex in a :find and replace. If an option is not selected then I use the second text field which is a text list of possible options. A horrible solution but it works for me right now because there are so few items in my nested RGs but I’m unhappy with it.
@NigelG and @gaurav and any other old hands, have you any suggestions for us?
So amusing, I was thinking of going the regex way too, only storing the values in a custom state instead of outside text labels. But frankly, I am not a programmer, so just thinking of regex makes me wanna sleep.
Many years ago I played with ASP 101 and VB, and I remember it was a basic thing to loop through nested records, hold them in an array and address individual items. With Bubble it’s a true challenge!!!
I can usually find the Regex I need with a quick Google search. S for the good old days of arrays, I go a lot further back than VB so I know what you mean. Sometimes Bubble’s power is also its limitation.
Hi there, thanks for offering up this solution. For some reason, I’m still getting the same load time when I initially click to show the hidden group. Once the list is loaded and I go back and forth its quick, but every list has that slow initial load time when first shown.
I’m wondering if I’m missing a step in your process…
Is there a way to load all the RG’s when the page is first loaded, but hiding them from the user until all lists are loaded?
I have a hidden group to hold all my RGs that I want to pre-load. I have a conditional When page is loaded (entire) this element is visible.
Inside that group I put an RG for each list. I make the RGs full-list, I give them 1 row and 1 column, and I make then height 1 and width 1. I ensure the RGs have no content/elements, no background and no borders (nothing displayed). I make the data sources whatever searches I need to load the lists.
I make the real RGs point to the relevant preloaded RGs for their data source.
What happens is my page loads and while a user is looking at the content, getting their bearings and deciding what it is they want to do, the hidden group has become visible and is therefore loading the RGs quietly in the background with nothing obviously happening as far as the user can see. If you have a as lot of RGs or long lists it can take time so if you are bouncing in and immediately hitting a button to test then you are moving faster than a user will because of your familiarity.
Ahh I didn’t have it right, that is the approach I have implemented now. It’s def faster though. I appreciate your help.
Even now, it’s when I first click a particular list (after waiting over a min after initial page load) that the load is somewhat choppy. I think it’s because the elements within the rg are loading. They’re reusable. Once I view each list its snappy. I was hoping to have that on first click of the list, even if the initial page load takes a bit longer – I’m good with that.
I guess it is the reusables in the RG. I’ve never actually done that. I’ve had RGs in reusables but not the other way around. Another thought might be to try a variant of the suggestion I gave to @ryparken above.
Every time the data changes, run a Backend API to build a text field containing all the values you need separated by some delimiter. For example: “Breakfast | Eggs | Protein | 2” then when the page loads you could run a Workflow to set a custom state to be a List of those text fields. The RG could use a simple extract with Regex to get the text before the first “|” or between the second and third “|” depending on what bit of information you required. I would think that would be worth a try.
Hi @mark. The problem is that Bubble only loads data when it displays it. So, you are not preloading anything really as you may think, because all you groups are hidden.
The (interim) solution I have found for myself is not to hide the groups, but to make them invisible with CSS (using Toolbox plugin). Put all your RGs into a floating group which is visible on page load, and add style to visibility:hidden. This way, data will be loaded and displayed, but will not be seen by users.
You need floating groups because visibility actually preserves the element space, just making it invisible.
When you have your data preloaded this way, it is cached by the browser, so whenever you display it anywhere else in your app (outside of invisible hidden groups) - it shows up immediately.
@ryparken I am just reading this now and would like to try it to see if I can get any further time savings although it is already working pretty fast for me because the information in my RGs is only being used to preload custom dropdowns if/when a user goes into edit mode. When the page is loaded it is in view mode and is simply displaying data table values for a single record not a list of alternatives for a list. I’m trying to follow your logic here to see if would speed things up further for me but getting lost in a few places.
First, how do you set visibility:hidden on your RG using CSS Tools, I can’t find a workflow action for that. Can you spell out the steps, please?
… visibility actually preserves the element space, just making it invisible.
The above I can’t make head or tail of. I have a hidden Group that is 1x1 so the space it is taking up on the background is irrelevant as far as I can tell. What is it that you find significant about space?
I’m using plugin called Classify. Once installed, you can add CSS classes to the page header. I keep my floating group (containing the pre-loaders) Bubble-visible when page is loaded (must have) but make it user-invisible by assigning CSS class using the Classify definitions.
Two things. First — the group must be visible, otherwise you are not preloading anything. Bubble will only load data when the element is visible. Second — I am preloading RG’s populated with content for a numbers of fields (text and images). I made each 5px heigh, but a table with 50 records would still take 250 pixels. That’s why I need a floating group.
Does it make sense now? Happy to take some print-screens.
Never tried it. I thought you said above it was CSS from Toolbox you were using. I can add CSS to header from that ok but how to you apply it to the FG? A screen shot of that would help a lot.
My group becomes visible as soon as everything else on the page is loaded (page entire) and it is decidedly faster than not pre-loading so is that not the same thing as your FG?
Sorry, I mixed it up with another plugin called Toolbox, which is for JavaScript.
It’s the images. Unfortunately, the images retain their width and height even though the parent group has 1x1 pixels dimensions. So I need to hide my parent group with CSS, and I need to use floating group as parent since I don’t know the dimensions of my RGs upfront (and I don’t want to spoil the design).
Hi @patricia. Small update. You don’t need to use CSS to hide the floating group. You can just set the floating group’s floating z-index to “beneath the page”. It won’t be visible, while still accessible for Bubble.
