Detecting if elements are *fully* rendered

[ernie]

Hi,

This is related to the feature “when the page is loaded” but currently it only works for a page level detection. I don’t think there is a way (as far as I know) to make the elements visible when they are fully rendered on the page. Currently, I found three ways to detect the data request:

• When the page above fold is loaded
• When the page is loaded
• When the repeating group is loading

It seems to me there is a delay between the moment things are loaded and the moment things are fully downloaded and displayed on screen. Josh said the page load detection is “to wait til everything is ready to avoid flickering.” But I still see some “empty” screen even when the entire page is loaded. See below gif (you’ll see the pattern images at the end of gif)

• Cyan shapes: visible when the entire page loaded is no. (think of it as loading indicator or skeleton shape)
• Pattern images: what end users want to see.

As you see, even after cyan shapes become invisible, no images show up. It is still rendering… Sometimes delay is not noticeable. Other times, (and since most users are not using a dedicated server) things can get slow.

If there is a way to detect if the elements are fully rendered, or downloaded, we could make much nicer user experience. For instance, show a default, static image or shape (wireframe or skeleton grid) while dynamic image is downloading, and when the image is downloaded and ready to be rendered, it can be swapped with the default image. See the below examples (both unplash and airbnb):

I can think of three possible implementations.

• page/group-level detection: “this page/group is fully rendered and ready to show”
• cell-level detection: “this specific cell is rendered and ready to show”
• element-level detection: “this specific element is rendered and ready to show”

Or is there any workaround to this problem?

Edit: I posted it as “idea”, but I changed it to “need help.” Maybe someone has already figured out ways to achieve this goal. I might be missing something

[vincent56]

I’m running into a problem related to this due to performance issues.

I have several elements on a page that display a Thing related to the Thing they are looking at (let’s say a Job details page)

There are elements on that page that for example display an inventory list. Some details of that related inventory list thing are displayed on that page, full details are available when clicking a button next to the details.

If that related thing does not exist, there is another button visible that allows the user to create that thing. However, while the page is fully loaded, it will display the ‘Create thing’ button because it thinks that related Thing does not exist. Only when the data is retrieved from the server, it notices that there actually IS a thing, so it displays the other set of buttons.

It can take up to 20 seconds for that data to show up and my users are getting very confused (clicking add again because they think the Thing isn’t there anymore for example)

Being able to have ‘is loaded’ access on element level will allow me to create a skeleton view for those elements until the data is fully loaded. So yes, very helpful and needed post!