I am wondering if anyone has any insight on how Bubble optimizes its memory usage and performance based on the design of the page. To be more specific, I have a page that is built using about a dozen or so reusable elements. Nine of the resuable elements have a call to action button that prompts the user to sign up (a/k/a show a signup popup). But, since these reusable elements can’t all see the same popup, I need to add the popup to each of the nine reusuable elements that can call it. To make matters worse, since it is a signup popup, it needs some sister popups for signin, privacy policy and terms. So instead of 4 popups at the page level, this page has 9 reusable elements that have 4 popups each. So 36 popups instead of 4. The popups are reusuable, so I only had to code each once, but I’m wondering if all of these will be loaded individually, thus slowing down the application. Any insight would be appreciated. Thanks!
You could have the popups in the parent page and then call the popup from reusable elements using URL parameters. So the RE will use the go to page current page and send a parameter (eg. popup: true). When the popup closes, do the same thing but empty the value of the parameter.
Def shouldnt use sub reusables (theres been some recent developments on that being a performance issue if you check around this forum).
An alternative to @ihsanzainal84 is to have each reusable have a state “next action” and then on the page have triggers to close the reusable and open the next step reusable.
Also seems like there may be an opportunity to meege some reusables considering the number you have on one page for sequence type actions…
Why do you need this popup to be placed anywhere except for the Header? You place the popup into your header (which is likely a reusable) and put the header onto the page. On the header you have a custom workflow that when triggered will show the signup popup.
For the most part you only need the login/signup popup in the header or perhaps the footer as well, because for the most part the call to action to signup or login is from the header and sometimes the footer.
If you have a need for other reusable elements to have buttons or actions that would necessitate the user to signup/login then you can do either as @ihsanzainal84 stated of using URL parameter, or @code-escapee suggested of using custom states.
On the page itself where all the reusable elements are, you would just need to have a trigger that either references the URL or custom state value of each reusable (only those that actually have a buttons or actions that require signup/login). For URLs you just use the conditional trigger and set to every time and condition is looking using the Get data from URL to check against the specified url parameter value. If it were me, and I actually needed 9 separate reusable elements to show the signup/login, I would use the URL approach as it would require less work overall.
It does not.
For privacy and terms you should have a page in your app for each. One for Privacy and one for terms, appropriately named as privacy and terms. The reason you should have this, is that it is a requirement whenever your app matures to the point of using Google login, or connecting into any 3rd party APIs that require account access, like Google Calendar, as those 3rd party systems often require you to add the URL of your privacy and terms, so that those 3rd party systems can display the link to them when prompting users to grant access to their private data from the 3rd party systems to your Bubble app.
Additionally, you should have these items as pages and not popups so that in your own login/signup popup you simply have a link to those pages that is displayed in the signup or login portion. Like in the below screen shot
Also, your login/signup functions should be on a single popup and not stretched across 2. Reason being is it is easier to maintain the app that way, as well as it leads to a better UX.
On the single popup reusable place a custom state called ‘mode’…you can either do what the default Bubble login/signup does and use text, or convert to the better approach of using option sets.
Then on the single reusable for signup/login and forgot password, you will use conditions on the groups that contain the relevant inputs to be visible or not based on the custom state value.
Make sure none are visible on page load and only use a condition to make the element visible when the mode is the appropriate mode for the specific container group (ie: container for signup is only visible when mode is signup).
Put onto those different elements the elements for user to click to change modes.
Follow this same approach for forgot password as well
Use custom triggers on the signup/login popup for all of the different changes in state, so that, on any page or reusable element that has the signup/login popup you can trigger custom trigger from a reusable (ie: the change modes from the login/signup popup).
They likely do.
Thanks to all for your excellent suggestions. As I likley suspected, having many sub reusables creates not only a mess, but does take up a lot of memory. Here are some thoughts on the suggestions, and an interesting plugin that solved some of my issues.
-
I thought about having a single popup for signup/signin, and probably will do this at some point.
-
for the privacy policy and terms, I didn’t want to navigate the user away from the signup page, because then they have to take action again to reopen the page. So, when accessing those policies from the signup page, I just open another popup and then when closed, they are back at the signup popup.
-
I found a simple plugin from Zeroqode called “Satellite” that allows you to set up a transmitter and receiver to transfer data or trigger workflows in any resulable element or page from any other reusable element, which solved my problem perfectly. So, to solve my problem above, I placed the four plugins at the page level, and all of my signup buttons, which exist in various reusuable elements, can trigger them with a simple workflow attached to the button residing in the reusable element.
Thanks all!
Use the link element and check the box to make the link open in a new tab by default.
That is a lot to get some functionality that can be achieved via native Bubble and best practices.
But overall, good job on finding a solution to your situation. As you progress in your learning and become a more proficient Bubble developer, I imagine you will revisit this and make some changes.
+1 what @boston85719 said with a emphasis on attempting to use native bubble if possible.
A special warning regarding this 
as it is very likely to be causing you “UNsimple” issues (if not now then down the road).