Undesirable behavior w/ conditional modal display on app load

Ask us anything
1

I have several modals within my app that are conditionally displayed. In most cases, the condition is bound to a variable value that I set manually upon an action (like clicking a button). I also have one set based on browser breakpoint (if mobile, show).

I’m seeing undesirable behavior on app load where each of these modals flashes visible for a moment before hiding again. It’s quite apparent for the modals that include a backdrop, as it changes the color of the full screen for a moment.

I can tell it’s not a matter of my variables being unset/not properly read as the actual contents of the modals are not shown, just the backdrop - ex. one modal is a full page loader - the backdrop appears, but the loader animation does not. This tells me fullPageLoader = false, for instance, is properly set.

2 cases where I’m seeing different issues:

  1. mobile
  2. desktop

Mobile:
On mobile, I’m seeing the backdrop of my modals flash briefly before re-hiding, thus changing the color of the screen for a short, but noticeable moment.

RESOLVED MOBILE ISSUE: It seems the issue on mobile was resolved when I removed mobile-specific settings on the modal transition. i.e. I had previously removed the modal transition on mobile only. When clearing that setting (returning it to inherit transition settings from desktop), this issue disappeared.

Desktop:
The desktop issue relates to the modal that shows based on breakpoint (condition below) - it is only supposed to be visible on mobile.

image
image888×280 23.7 KB

On app load in browser, I see the modal’s contents briefly in the top-left corner of the screen before it hides itself, image below:

image
image1360×756 66.1 KB

Thanks for any insight!

2

Hi @clncsports curious to learn how you were able to fix this in the end?

3

Hey @ben - unfortunately was never able to find a fix, so reduced my modal usage on high traffic public pages

1 Like
4

Hi @clncsports happy to hear you found a way - but would be interesting to get to the root of this and understand why such behavior is happening.

5

@ben completely agree - something like this has a big impact on the user perception of quality and experience of a site.

@Joyce now that someone else has recreated this bug, perhaps you can ask the team to take a look?

6

Simple solution, start from the “hidden” state. This way you don’t depend on variables that might be fetched with a delay.

In simple terms, you want the condition to be false by default, and then add onto it with “dependant” variables that take some time to get resolved.

1 Like
7

Hi @clncsports :wave:

If you are using the Modal element, then this is related to a pre-rendering issue that the team is currently investigating.

If you are using another element, then @Broberto’s solution should do the trick.

8

Thanks for the update - my issue was indeed with a modal. Will look forward to the bug fix!