How to speed up dynamic data loading on screen?

Hi all, I have an issue where I’m loading a users school name on the page in multiple places on page. This is all good and well, however, on page load, the school name isn’t there for about 500ms and then it suddenly shows. I’m not doing anything fancy, just showing the “Current Users School name”. I’m pretty sure this brief no-show is bubble fetching the data from my DB, then once it has it, shows it.

Does anyone know how I can speed this up, or pass this data more accurately? I’ve tried adding spinning loaders to the page which I then hide after a second or so, which fixes it but seems a bit hacky. Is there a simpler solution?

Thanks in advance for any help.

Try fetching the data first somewhere behind the scenes, then when it’s needed, reference that data.

I use a state on page load to grab initial data then use filtering, searching, etc., afterwards.

1 Like

Also when you try @GH5T’s suggestion make sure to fetch at least one field of the thing, the thing itself might not be enough to load the data ahead of time.

Like
Current User's School - will only retrieve the unique ID ahead of time
Current User's School's Name - will force Bubble to get all field data ahead of time

1 Like

Thanks for your reply @GH5T and @tylerboodman - That’s the issue I have, I need the data right away and even when I use state, there’s still a moment where the static assets (header, footer, navigation, static text) are loaded straight away, while the dynamic data loads half a second later.

I don’t know if I’m missing something but retrieving data either by using “Current Users School name” or by using state of the same condition, equals the same load time. Or should I instead still use the page loader animation (which I don’t really want to do), wait for the data to be loaded via state, then hide my loader animation? Thanks again for the reply.

Don’t do this, full page loaders in Bubble apps are a pet peeve for me…

Instead, use a skeleton loader e.g a grey rectangle that’s visible by default and not visible when Current User’s school’s name is not empty.

Should be nice.

Keep in mind data load time is proportional to the distance from the User. Current User’s School’s name loads quicker than Current User’s Employer’s School’s name (as we find the name through two lookups of Employer → School) rather than just one.

To that end, if it’s particularly important, you could have a school name field on the User and reference Current User’s schoolName. Keep it in sync with a DB trigger:

When School how’s name is not School before changes name, make changes to list of users (do a search for Users where School = School now).

And another:

When User now’s School is not User before change’s School, make changes to User now and set schoolName to User now’s School’s name.

@georgecollier - thanks a lot! I initially was using a skeleton but I must have messed up my conditional because it wasn’t showing. I’ve tried again, and it’s working! That looks a whole lot better - thanks again.

One last question, do conditionals use WU?

Anything that references DB data will use WU

Current User’s School’s name will use 0.015 WU for one ‘thing’ returned from database (the school). The Current User is loaded on every page load so won’t be charged twice. It shouldn’t use 0.3 WU for a search because it’s a lookup rather than search.

1 Like

Thanks for the clarification!