Monitoring when the new table element is fully loaded?

Hello bubblers,

How would you monitor when the table element is fully loaded? I’ve tried to do it with “when page is fully loaded” etc, but it does not work and as the table takes a long time to load (sometimes more than 5 seconds while freezing the screen), it always confuses users.

I suggested bubble to create a loading state “isLoading” just like we have for RGs. But as they are now focused in improving the editor, I doubt that this is a priority and I would love to find a solution in the meantime

Many thanks in advance

Victor

1 Like

Commenting just to give this a bump as I’ve been trying to figure this out for my own app on a repeating group element. Right now I have a conditional that is based on if the RG is empty or not, which empty hides the RG and shows a ‘loading’ icon. The problem is when the RG is TRULY empty (no results), the loading icon shows up which isn’t correct for that instance. Would love to hear if anyone has a good solution.

Pretty sure that you could achieve this for both Tables & RGs with @keith List Shifter plugin (now called Floppy). Floppy: localStorage, List Shifter Plugin | Bubble

@detrazvictor @msgiblin Have you tried the “Page is loaded (above fold)”? Or the (entire) version of that. That should include when all data is fetched

1 Like

Wow! Admittedly I’d never seen that before! For my purposes it does seem to do the trick, I’ll do a bit more playing around.

1 Like

Yep it’s good for triggering those PDF generator plugins that capture the screen since they won’t wait for all data to be loaded usually. And apps like Spotify/TIDAL where the whole screen is fake blank elements then everything pops in loaded at once.

1 Like

Yes, I did try to use Keith’s list shifter plugin as I know lists have a loading state that work great. But the list is loaded before the table element, so the loading icon appears, disappears, but then the table element is still loading for a good 5 secs.

And using the native “page is fully loaded/page above is loded above fold” actions does not work either.

I’ve used a text element that displays yes/no when the page is loaded; and it shows yes long before the table has finished loading

These solutions work for RGs, but unfortunately not for the table element. I think I would need a code snippet to monitor the table element by ID. I’ve asked chatGPT to create a code for me but it does not work…

Above the fold will also not work for all RG (and i would assume tables) use cases because while the data and the cells do load, complex cells that use conditionals or refer to other bits of data will take a while to validate.

I tried putting dummy data in place but it was pointless since the actual data already loads very fast.

The best solution I’ve come up with is to have a custom script that will have to look for when the all the required DOM elements generate and then run a “completed” function (I’m using JavaScript to Bubble). I’m in the process of writing one myself with the help of ChatGPT.

Thanks, that’s great to have your confirmation.

Could you please share your JS to bubble script ? That’d make a big difference in my app’s UX, for the better

bumping for interest

This topic was automatically closed after 70 days. New replies are no longer allowed.