Forum Documentation Showcase Pricing Learn more

Show loader while RG Data is loaded

HI there,

Still on hobby plan I am getting further and further in getting to know Bubble to create a slick responsive webapp.

I notice that when opening a page it takes a couple of seconds before the data in the RG is present. A couple of questions. I only have two records of data.

  1. On Paid plans like personal or professional, when having more server capacitiy, will the loading of RG’s be more direct?
  2. For now I want to add a loader that hides when the RG’s data is fully visible. I tried a floating group that will be hidden when page is loaded, but than still you see for a second that data in the RG is not present. So how should I do this?

Thanks in advance

Hi FJP,

  1. I added server capacity and loading of RGs becomes faster then. Also in recent months bubble has done a lot to improve performance, which I noticed in loading times too, so I am confident this will get even better over time too. How many records do you have? Do you use do a search for and :filtered and advanced filter, (this takes time) or search autocorrect (does not work as well with 1000s of records)? Try to reduce nr of filterings
  2. For example you can have a group/shape or loading icon by or in front of your RG, which is only visible on page load when RG loading is yes. (or only hidden when RG loading is no)
    2019-09-11%2012_51_01-Todolisttool%20_%20Bubble%20Editor
  3. Be sure to right click that element and use bring to front, so it is front of the RG.

hope this helps,
happy bubbling,
Julius

For free tips and step by step lists on bubble.is, travel, cooking & more check https://tiplister.com/

1 Like

Thanks. I only have 2 records. I have a header outside the repeating group. That one is direct visible, couple of seconds after that the rg content shows. I will try out the RG is loading condition!

Thanks

@TipLister

I tried the RG is Loading condition, but I can’t get it right. As an example I first want to show the (external) table header when the RG is fully loaded. The Header is set invisible on page load en when “RG is loading is no” the header is visible. For some reason this results is flickering behaviour. Please look the example below:

com-video-to-gif

When I place a loader (shape/group/floating group) above the RG and the header, than the header is visible for a blink of an eye.

FYI: The RG and Table Header are part of a reusable element. I tried to put a loader into this reusable element and try to put it directly on the page. Without success. I also tried something with a custom state (loading yes/no) on the reusable element. Same behaviour persists.

Anything I can do about this?

Try this, it works about 99% of time:

You can skip beginning of thread about mutation observers, basically you need to count how many times “RP Group is loading is no”, and only show the group when that count is 2. RP Group is loaded in two “slugs”, that’s why you’re getting the flickering, your condition is being satisfied twice for one full “load”.

I say 99% because occasionally, Bubble misses one of the RG loading “flags”, ie, RPG is loading is yes (or no). But probably reliable enough to get you moving forward.

Hi FJP,

indeed i get that same glitch but with bubble there is always a way.
What I did to get around it:

  1. Have a shape visible on page load, in front of the RG and header. The RG is also visible on page load but in the background.
  2. Add a new workflow: Do when condition is true: When RG is loading is no: hide shape
  3. For the header, have it be invisible on page load and only visible if Shape is not visible.

Otherwise you can go to your editor, settings, general, and make your editor link non private and send me that via pm for me to have a look at if you want.

regards,
TipLister