Is pre-loading hidden elements possible?

ed727 · 2020-09-03T19:01:22.476Z

Hi, I haven’t found a solution to this and hope someone may know…

When Bubble builds a page, per the Bubble manual: “Invisible elements aren’t drawn until they get displayed later…”. In other words, Bubble doesn’t load and build them until they are needed.

https://manual.bubble.io/architecture-optimization-and-limits-of-the-bubble-engine/performance-and-scaling

My question… is there a way to have Bubble go ahead and fully build/load an invisible element before it needs to be displayed?

I have a popup that has some complex things in it. The first time it’s called on to display, it takes a few seconds to appear. Subsequently, it appears instantly, because it’s already been built.

(Interesting side note… with a popup, it builds and populates the entire popup before displaying. So there’s a lag with nothing on the screen, then the popup appears fully built. However, if I convert the popup into a hidden group or group focus, then it starts showing things as they are built. So it’s a tradeoff of making a user “wait” for a few seconds before anything appears, or having a partly-built group appear and finish building out in front of them).

vini_brito · 2020-09-03T21:03:20.459Z

Yeah there’s a plugin called invisible elements, something like that.
But try seeing if you can preload the data in the page, because I’m unsure if you’d be able to do that with a popup.
For example have a 1x1 repeating group that loads a list, then when the popup opens the list is already downloaded.

ed727 · 2020-09-03T23:38:44.777Z

Thank you - I will take a look. I tried to load some info from the popup into the main page (because Bubble says it will build invisible elements if info from them is needed in a visible element), but didn’t make a difference. I have a lot going on within that popup though.

I was hoping there was something in Bubble that would kick off the loading of the invisible element in the background – but realistically I figured that gets into plugin land. So it’s likely either that, or go back and try to simplify and streamline the popup as much as possible.

ed727 · 2020-09-12T03:29:34.463Z

Figured out a partial solution for future reference for anyone who comes accross this…

Before the popup appears, it tries to preload everything that’s visible in the popup, so that the popup appears fully formed. So the user has to wait a few seconds while the popup builds.

Solution was to hide any elements in the popup that are causing the delay, and in the workflow that opens the popup, to also have it make those elements visible. I had to add in a slight pause (.1 of a second worked) between the workflow step opening the popup and the step making the element(s) visible.

Now it works well – the popup opens immediately and during the “delay” of a few seconds the popup is rapidly filling with content, so it gives the impression of things happening, rather than a confusing pause. This is only for the first time the popup is shown – subsequent times it opens fully formed since it’s already been built.

casheets123 · 2020-09-12T04:12:38.780Z

Sounds like you found a great solution. Just mentioning that you can populate states on load as well in case you have a list or not a crazy amount of different data types.

Works great for forms etc. as well.
E.g If you’re pulling a bunch of data based on answers, you can put the data into states As you go, instead of doing one big search at the end when saving to db.

ed727 · 2020-09-12T12:20:08.500Z

Thank you for the tip! My popup is using custom states to populate a bunch of subject options, but I will keep this tip back of mind if I’m running into slowness around data searching/writing.

sudsy · 2020-09-12T14:01:16.889Z

ed727:

it gives the impression of things happening, rather than a confusing pause.

Sounds like you’ve got a solution that you’re satisfied with. Another common technique is a simple loading indicator - perhaps even animated. Depending on the nature of the background task(s), a progress indicator might even be possible. (BTW, repeating groups have an is loading property that can come in handy at times to indicate status.)

-Steve

Premium Bubble Plug-Ins

ed727 · 2020-09-12T17:29:48.293Z

Thanks Steve. Initially I was looking to go that route, but I wasn’t able to find a method for having a loading indicator appear properly between the time a user hits a button to open a popup, and when the popup actually opens…

Loading animations / progress bars App Organization

Hi, I am looking for some good resources for best practices / processes for loading animations (spinners, progress bars, etc.) to let the user know to be patient, something is loading. I’m stumped on these: Popup: if a popup is slow to load because it’s complex. What Bubble does: the page darkens while the popup is building itself. Then the popup appears fully formed (note this differs from a regular group, which will appear partially built and finish building in front of you). Loading ani…

SJL · 2021-05-26T03:12:50.582Z

I’ve found a somehwat primitive, yet workable solution to this.

Add a workflow on page load to show your popup, add a pause for 1ms then hide the popup.

At most, users will get a little flash or dimming as the page is being loaded - no worse than the initial page load delay, and definitely better than the issues that can arrise with delayed loading of popups with complex data

ed727 · 2021-05-26T12:58:13.205Z

Thanks @SJL. Will try it out!

benlenzo · 2023-08-19T05:03:14.846Z

Bump here.

What is the PU is called from an RG?

So, depending on what index in the RG the user selects it will display different data, so you can’t ‘pre-load’ can you?

In my instance, I have the issue where the previous PU data shows for a split second before the new data kicks in, or half the data when I use a reset PU in my close PU workflow. But even then, I can’t guarantee someone will use the close icon vs just clicking away…

ed727 · 2023-08-19T14:40:47.058Z

That’s a different issue. I can’t recall how I handled that, or if I just lived with it it, but there are probably some good threads on that issue.