Dynamic visibility of components during initial page load/refresh

Hi all,

First of all, Plasmic is awesome and super easy to use.

I have a question though and yet to find a solution. When setting component state and dynamic display condition for my NavMenu on Mobile phone, everything works fine. Except during the initial loading and during every refresh, the NavMenu, which is supposed to be invisible until an onClick event is listened, always display and disappear.

Could you please take a look and point me into the right direction of what was done incorrectly? Thank you so much in advanced.

My project ID is here ubqfCuMMEZEvxk1bechzyz.

Regards,
John

Hi, I believe the issue is that when doing responsive breakpoint design, you must set visibility to not visible instead of not rendered. So for instance make sure that the menu is either set to not visible or is inside of another container that is set to not visible.

The technical reason is that you must stick to pure CSS overrides to avoid initial flashes of incorrect content.

Please let me know if that helps!

In the future we’ll be adding warnings in plastic Studio to give you feedback and guidance to avoid situations like this

Hi Yaang,

Thank you for taking the question. I went back and checked but all the div elements are set with Visibility attributes and not Rendering attribute. For the conditional display, it does only have 1 option which is Dynamic value for visibility though.

I have made another component from scratch in order to isolate the issue. What I found is when 2 vertical stack having exact same location on DOM, even with 1 div is set conditionally invisible, it would still be rendered and displayed during the initial page load.

When I change the design approach, instead of making 2 vertical stacks, just using the same vertical stack and toggling the elements within the stack, the problem disappears.

Regards,
John