CSS delay in repeating group

I have an HTML element in a repeating group so that the ID can be appended with the cell index. The element that I am modifying with CSS is on a row of the repeating group and has the same ID used in the HTML element.

The problem I have is that the element is first displayed using the default properties, then (no more than) a second later it is re-rendered using the CSS. This flash makes the page look awkward.

Is there some way to prevent the repeating group from rendering until the CSS is loaded? A delay on everything would look better than this flash.

Thanks.

How about hiding the element by default and only show it only when the CSS is ready

Now, figuring out if the CSS is “ready” is something you can’t measure since it’s already there by default. I believe the CSS only applies to the element after the element gets rendered hence creating the flash-like behavior

How about hiding the element by default and only showing it after a few secs?

it can also be a delay of the dynamically created id: if your element has an id without dynamic expressions it gets rendered with the id, otherwise it gets rendered without the id that is then added in a second pass. Showing the element with a condition with the dynamic expressionin the id should help

4 Likes

Just knew this now. Thanks for this valuable info @dorilama

1 Like

That is interesting and I didn’t realize this. What you describe sounds it would solve my issue.

But how do I test for the dynamic ID in a condition? I don’t find any way to include that.

use the same dynamic expression that you have in the id. For example if the id has this cell's id try with when this cell's id is not empty

1 Like

I thin you are suggesting placing the ID into a state and checking there? I don’t see anyplace to test for the ID.

I think what he means is to put the same Dynamic Expression in the conditional as in the element ID.
In your case it would probably be “current cell’s index”

Try setting the element to invisible by default.
Set a conditional, when the current cell’s index is not empty > element is visible

2 Likes

Yep, what Nico said

I see. Thanks.

I’m already using Current cell’s index in the conditional to display the element (which is not visible by default).

Your information about the 2nd pass with CSS helped me solve it just now though. What I realized is I can make the default colors White (same as the background) so the first pass is not visible when it is first drawn. Now, it’s only a very slight delay before the elements appear and it’s much better than it was.

Thank you so much for your help!

1 Like