Editor is Too Slow When Using Many Elements – How to Improve Performance?

ihsanzainal84 · 2025-04-09T23:51:58.391Z

I just treat reusables as functions and methods in code. Which is good practice.

mitchbaylis · 2025-04-10T01:58:24.987Z

one really important thing about reuseables and hidden elements is that bubble always loads the data on page load - even when they are hidden.

it doesn’t render into the DOM if it is hidden - but it still performs a data search or returns the data mapped into the reuseable

ie
search for contact:first item
or
contacts > detail

when it is revealed it renders in the DOM
if it is hidden again it isn’t removed from the DOM it is just hidden

this is different to searches for lists work - these only ever run when the element containing the search is visible

ie a hidden repeating group will not search for the data list until visible

note that search for:first item - always runs even if the element is hidden

this is important because if you have lots of reuseables on a page and they can all fetch their data even if hidden and the page load can become very slow and heavy - this is a major consideration for SPAs

an easy fix for this is to show/hide the reuseables like normal and then use a conditional to only fetch the data when visible

it’s not an extra step you need to worry about for normal web apps - but if you have an SPA then it can become important depending on how you are populating data in hidden reuseables/groups

emir.ozgun · 2025-04-10T02:28:51.488Z

İs this true though, I was one of the people who flagged this but right now I don’t know. Maybe it was due to bubble built-in plugins counting as DOM if it is nested inside although it is invisible

boston85719 · 2025-04-10T04:20:23.663Z

ed19:

I’ve heard people mention wrapping things in reusables previously, hadn’t thought to do entire pages

Been around 5 years I’ve been using reusables as entire ‘pages/views’ especially for dashboards or SPA, and entire feature sets as well as I discovered it was the answer to the editor issues.

ed19:

I’m hoping I can just use the convert to reusable function to quite quickly switch this up in my editor.

convert to reusable function is missing lots and lots of critical features, so sadly this feature is another example of Bubble pushing out unrealized features and never bothering to update them to match expectations/needs. So, an entire page is still not able to be converted. Any elements that can be converted (ie: anything inside a container) that has related custom workflows or conditional workflows or references to other elements outside of the container (ie: popups/floating groups/group focus) will not get converted into the reusable.

The time it takes to convert things is unnecessarily longer and more tedious than necessary due to the lack of functionality from the convert to reusable feature…and with the issue checker not working properly all the time, the task is a large enough undertaking that you should prepare yourself for a lot of work.

boston85719 · 2025-04-10T04:24:17.476Z

randomanon:

I use reusables for popups

Don’t…reusables should for the most part only ever be a group, and the reason being is flexibility…you can not put a reusable element that is a popup or a floating group inside of any other type of container, but a group you can, meaning your reusable element that is a group can be put into a popup or floating group or group focus on the page, and can also obviously just be placed onto the page as a group.

If you have any questions about how to use reusables, feel free to reach out. I remember having to help all the other bubble instructors understand how to use them years back as it was a new way of building most had yet to discover how to do so optimally.

emir.ozgun:

For SPA builders, NEVER EVER DO THİS

Sorry mate, but using reusables for an SPA as the ‘pages/views’ is ESSENTIAL

code-escapee:

where I use a container to hold the reusable element. I think I do so because I find it easier to display the reusable thru the container as well as set properties and initialize the reusable.

This is the correct approach

emir.ozgun:

Communication between and from reusables are really bad thats the main reason, you can mess the url structure but that is a trade off

Communication between reusables and pages and everything else in the app is just fine when you know what to do to make it work correctly. Properties is one way, and they can be passed down from one reusable to another. Custom states is another way, URL pathlist and parameters is another way, and use of some javascript in toolbox is another way. Personally, I am doing things in such a way that I have completely unrelated reusable elements communicating with each other.

J805:

Hide everything by default, then show based off of a url parameter so the user can refresh and not lose his place.

Every container that holds a reusable element that is a ‘page/view’ should have ‘show on page load’ as no, then a data source being an option value that is the name of the ‘page/view’ and then a condition for when the URL parameter (set as an option value) is ‘this groups option’ is visible…makes setting up the page and all containers super quick and easy as copy/paste and then just change the container data source option. Also, option displays should be lowercase to be more compatible with URL.

mitchbaylis:

hidden elements is that bubble always loads the data on page load - even when they are hidden.

This is not true as of today or yesterday I believe, or at least some plugins no longer do this. I’ve been using listshifter for a long time, and today noticed a new behavior, that even though my datasource is filled in and the the element is not visible, the exposed value of the list is not available until the entire reusable element is visible…but repeating groups are still exposing their list value even when not visible. I think it is a bug or maybe incompatability of a no longer maintained plugin.

feyifireamen · 2025-04-10T04:40:08.238Z

reusable it is

ihsanzainal84 · 2025-04-10T04:50:45.154Z

Not sure about how native element data sources work now (haven’t really noticed a difference myself), but Keith wrote ListShifter to not load the actual data source until you run any of the ListShifter’s actions and events involving that data source.

boston85719 · 2025-04-10T05:34:07.253Z

ihsanzainal84:

ListShifter to not load the actual data source until you run any of the ListShifter’s actions and events involving that data source

It has always been the case that the ‘list to shift’ exposed state is populated with the value from the list shifter element data source regardless of if an element is visible or not

Screen Shot 2025-04-10 at 12.28.17 PM342×498 32.8 KB

But, I could be mistaken and over the past 5 or so years it has not actually been doing that…in my experience these values below would have been available as the ‘list to shift’ exposed state if the element was visible or not

Screen Shot 2025-04-10 at 12.29.56 PM1901×305 59 KB

Screen Shot 2025-04-10 at 12.29.18 PM348×131 7.38 KB

Screen Shot 2025-04-10 at 12.29.11 PM330×177 6.74 KB

I think perhaps, what might be happening is the plugin element is not getting initialized because it is not visible and so because it is not initialized the exposed state value of ‘list to shift’ is no longer available despite the fact the ‘list to shift’(ie: datasource) is available as seen in the debugger.

The reason I believe this is a change is that a previously working function that relied on the exposed state of ‘list to shift’ to have the values available no longer functions and I needed to rebuild it just now.

mitchbaylis · 2025-04-10T05:39:47.914Z

I tested it just before posting using the console to ensure it was still the way bubble handles it and it is

not sure about listshifter as I stopped using it once I figured out the workarounds with native bubble

boston85719 · 2025-04-10T05:47:54.586Z

mitchbaylis:

I tested it just before posting using the console to ensure it was still the way bubble handles it and it is

boston85719:

but repeating groups are still exposing their list value even when not visible. I think it is a bug or maybe incompatability of a no longer maintained plugin.

yes, from my testing that is true

ihsanzainal84 · 2025-04-10T06:49:35.979Z

Once you access the value using the debugger the data gets loaded. @keith had a post in regards to when ListShifter loads a value.

Also when you write a plugin you can pretty much predict when the data first loads. I say predict and not define because of how other native factors can force data to load.

randomanon · 2025-04-10T11:00:35.221Z

This is starting to remind me of the “microservices vs. monolith” debate.

boston85719:

Don’t…reusables should for the most part only ever be a group, and the reason being is flexibility…you can not put a reusable element that is a popup

I mean functionally.

code-escapee:

@randomanon I’ve noticed that I prefer a hybrid approach, where I use a container to hold the reusable element. I think I do so because I find it easier to display the reusable thru the container as well as set properties and initialize the reusable. I’m not sure if it’s actually best to do this but I wonder on your thoughts on this kind of setup?

The nice thing about that is that you can link the property to the container’s data type and have a dynamically updated passthrough instead of having to set a custom state.

mitchbaylis:

not sure about listshifter as I stopped using it once I figured out the workarounds with native bubble

Would love to hear more about this.

ed19 · 2025-04-10T11:21:56.223Z

Thanks @boston85719 will bear in mind. Luckily the pages I mentioned were actually groups within a SPA.

Have had about 100 errors per page so far, but they’ve all been easy enough to resolve. That said, I’m certain I will hit some delightful speed bumps somewhere along the line, so am keeping an eye on this thread for tips!

boston85719 · 2025-04-10T11:45:17.428Z

ed19:

I will hit some delightful speed bumps somewhere along the line, so am keeping an eye on this thread for tips!

After first convert action is complete, check with original location in the app editor any custom event triggers or conditional triggers that exist and may be involved with the elements converted into the reusable. Any custom states that need to be rebuilt as they are on elements not part of the conversion, ensure all custom state names are copied and pasted in, do not attempt to just retype them, as this will make it easier for Bubble to remap them for the most part. Before conversion, remove any folders from the workflows as those usually don’t get copied over. Copy and paste with workflows all ‘on page elements’ (like popups, floating groups) that are not part of the original conversion, and then once you’ve done all of that, begin to use the issue checker to just systematically go through each one.

As you move through issues within expressions, you’ll notice bubble often leaves a lot of information there to understand easily how to remap it, as that helps to cut down time referencing the original location within the app editor.

Those are majority of issues that will crop up.

ed19 · 2025-04-10T12:38:23.090Z

Yep already done most of this! I’ve done a fair bit of work moving pages around so am relatively well informed with regards to remapping functions. The main complication I’m having is page-level states or workflows needing to be shifted across, hopefully the end justifies the means.

emir.ozgun · 2025-04-10T12:44:35.121Z

boston85719:

Sorry mate, but using reusables for an SPA as the ‘pages/views’ is ESSENTIAL

No it is not, best practice is to have maximum flexibility with minimum overhead, who put the idea of reusables as pages idea but it is straight out wrong.

boston85719:

Don’t…reusables should for the most part only ever be a group, and the reason being is flexibility

It can be very well used as a popup, who says these things ?. I believe there is a place the same place that daisy chain filtering idea came up.

Think about it, idea of page as reusables was there when a reusable has had only 1 property

georgecollier · 2025-04-10T12:55:47.497Z

boston85719:

Also, option displays should be lowercase to be more compatible with URL.

Option set displays with spaces / regardless of capitlisation work when using Get an option from page URL

emir.ozgun:

best practice is to have maximum flexibility with minimum overhead

emir.ozgun:

reusables as pages idea is straight out wrong

CleanShot 2025-04-10 at 13.55.22@2x961×1310 64.5 KB

emir.ozgun · 2025-04-10T13:11:28.335Z

I have pages as reusables, I have pages that are not reusables but content is all reusables. Just these things are limiters not ideas. Similarly I have popup as a reusable as well as group reusable inside a popup

randomanon · 2025-04-10T13:50:46.706Z

georgecollier:

CleanShot 2025-04-10 at 13.55.22@2x961×1310 64.5 KB

CleanShot 2025-04-10 at 13.55.22@2x961×1310 64.5 KB

I raise you

image603×340 78.8 KB

boston85719 · 2025-04-10T16:30:25.907Z

It is not about modularity for me. I use the reusables as ‘pages/views’ for SPA or pages like a dashboard for the main purpose of limiting editor slow down. I use reusables for modularity when I create features or functions as groups and plan to use them in more than one area of the app, or just prefer the ease of maintenance by the stand alone feature being just a reusable and surrounded by no clutter from other features/element functions.

georgecollier:

Option set displays with spaces / regardless of capitlisation work when using Get an option from page URL

That is true, and I will be lazy in my response and just paste in what AI says when asked (side note, this would be the exact way I personally would have explained it and I do not know if the AI just decided to learn me well enough to produce a response I agree with )

Screen Shot 2025-04-10 at 11.17.02 PM888×805 75.7 KB

emir.ozgun:

No it is not, best practice is to have maximum flexibility with minimum overhead, who put the idea of reusables as pages idea but it is straight out wrong.

I think you misunderstand the concept of reusables as pages. The concept is for an SPA, which is a Single Page Application, that when you change the URL to essentially ‘navigate’ the user, and so need to change the view or page the user sees based on the URL and the expectation of navigating to a new page, that is built out as a reusable element.

In terms of who put the idea of reusables as pages in this way, I can not say for sure who was the first, but you can maybe blame me for it. The main reason for it, and why I tested it myself as a theory to reduce the amount of times my editor crashed some 5 years ago, and when finding out it solved the issue of an editor crashing, I began advising people to use the method in order to avoid editor crashes when building SPAs or pages like dashboards or just large complex pages with functions or features that could be decoupled easily.

emir.ozgun:

It can be very well used as a popup, who says these things ?

I do…the logic stands. There is no reason to create a reusable element that is just a popup if you plan on using it in more than one place. The reason I make this statement is from my years of experience struggling with decisions made earlier in a build when it comes to a later point in the build and there needs to be a change made. It also just allows for more flexibility in how you can use a reusable because if you create a reusable that is a popup or a floating group, then as I explained previously, you can only in the app ever use them as a popup or a floating group. However, if it is reusable as a group, that reusable can be used as every single type of container in the editor, so a Group, Popup, Group Focus, Floating Group, in a Repeating Group…so, I don’t know about you, but the flexibility of how to use it in potentially 5 different container types compared to being locked into just one container type means for me, I would prefer for the most part to just always create a reusable as a group.

emir.ozgun:

I believe there is a place the same place that daisy chain filtering idea came up.

It absolutely is not

emir.ozgun:

I have pages as reusables, I have pages that are not reusables but content is all reusables

Yes of course. This is what we have been speaking about…it is not possible to have a reusable that is a page, so this sounds like you are doing what is advised.

emir.ozgun:

I have popup as a reusable as well as group reusable inside a popup

yes, and my advice is that as I’ve described to have a group reusable inside a popup on the page for the flexibility of how to use it