Reusable Elements load on page load even when hidden, but I can’t figure out why.
I have many REs with REs inside of those REs. So nested reusable elements are causing the app to crash on page load…since they all load even though they are hidden.
I thought hiding and collapsing would prevent REs load on page load. Wrong!
If there’s a dynamic expression referencing a hidden RE it will still load. But there seems to be another reason that I need help figuring out.
Does anyone know why reusables would load on page load even when hidden?
First to make sure everyone understand the known reason for loading when hidden:
From Bubble Support:
UNLESS there is a dynamic expression somewhere that references a hidden reusable element, as then the source of this element would still need to be loaded to be referenced.
To test this, I created a brand new test page and looked at what was loading.
- An empty page loads 66 elements on the page.
- A page with only one hidden & collapsed group, also loads 66 elements on the page
- If I place one of my Reusable Element in that hidden group it loads 84 elements
This confirms it’s loading on page load even when hidden.
Since this is a new test page, the page level has no dynamic expression referencing this RE.
This must mean that if any element INSIDE of this hidden RE references the RE in a dynamic expression then it will load on page load.
So I went to the RE and edited to make sure there was no dynamic expression on the RE element level. It still loads these elements on page load! WHAT?!
You can see here that I’m editing the RE called icon_menu_building. There’s no workflows or other elements referencing this RE…aka no dynamic expressions.
However, the arrow is pointing to a reusable element that is inside of this reusable element.
So we can check the RE “BH Add Edit Popup Job” to see if there’s any dynamic expression referencing this RE on the “icon_menu_building” RE level.
You can see here that there’s no dynamic expression referencing this nested reusable element on this parent reusable element.
That must mean that if there’s anything referencing a reusable element inside of a reusable element that’s inside another resable element it would load on page load.
I tested this with a brand new RE, with a RE inside and setup many different dynamic references to the nested RE. It did not load on page load. So the above theory is not true. I even tested by placing circular logic inside of this test RE to see if that was it…nope. I could not get the test RE to load on page load.
Why are my real REs loading on page load?