Hi, I understand repeating groups don’t load their data while they’re hidden for performance purposes. Does anyone know of a way around this? For instance, I have a repeating group for a menu, in a floating group. When the floating group first appears there’s the second or two delay while the repeating group loads. It’d be nice to have that done on page load so the data has loaded by the time a user opens the menu.
Where’s it getting the data from? If it’s taking 1-2 seconds to load a list of menu options, that smells fishy.
Just a standard Do a search for. 1-2 seconds is probably an exaggeration, it’s less than a second, just the standard momentarily loading time all repeating groups have.
Oh, ok, I gotcha. Why are you using a repeating group?
I’ve added a floating group with a spinning circle animation until the page is done loading. This worked for me.
1 Like
@andrewgassen I’ve got a fairly large heirarchy of menu headings and subheadings that are already mapped to Things, just cuts down on development time significantly if I can use repeating groups rather than hardcoding each option and mapping it to its corresponding Thing.
@mvandrei The problem is the floating groups aren’t visible until the user’s interacted with the page (like clicking a button), so their data wouldn’t be loaded before you hide your spinner anyway… I suppose I could programmatically open then close the floating groups while covering everything with a spinner, but that’s pretty non ideal
I mean… you could set it for the entire page, and it will disappear after all the dynamic content has been loaded.
That’s just the problem though, the dynamic content doesn’t load because the floating groups are hidden initially
Hi,
One solution would be probably:
- don’t hide the element (this element is visible on page load YES instead of NO)
- go to workflows
- create (if you don’t have yet) When Page is loaded event
- add to it action: Hide - your element (repeating group in this case)
Like that your menu/whatever will load, show for a moment and then disappear.
If you think it’s really annoying your users - you can try another approach, even easier maybe:
- to your button, page, whatever you want add a new State (eg. “mylist”) and make it type of content you want to show in your group; make it a List
- as the source of your repeating group set the above state, eg. “Button menu’s mylist”
- to When Page is loaded event add the action: Set state (“mylist”) - and here do the Search for your items
Any of these should solve the problem.
3 Likes
I ended up making the element invisible (setting it’s CSS visibility to hidden) using a bit of javascript, so it’s still loaded by Bubble but is invisible to the user, then making it visible once loaded.
OK thanks both!
If anyone’s wondering, the way I ended up doing it in a bit more detail is, with a focus group and repeating group both set to hidden on page load:
Page is loaded:
- Show focus group
Do when focus group is visible:
- Show repeating group
- Make repeating group invisible (with javascript, see below)
- Hide focus group
- Set custom state “loaded” of focus group to “yes”
Do when focus group’s “loaded” is “yes”:
- Make repeating group visible (with javascript)
This worked without elements momentarily appearing.
The javascript to make an element invisible is:
$("#myelement").css("visibility", "hidden");
and to make it visible is:
$("#myelement").css("visibility", "");
Replacing #myelement with the ID of your element.
10 Likes
Where did you put the JS? On the page or in the Settings --> Seo & meta?
1 Like
No, you have to trigger it from a workflow using the Toolbox Plugin.
1 Like
Thanks
This topic was automatically closed after 70 days. New replies are no longer allowed.