I have reusable elements I’m using for pages on a one-page app. While the reusable element is loading each part of itself, I would like it to wait until each part is loaded until it shows the group. I really like on other apps when it is loading a page, there seems to be an identical looking group with parts greyed out until the entire group is loaded, then everything pops up at once.
For example, when you go to someone’s profile page on ny app, it is loading their profile photo, some numbers, name and a bit more info. But it loads each element by itself as soon as it’s loaded, which makes parts of the page pop up at different times. So sometimes the photo will load at a different time than the other numbers and I think it could look more professional.
What process and workflow would you build to mimic a loading page similar to the example photo I’ve shown and then show the actual page after all data is loaded and ready to display?
I know how to use the workflow “is loading…” but can that apply to everything inside of a reusable element or group?
Also… for the greyed out group that mimics the styling of the actual group, should that be an image or just a group stylized the same as the actual one I want to display? Sorry… my industry language is lacking.
Maybe there are two reusable elements? They both have the same formatting where one just has greyed out fake blocks everywhere and there is the actual one. When the actual one “is loading” the greyed out one is visible?
Dude this is dope and you nailed it! Thanks for clarifying the language as I didn’t know the term. Now I’ve just got to figure out if I can ask Bubble if all the info in a group “is loaded” or if that is just for repeating groups.
I’m not the best one to answer this as, to be honest, the timing of JavaScript state changes and data read/writes often drives me crazy. But in the event anything I have is helpful here goes.
As you mention the “greyed out” sections are often images that are being shown in place of your data. But you could also conditionally set background colors to grey and achieve the same effect, but this only works if outside of a Repeating Group since in an RG no rows display if data hasn’t loaded. So the question is how to switch these images/groups visibility on/off.
The first thing I would try is setting a state that defaults to let’s say “loading = yes” on page load. Then make your images visible only if loading = yes.
Next if you have a workflow that sets your data state values, set the loading state to “no” as your last action.
Alternately if you have your fields of data directly linked to database values (things) you can test one of the values as a condition for setting “loading = no.” For instance an event with When “This Page’s User’s UserID <> 0” can’t execute and return a result until it has retrieved the data. So setting state “loading = no” as an action for this event will only happen after you have data (although a slow browser may still be loading elements graphically.)
Finally you can use the last resort of most devs on here, and that is just setting a delay. Create an event that occurs after, say 2 seconds and use this to set the loading state to “no.” This has obvious upsides of both consistency and simplicity, but downsides of an unavoidably delayed user experience and the possibility that even after the wait the load still hasn’t completed.
Personally I use loading states and show loading animations inside of a semi-transparent pop-up.
