How do I prevent default styles flashing on component with custom CSS

I have a Flex Repeater component that is repeating a Button with certain parameters (including the button's Style property and a few others). I set it up this way to be able to control what each button looks like from the Repeater, if necessary.

The behavior I'm trying to get rid of is the ugly flash of the default Button style before the defined CSS is rendered.
flashing_styles

What helps to get rid of the "flashing" (especially when its the bright --callToAction color) is to define an inline style on the button that is being repeated. This doesn't work for me, since I want to control each button's style from the repeater.

Is there a setting that I'm missing that I can turn on/off to get rid of this behavior? Is there a way to tell when the button is fully styled to maybe bind the visible property to? This bug has bothered me for a while and I could never get a good solution while also keeping components dynamic and reusable.

Can you create a view with the button in it set to a default / neutral style, embed this in your flex repeater and set the style there? If you're using Perspective Styles / Classes (as you should be) then it should be just a matter of overwriting the style class in the embedded view.

That's essentially what I'm doing... I have a view with a button and the default styles on that button are set to a neutral theme. It seems like if you're binding the style prop OR just the class (to me I don't see a difference using either method), you'll get that behavior above. The only way I can see where I don't see the flashing is if I set the button style in the view and not have the style be dynamic in any way.

Did you set the style prop/class value to persistent as well? That will make sure it loads with whatever value it had in the designer. Otherwise it will wait on the binding to evaluate before filling the value.

I did have Persistent marked everywhere except the Button's style property that was bound to the view's incoming parameter. I didn't turn it off myself - maybe when a property is bound to something, Persistent gets turned off automatically until it's turned on again.

Whatever the case may be, I think it's working a lot better and I'm not seeing flashing anymore. If that changes, I'll update this post but for now, I think my issue is resolved.

Thanks @ryan.white!

I believe this is the case, yeah

3 Likes

New bindings always default to be non-persistent.

1 Like