How to stop random elements from appearing in random places on screen while loading

I have tried everything I can to prevent this login button from being visible until the variable its visibility is tied to is set, but no mater what I do, it always appears on the screen when you go to this link. Has anyone else had this problem? Is it better to make some blank screen the initial page for a web app, and have show a loader, then forward to another page?

So you are talking about the flash of the button before the page fully loads?

How about making the visibility more complex, roughly like this? The goal being that if the variable is empty then it doesn´t display.


1 Like

I will try this. That is genius. Has this worked for you? And would this go in the visibility formula? Yes, I am talking about the flash. I changed it to show spinner on page load, but now a flash of a large frozen spinner shows on page load, then becomes a normal spinner. there must be some way to prevent such a flash.

I am doing something similar in a few cases but not exactly this. The screen load / build order seems to be really difficult to control. I have a number of delays on various components so they don´t appear out of order. One of the worst issues for me is that the page starts loading before some variables have been read from firebase and then updates with a similar sort of flash.

I don’t understand this formula. The visibility is set to NOT(pageVars.isLoading). My page var isLoading is meant to show a lottie animation for a second until the app determines if user is logged in, at which time I set the isLoading to false and the login form shows or the app forwards to the home page. So, what would be the best way to check if the variable isLoading is empty before setting the visibility to false if isLoading is set to true?

I have just been getting frustrated with some page loading inconsistency too. I had app variable that were not displaying immediately on the page. In the end I added a 150ms delay and all seems to be ok now. I might make it a default for my app.

it seems like it may be better to just make an empty page with a loading indicator the initial page, similar to how facebook shows the facebook logo and the dots while it configures itself. but i guess even then, with appgyver it would be necessary to set some delay before even showing the loader. one thing is for sure, the random flashes of unstyled content is not an option

I dont know if im out of topic, but using the same idea as @Phil_Evans , (playing with visibility), i have this set up, where, if you notice, for as long as the context is loading from the backend, im showing these empty boxes, in order not to make a hearse transition

As mentioned above, the formula that can be used, is
IF(IS_EMPTY(data[“example”]), true, false)

1 Like

Oh by the way I was able to fix this. I have started setting the visibility like this:

NOT(pageVars.isLoading) && NOT(IS_UNDEFINED(pageVars.isLoading)

You can see here the button no longer shows spuriously:.

1 Like

Hi Daniel,

How do you know / make your page var isLoading be that last thing that loads?

I follow the logic, but what if a data variable is read after this page var is correctly set? It could still cause flickers etc.

so far it has been working for me. I think there could be a better way, however. It would be really nice if some more granular control could be implemented, such as the ability to set which variables are set first, and whether to perform tasks asynchronously or defer until dom content loaded

I agree totally. Your idea works if page variable are the last element loaded. But if data variables are last then it just need switching to one of them.

@Mevi, @Mari Is there any way you could ask the dev team what the page build order is, in particular, what is the last thing? That way there would be an reliable method of using Daniel´s idea.

1 Like

There’s no specific thing that is the last thing per say – I would go off from having all the data variables populated as if you fetch something from the backend, that tends to be the last thing that is ready. Before that, you can show a page with a spinner for the data though, depending on what the preferred way to do is. I have preferred to have placeholders for data (usually spinners and texts like “Loading data…”) to have something showing for the user as quickly as possible. Whole sections can be hidden behind spinners while data is loading, if their contents jump around too much until after that loading is finished.

1 Like

"… tends to be … " If we could have something definitive around this then we can all build with confidence. Its not random or magic. Someone who understands the compile engine must be able to define it. And if it is data resources, what order - alphabetical, the order they were added, the order they appear on the page?

1 Like