When page is loaded - for popups

As far as I know there is no feature to ensure a popup is displayed only after all its data has loaded (seems pretty vital in my opinion but ok).
With popups now I have run out of creative ideas on how to make my app appear professional.

My popup loads an image of a map in the background as well as icons on top of the map which users can click. Even though the image is pretty small, it takes a while to load, and in the meantime, it looks strange when only the icons are visible. I placed a loader icon behind my image so that a user at least knows they need to wait for additional content to load if the image is not visible yet.
It just looks like a mess with all the icons and the spinning loader in the middle. Maybe someone already dealt with this and was more creative than me?

Hi @digital-kollektiv, Could you send me a screenshot of these two or three steps that you go through when you start loading your page? I believe I’ve already gone through this, but I need to see your initial strategy. From what I’ve seen, these are initial images, is that it? I’ll wait and thank you.



Hey! I’m not quite sure what you mean with the steps I go through. Workflow-wise I’m not doing anything. The only thing that is happening workflow-wise is that i open a popup if a button is clicked. The structure of the popup is as follows: the lowest layer is the loading icon, followed by the map image, and then the clickable icons on top. So if the popup is opened by clicking a button, it looks like this screenshot (until the map image has loaded, it’s around 400 KB). I fear there is no way of not displaying the icons as long as the map image has not loaded…

before running an action to show the popup, run the action to display the data in the popup and then run the action to show the popup

2 Likes